אוטומציה של מדידת הביצועים באינטרנט

לביצועים באינטרנט יכולה להיות השפעה עצומה על חוויית המשתמש כולה שלך. אם אתם מנסים לשפר את הביצועים של האתר שלכם לאחרונה, סביר להניח ששמעתם על PageSpeed Insights – כלי שמנתח דפים ומציע עצות לשיפור הביצועים שלהם על סמך שיטות מומלצות לשיפור הביצועים באינטרנט לנייד ולמחשב.

הציונים של PageSpeed מבוססים על מספר גורמים, כולל באיזו מידה הסקריפטים שלכם ממוזערים, האופטימיזציה של התמונות, התוכן עבר קובץ gzip, יעדי הקשה צריכים להיות בגודל מתאים והפניות אוטומטיות שאפשר להימנע מהפניות של דפי נחיתה.

40% מהאנשים עשויים לנטוש דפים שהטעינה שלהם נמשכת יותר מ-3 שניות, ולכן חשוב להם לדעת באיזו מהירות הדפים נטענים במכשירים של המשתמשים.

מדדי ביצועים בתהליך ה-build

למרות שעברתם ידנית ל-PageSpeed Insights כדי לבדוק את הדירוג שלכם, מספר מפתחים שאלו אם ניתן לקבל ציון ביצועים דומה בתהליך ה-build שלהם.

התשובה היא: בהחלט.

חדש: PSI עבור צומת

היום אנחנו שמחים להציג את PSI ל-Node – מודול חדש שעובד מצוין עם Gulp , Grunt ומערכות build נוספות, שיכול להתחבר לשירות PageSpeed Insights ולהחזיר דוח מפורט על ביצועי האתר. הנה תצוגה מקדימה של סוג הדיווח שהכלי מאפשר:

התוצאות שלמעלה יעזרו לכם להבין אילו שיפורים אפשר לשפר. לדוגמה, הגדרה של 5.92 למדידת גודל התוכן לאזור התצוגה מאפשרת לבצע עבודה 'חלק', ואילו הגדרה של 24 למזעור משאבים שחוסמים עיבוד עשויה להצביע על הצורך לדחות טעינה של JS באמצעות המאפיין async.

הורדת חסמי הכניסה ל-PageSpeed Insights

אם ניסיתם בעבר להשתמש ב-PageSpeed Insights API או ניסיתם להשתמש בכלים שעליהם אנחנו מסתמכים, סביר להניח שהייתם צריכים להירשם למפתח API ייעודי. ברור לנו שלמרות שהתהליך נמשך כמה דקות בלבד, ייתכן שלא תהיה לכם אפשרות לקבל תובנות כחלק מתהליך העבודה הרגיל שלכם.

אנחנו שמחים להודיע לך ששירות PageSpeed Insights תומך בשליחת בקשות ללא מפתח API עבור עד בקשה אחת כל 5 שניות (הרבה לכולם). אם אתם משתמשים באופן קבוע יותר או בגרסאות build רציניות יותר, עדיף להירשם לקבלת מפתח.

מודול PSI תומך גם באפשרות nokey להגדרה תוך פחות מכמה דקות, וגם באפשרות key למשך זמן ארוך יותר. במסמך מתואר אופן הרישום של מפתח API.

איך מתחילים

יש שתי אפשרויות לשילוב PSI בתהליך העבודה. אתם יכולים לשלב אותו בתהליך ה-build או להריץ אותו ככלי גלובלי שמותקן במערכת שלכם.

תהליך הבנייה

השימוש ב-PSI בתהליך ה-build של גרונט או גולפ הוא די פשוט. אם אתם עובדים על פרויקט Gulp, אתם יכולים להתקין PSI ולהשתמש בו ישירות.

התקנה

כדי לשמור את הקובץ package.json, צריך להתקין PSI באמצעות npm ולהעביר את --save-dev.

npm install psi --save-dev

לאחר מכן, מגדירים משימת Gulp עבור אותה בקובץ ה-gulpfile באופן הבא (שנכלל גם בפרויקט sample ב-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

ואם אתם משתמשים ב-Gunt, תוכלו להשתמש ב-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 עוזר לשפר את תרבות הביצועים של הצוות.