לביצועי האתר יכולה להיות השפעה עצומה על כל חוויית המשתמש. אם ניסיתם לשפר את הביצועים של האתר שלכם לאחרונה, סביר להניח ששמעתם על PageSpeed Insights – כלי שמנתח דפים ומציע טיפים לשיפור המהירות שלהם על סמך שיטות מומלצות לשיפור ביצועי האתר בניידים ובמחשבים.
הדירוגים של PageSpeed מבוססים על מספר גורמים, כולל מידת ההקטנה של הסקריפטים, האופטימיזציה של התמונות, דחיסת התוכן ב-Gzip, הגודל המתאים של יעדי הקשה וההימנעות מהפניות אוטומטיות לדף נחיתה.
40% מהמשתמשים עלולים לנטוש דפים שהטעינה שלהם נמשכת יותר מ-3 שניות, ולכן חשוב לנו יותר ויותר להקפיד על מהירות הטעינה של הדפים במכשירים של המשתמשים.
מדדי ביצועים בתהליך ה-build
אפשר להיכנס באופן ידני אל PageSpeed Insights כדי לבדוק את הציונים שלכם, אבל מספר מפתחים שאלו אם אפשר לקבל ניקוד דומה של ביצועים בתהליך ה-build שלהם.
התשובה היא: בהחלט.
חדש: PSI ל-Node
היום אנחנו שמחים להציג את PSI ל-Node – מודול חדש שפועל מצוין עם Gulp, Grunt ומערכות build אחרות, ויכול להתחבר לשירות PageSpeed Insights ולהחזיר דוח מפורט על ביצועי האתר שלכם. הנה תצוגה מקדימה של סוג הדיווח שמאפשרת התכונה הזו:
התוצאות שלמעלה יעזרו לכם להבין את סוג השיפורים שאפשר לבצע. לדוגמה, הערך 5.92 במדד 'התאמת התוכן למסך' מציין שעדיין יש מקום לשיפור, ואילו הערך 24 במדד 'צמצום המשאבים החוסמים את הרינדור' עשוי להצביע על כך שצריך לדחות את טעינת ה-JS באמצעות המאפיין async.
הפחתת סף הכניסה ל-PageSpeed Insights
אם ניסיתם להשתמש ב-PageSpeed Insights API בעבר או ניסיתם להשתמש בכלים שפיתחנו על סמך ה-API הזה, סביר להניח שתצטרכו להירשם למפתח API ייעודי. אנחנו יודעים שהפעולה הזו נמשכת רק כמה דקות, אבל היא יכולה להרתיע מקבלת תובנות כחלק מתהליך העבודה הרגיל.
אנחנו שמחים להודיע לך ששירות PageSpeed Insights תומך בשליחת בקשות ללא מפתח API, עד בקשה אחת בכל 5 שניות (כמות מספקת לכל אחד). לשימוש קבוע יותר או לגרסאות build רציניות יותר בסביבת הייצור, מומלץ לרשום מפתח.
מודול ה-PSI תומך באפשרות nokey להגדרה תוך כמה דקות, ובאפשרות key להגדרה תוך זמן רב יותר. פרטים על הרישום למפתח API מפורטים במסמכים.
תחילת העבודה
יש שתי דרכים לשלב את PSI בתהליך העבודה שלכם. אפשר לשלב אותו בתהליך ה-build או להריץ אותו ככלי שמותקן באופן גלובלי במערכת.
תהליך build
השימוש ב-PSI בתהליך ה-build של Grunt או Gulp הוא פשוט למדי. אם אתם עובדים על פרויקט Gulp, אתם יכולים להתקין את PSI ולהשתמש בו ישירות.
התקנה
מתקינים את PSI באמצעות npm ומעבירים את --save-dev כדי לשמור אותו בקובץ package.json.
npm install psi --save-dev
לאחר מכן מגדירים משימה של Gulp עבורה בקובץ gulpfile באופן הבא (הנושא הזה מוסבר גם בפרויקט הדוגמה שלנו ל-Gulp):
var psi = require('psi');
gulp.task('psi', function (cb) {
psi({
nokey: 'true', // or use key: ‘YOUR_API_KEY’
url: site,
strategy: 'mobile',
}, cb);
});
לאחר מכן, אפשר להריץ את המשימה באמצעות:
gulp psi
אם אתם משתמשים ב-Grunt, תוכלו להשתמש ב-grunt-pagespeed של James Cryer, שמשתמש עכשיו ב-PSI כדי להפעיל את הדיווח שלו.
התקנה
npm install grunt-pagespeed --save-dev
לאחר מכן, מעמיסים את המשימה ב-Gruntfile:
grunt.loadNpmTasks('grunt-pagespeed');
ומגדירים אותו לשימוש:
pagespeed: {
options: {
nokey: true,
url: "https://www.html5rocks.com",
strategy: "mobile"
}
}
לאחר מכן תוכלו להריץ את המשימה באמצעות:
grunt pagespeed
התקנה ככלי גלובלי
אפשר גם להתקין את PSI ככלי שזמין בכל העולם במערכת. שוב, אפשר להשתמש ב-npm כדי להתקין את הכלי:
$ npm install -g psi
אפשר גם לבקש דוחות של PageSpeed Insights לאתר דרך חלון מסוים של מסוף (באמצעות האפשרות nokey או key ספציפי ל-API, כפי שמתואר בהמשך):
psi http://www.html5rocks.com --nokey --strategy=mobile
או לאנשים שיש להם מפתח API רשום:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
זהו!
קדימה, תנו לביצועים להפוך לחלק מהתרבות שלכם
אנחנו צריכים להתחיל לחשוב יותר על ההשפעה של העיצובים וההטמעות שלנו על חוויית המשתמש.
פתרונות כמו PSI מאפשרים לעקוב אחרי ביצועי האתר במחשבים ובניידים, והם שימושיים כחלק מתהליך העבודה הרגיל שלכם לאחר הפריסה.
נשמח לקבל משוב ממך, ומקווים ש-PSI יעזור לך לשפר את תרבות הביצועים בצוות שלך.