خودکارسازی سنجش عملکرد وب

آدی عثمانی

توییتر گیت هاب

عملکرد وب می تواند تأثیر زیادی بر کل تجربه کاربری شما داشته باشد. اگر اخیراً به دنبال بهبود عملکرد سایت خود بوده‌اید، احتمالاً نام PageSpeed ​​Insights را شنیده‌اید - ابزاری که صفحات را تجزیه و تحلیل می‌کند و توصیه‌هایی در مورد چگونگی سریع‌تر کردن آنها بر اساس بهترین روش‌ها برای عملکرد وب موبایل و دسکتاپ ارائه می‌دهد.

امتیازات PageSpeed ​​بر اساس تعدادی از عوامل است، از جمله اینکه اسکریپت‌های شما چقدر به حداقل می‌رسند، تصاویر بهینه‌سازی می‌شوند، محتوا gzip می‌شود، اهداف ضربه‌ای به اندازه مناسب هستند و از تغییر مسیرهای صفحه فرود اجتناب می‌شود.

با توجه به اینکه 40٪ از افراد به طور بالقوه صفحاتی را که بارگیری آنها بیش از 3 ثانیه طول می کشد رها می کنند، توجه به سرعت بارگیری صفحات شما در دستگاه های کاربران شما به طور فزاینده ای به بخشی اساسی از گردش کار توسعه ما تبدیل می شود.

معیارهای عملکرد در فرآیند ساخت شما

اگرچه به صورت دستی به PageSpeed ​​Insights مراجعه می‌کنید تا ببینید امتیازات شما چقدر خوب است، تعدادی از توسعه‌دهندگان می‌پرسند که آیا می‌توان امتیاز عملکرد مشابهی را در فرآیند ساخت خود دریافت کرد یا خیر.

پاسخ این است: مطلقا.

معرفی PSI برای Node

امروز خوشحالیم که PSI را برای Node معرفی می کنیم - ماژول جدیدی که با Gulp ، Grunt و سایر سیستم های ساخت عالی کار می کند و می تواند به سرویس PageSpeed ​​Insights متصل شود و گزارش دقیقی از عملکرد وب شما ارائه دهد. بیایید به پیش نمایشی از نوع گزارشی که آن را فعال می کند نگاه کنیم:

نتایج بالا برای درک نوع بهبودهایی که می تواند انجام شود خوب است. به عنوان مثال، 5.92 برای اندازه دادن محتوا به viewport به این معنی است که "مقداری" هنوز می تواند انجام شود، در حالی که 24 برای به حداقل رساندن منابع مسدودکننده رندر ممکن است نشان دهد که باید بارگذاری JS را با استفاده از ویژگی async به تعویق بیندازید.

کاهش موانع ورود به PageSpeed ​​Insights

اگر قبلاً از PageSpeed ​​Insights API استفاده کرده‌اید یا سعی کرده‌اید از هر یک از ابزارهایی که در بالای آن ساخته‌ایم استفاده کنید، احتمالاً مجبور شده‌اید برای یک کلید API اختصاصی ثبت نام کنید. می‌دانیم که اگرچه این فقط چند دقیقه طول می‌کشد، اما می‌تواند برای دریافت Insights به‌عنوان بخشی از گردش کار معمولی شما خاموش شود.

ما خوشحالیم که به شما اطلاع دهیم که سرویس PageSpeed ​​Insights از درخواست بدون کلید API برای حداکثر 1 درخواست در هر 5 ثانیه پشتیبانی می کند (برای هرکسی زیاد). برای استفاده منظم تر یا ساخت های تولید جدی، احتمالاً می خواهید برای یک کلید ثبت نام کنید.

ماژول PSI هم از گزینه nokey برای راه اندازی آن در کمتر از چند دقیقه و هم از گزینه key برای کمی بیشتر پشتیبانی می کند. جزئیات نحوه ثبت نام برای یک کلید API مستند شده است.

شروع شدن

شما دو گزینه برای ادغام PSI در گردش کار خود دارید. می توانید آن را در فرآیند ساخت خود ادغام کنید یا آن را به عنوان یک ابزار نصب شده در سطح جهانی بر روی سیستم خود اجرا کنید.

فرآیند ساخت

استفاده از PSI در فرآیند ساخت 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 به بهبود فرهنگ عملکرد در تیم شما کمک کند.