يمكن أن يكون لأداء الويب تأثير كبير في تجربة المستخدم الكاملة. إذا كنت تبحث عن تحسين أداء موقعك الإلكتروني مؤخرًا، من المرجّح أنّك سمعت عن إحصاءات PageSpeed، وهي أداة تحلّل الصفحات وتقدّم نصائح حول كيفية تحسين سرعتها استنادًا إلى أفضل الممارسات لأداء الويب على الأجهزة الجوّالة وأجهزة الكمبيوتر المكتبي.
تستند نتائج PageSpeed إلى عدد من العوامل، بما في ذلك مدى تصغير النصوص البرمجية وتحسين الصور وضغط المحتوى وحجم أهداف النقر المناسب وتجنُّب عمليات إعادة التوجيه إلى الصفحة المقصودة.
يغادر %40 من المستخدمين الصفحات التي يستغرق تحميلها أكثر من 3 ثوانٍ، لذا أصبح الاهتمام بسرعة تحميل صفحاتك على أجهزة المستخدمين جزءًا أساسيًا من سير عملنا في مجال التطوير.
مقاييس الأداء في عملية الإنشاء
على الرغم من أنّ الانتقال يدويًا إلى إحصاءات PageSpeed لمعرفة مستوى نتائجك أمر جيد، يسأل عدد من المطوّرين ما إذا كان من الممكن الحصول على تقييم أداء مشابه في عملية الإنشاء.
الإجابة هي: بالتأكيد.
تقديم مؤشر معايير التلوّث لنظام التشغيل Node
يسرّنا اليوم تقديم PSI لنظام التشغيل Node، وهي وحدة جديدة تعمل بشكل رائع مع Gulp وGrunt وأنظمة الإنشاء الأخرى، ويمكنها الربط بخدمة "إحصاءات PageSpeed" وعرض تقرير مفصّل عن أداء موقعك الإلكتروني. لنطّلِع على معاينة لنوع التقارير التي تتيحها هذه الميزة:
إنّ النتائج الواردة أعلاه جيدة للتعرّف على نوع التحسينات التي يمكن إجراؤها. على سبيل المثال، يعني مقياس 5.92 لحجم المحتوى في مساحة العرض أنّه لا يزال بإمكانك إجراء "بعض" الأعمال، في حين أنّ مقياس 24 لتقليل الموارد التي تمنع العرض قد يشير إلى أنّك بحاجة إلى تأجيل تحميل JavaScript باستخدام السمة async.
تقليل حواجز استخدام "إحصاءات PageSpeed"
إذا حاولت استخدام واجهة برمجة التطبيقات PageSpeed Insights API في السابق أو حاولت استخدام أيّ من الأدوات التي ننشئها استنادًا إليها، من المحتمل أنّك اضطررت إلى التسجيل للحصول على مفتاح واجهة برمجة تطبيقات مخصّص. ندرك أنّ هذه العملية تستغرق بضع دقائق فقط، ولكن قد لا ترغب في الحصول على "الإحصاءات" كجزء من سير العمل المعتاد.
يسرّنا إعلامك بأنّ خدمة PageSpeed Insights تتيح تقديم طلبات بدون مفتاح واجهة برمجة التطبيقات لما يصل إلى طلب واحد كل 5 ثوانٍ (وهو عدد كافٍ لأي مستخدم). بالنسبة إلى الاستخدام الأكثر انتظامًا أو النُسخ العلنية المهمة، قد تحتاج إلى التسجيل للحصول على مفتاح.
تتيح وحدة PSI خيار nokey لإعدادها في أقل من بضع دقائق وخيار key لفترة أطول قليلاً. تم توثيق تفاصيل حول كيفية التسجيل للحصول على مفتاح واجهة برمجة التطبيقات.
الخطوات الأولى
لديك خياران لكيفية دمج 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، والذي يستخدم الآن أداة PageSpeed Insights لتحسين تقاريره.
تثبيت
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 خاص بواجهة برمجة التطبيقات على النحو التالي):
psi http://www.html5rocks.com --nokey --strategy=mobile
أو بالنسبة إلى المستخدمين الذين لديهم مفتاح واجهة برمجة تطبيقات مسجَّل:
psi http://www.html5rocks.com --key=YOUR_API_KEY --strategy=mobile
هذا كل ما في الأمر.
احرص على أن يصبح الأداء جزءًا من ثقافتك.
علينا البدء بالتفكير أكثر في تأثير تصميماتنا وعمليات التنفيذ على تجربة المستخدم.
يمكن للحلول، مثل PSI، تتبُّع أداء موقعك الإلكتروني على أجهزة الكمبيوتر المكتبي والأجهزة الجوّالة، وهي مفيدة عند استخدامها كجزء من سير العمل المعتاد بعد النشر.
يسرّنا معرفة أي ملاحظات لديك ونأمل أن يساعدك برنامج PSI في تحسين ثقافة الأداء في فريقك.