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