إن المادة ، التي نترجمها اليوم ، مكرسة لتقييم سرعة الموقع ، والتي يمكن حسابها باستخدام Google PageSpeed Insights.
ليس سراً أن سرعة الموقع في عصرنا أصبحت واحدة من أهم خصائصه. كلما زاد تحميل الموقع واستعد للعمل ، قد يكون الدخل الذي يجلبه إلى مالكه أعلى. إن تسريع موقع ما يعني تقليل عدد المستخدمين الذين تركوا هذا الموقع بالكاد متعبين من انتظار تنزيل مواده. من الأهمية بمكان لأداء الموقع أن مؤشرات Google PageSpeed تُستخدم الآن كأحد العوامل التي تصنف المواقع في نتائج البحث. نتيجةً لذلك ، تولي العديد من المؤسسات اهتمامًا سريعًا لسرعة مواقعها.
التغييرات في خوارزميات ترتيب الموقع
في العام الماضي ، أجرت Google تغييرين رئيسيين على خوارزميات البحث والفهرسة وترتيب الموقع.
- في مارس ، أصبحت الفهرسة قائمة على نسخة الجوال من الصفحة بدلاً من سطح المكتب.
- في يوليو ، تم تحديث خوارزمية الترتيب لكبار المسئولين الاقتصاديين. عند حسابه لصفحات الجوال والإعلانات ، بدأوا في استخدام تصنيف سرعة الصفحة.
هذه الحقائق تسمح لنا باستخلاص النتائج التالية:
- ستؤثر سرعة النسخة المحمولة من الموقع على الترتيب العام لكبار المسئولين الاقتصاديين.
- إذا تم تحميل صفحات الموقع ببطء ، فسيؤدي ذلك إلى تقليل نقاط جودة الإعلانات وتكلفة الإعلانات.
إليك ما تقوله Google حول هذا الموضوع: "لا تعمل المواقع الأسرع على تحسين تجربة المستخدم فحسب ؛ تشير البيانات الحديثة إلى أن زيادة سرعة الموقع ، بالإضافة إلى ذلك ، يؤدي إلى انخفاض في تكلفة دعمه. نحن نقدر حقا السرعة. يمكن قول الشيء نفسه عن مستخدمينا. لهذا السبب قررنا أنه عند حساب مؤشرات تصنيف البحث ، سنأخذ أيضًا في الاعتبار سرعة الموقع. "
لفهم كيف تؤثر هذه التغييرات على مشاريعنا من حيث تحسين أدائها ، نحتاج إلى فهم التقنيات التي تقوم عليها تقييم سرعة الموقع.
PageSpeed 5.0 هو نسخة منقحة بالكامل من هذا النظام. الآن يعتمد على Lighthouse و
CrUX (تقرير تجربة مستخدم Chrome).
هذا التحديث ، بالإضافة إلى ذلك ، جلب خوارزمية تسجيل جديدة ، مما يعقد مهمة الحصول على درجة عالية في PageSpeed.
ما الذي تغير في PageSpeed 5.0؟
قبل الإصدار 5.0 ، فحصت أداة PageSpeed الصفحة ، لتحلل مدى توافقها مع مجموعة من القواعد الإرشادية. إذا كانت هناك صور كبيرة غير مضغوطة على الصفحة ، فيمكن أن تنصح PageSpeed مطور الويب بضغط هذه الصور. لا رؤوس مخبأ؟ يمكن للنظام أن ينصحهم بالإضافة.
تم ربط التوصيات بشيكات الصفحة هذه. قد تؤدي التوصيات التالية إلى تحسين أداء الصفحة. لكن القواعد الإرشادية كانت سطحية إلى حد ما ، ولم تكن تهدف إلى استكشاف الانطباعات التي يمكن أن تؤدي إليها صفحة التحميل وتقديم الصفحة إلى زائر حقيقي لموقع ما.
في PageSpeed 5.0 ، يتم تحميل الصفحات في متصفح Chrome حقيقي ، يتم التحكم فيه بواسطة Lighthouse. تقوم المنارة بتسجيل المقاييس التي تم الحصول عليها من المستعرض ، وتطبق نموذج النقاط عليها ، وتعرض درجة الأداء الإجمالية. يتم تقديم توصيات لتحسين الأداء بناءً على النقاط التي سجلتها الصفحة التي تمت دراستها للمؤشرات الفردية.
منارة ، مثل PageSpeed ، لديها نظام تصنيف أداء الموقع. في PageSpeed 5.0 ، يتم تقييم الأداء مباشرة من Lighthouse. إخراج درجة الأداء بواسطة PageSpeed هو الآن نفس الدرجة التي تنتجها المنارة.
يعتمد تصنيف أداء PageSpeed على التصنيف الذي تم إنشاؤه بواسطة Lighthouseالآن وبعد أن عرفنا من أين تأتي درجة PageSpeed ، دعنا نتحدث عن كيفية حساب هذه النتيجة وما الذي يمكن عمله لتحسين سرعة الموقع.
ما هي منارة جوجل؟
Lighthouse عبارة عن مشروع مفتوح المصدر ، يتم إدارته بواسطة فريق خاص ، يتم تمييزه من بين مطوري Google Chrome. على مدار العامين الماضيين ، أصبحت Lighthouse الأداة المجانية القياسية لتحليل أداء الموقع.
تستخدم Lighthouse بروتوكول تصحيح الأخطاء عن بُعد من Chrome (بروتوكول تصحيح الأخطاء عن بُعد من Chrome) لقراءة معلومات حول طلبات الشبكة ، لقياس أداء رمز JavaScript ، للتحقق من الامتثال لمعايير إمكانية الوصول إلى محتوى الصفحة. تقيس هذه الأداة مؤشرات الوقت التي تركز على إدراك المستخدمين للصفحة. وتشمل هذه ، على سبيل المثال ،
الطلاء الأول المضمون ،
والوقت للتفاعل ، ومؤشر السرعة.
إذا كنت مهتمًا بالمنارة - يمكنك إلقاء نظرة على
هذه المواد من مستودع المشروع الرسمي ، المخصص للوصف العام لهيكلها.
حساب تصنيف أداء الموقع في المنارة
كجزء من دراسة أداء الصفحة ، تكتب Lighthouse العديد من المقاييس التي تركز على تقييم ما يراه المستخدم وما يختبره المستخدم أثناء العمل مع الصفحة. فيما يلي ستة مقاييس تستخدم للحصول على درجة أداء شاملة:
- الوقت للتفاعل (TTI ، وقت التحميل للتفاعل).
- مؤشر السرعة.
- أول محتوى الطلاء (FCP ، وقت تنزيل المحتوى الأول).
- أول وحدة المعالجة المركزية الخمول.
- الرسام الأول ذو مغزى (FMP ، وقت التنزيل للمحتوى الكافي).
- مدخلات الكمون المقدرة.
يتم تقييم كل من هذه المؤشرات على مقياس من 0 إلى 100. يتم إجراء التقييم عن طريق الحصول على النسب المئوية 75 و 95 لصفحات الجوال من
أرشيف HTTP وباستخدام الوظيفة
log normal .
باتباع هذه الخوارزمية وبالنظر إلى البيانات المستخدمة لحساب TTI ، يمكنك أن ترى أنه إذا أصبحت الصفحة "تفاعلية" ، مناسبة لتفاعل المستخدم ، في 2.1 ثانية ، فإن TTI سوف تساوي 92/100.
TTIبعد حساب كل من المؤشرات ، يتم تخصيص وزن معين له ، والذي يستخدم كمعدل في حساب المؤشر الكلي. فيما يلي الأوزان المخصصة للقياسات المختلفة.
تشير الأوزان إلى كيفية تأثير كل من المؤشرات على تجربة مستخدم الهاتف المحمول مع الصفحة.
في المستقبل ، يمكن توسيع هذه المجموعة لتشمل مؤشرات مأخوذة من مجموعة بيانات تقرير تجربة مستخدم Chrome المتعلقة بتصورات المستخدم للمواقع.
قد تكون مهتمًا بمعرفة كيفية تأثير استخدام الأوزان على تقييم الأداء النهائي. إذا كان الأمر كذلك ، ألق نظرة على
هذا الجدول الذي أنشأه فريق Lighthouse. بعد تحليلها ، يمكنك فهم هذه العملية بشكل أفضل.
جزء من جدول يوضح حساب تصنيف أداء الصفحةإذا قمت بتغيير المقياس
interactive في المثال أعلاه (هذا ما نسميه TTI هنا) من 5 ثوانٍ إلى 17 ثانية (أي ، إلى مستوى المتوسط العالمي TTI لصفحات الجوال) ، فإن تصنيف الصفحة سينخفض إلى 56٪ ( هذا هو - سوف تحصل على 56 نقطة من 100 ممكن).
إذا قمت بتعيين مؤشر
first-contentful-paint على 17 ثانية ، فسوف ينخفض التصنيف إلى 62٪.
نتيجة لذلك ، يمكننا أن نستنتج أن مقياس TTI له أكبر تأثير على تصنيف الموقع النهائي. ويترتب على ذلك أنه من أجل الحصول على صفحة PageSpeed عالية التصنيف ، تحتاج إلى إظهار TTI لائق.
تحسين TTI
إذا نظرنا على نطاق واسع في مشكلة تحسين TTI ، فيمكننا القول أن هناك عاملين يؤثران بشدة على هذا المؤشر:
- مقدار شفرة JavaScript المحملة على الصفحة.
- الوقت المستغرق لإكمال مهام JavaScript المختلفة في سلسلة الرسائل الرئيسية.
هنا يمكنك العثور على تفاصيل حول TTI ، ولكن إذا كنت ترغب في ذلك بسرعة ، دون الحاجة إلى إجراء مزيد من البحث ، يمكنك تحسين TTI لموقع الويب الخاص بك ، فقد نوصي بتقليل مقدار شفرة JavaScript.
قم بإزالة شفرة JavaScript غير المستخدمة ، حيثما أمكن ، أو حاول التأكد من أن الصفحة فقط تقوم بتحميل البرامج النصية المستخدمة في هذه الصفحة. قد يعني تنفيذ هذه التوصية التخلص من ملفات polyfills القديمة أو استبدال مكتبات الجهة الخارجية ببدائل أكثر إحكاما وحداثة.
من المهم أن تتذكر أن ما يسمى "
سعر JavaScript " ليس فقط الوقت الذي يستغرقه تنزيل الكود. يحتاج المتصفح إلى فك ضغط شفرة JavaScript المحملة وتحليلها وتجميعها وفي النهاية تنفيذها. كل هذه العمليات قد تستغرق وقتًا طويلاً. خاصة على الأجهزة المحمولة.
من بين التدابير الفعالة لتقليل مقدار كود JS الذي تستخدمه الصفحات ، يمكن ملاحظة ما يلي:
- تحليل polyfills المستخدمة ورفض تلك التي لم تعد هناك حاجة من قبل جمهورك.
- معرفة "تكلفة" كل من مكتبات الطرف الثالث المستخدمة. للتعرف على أحجام المكتبات المستخدمة في المشروع ، يمكنك استخدام أدوات مثل webpack-bundle-analys و source-map-explorer .
- يمكن لأدوات JavaScript الحديثة (مثل webpack) تقسيم تطبيقات JS الكبيرة إلى مجموعات من الحزم الصغيرة التي يتم تحميلها تلقائيًا عند الضرورة. على وجه الخصوص ، عندما ينتقل المستخدم من صفحة إلى صفحة من الموقع. تُعرف هذه الطريقة لتحسين أداء الموقع باسم تقسيم الشفرة . استخدامه له تأثير جيد جدا على TTI.
- استخدم عمال الخدمة الذين يقومون بتخزين مؤقت للشفرة الثانوية الناتجة عن تحليل النصوص البرمجية وتجميعها. إذا أمكنك تضمين آليات التخزين المؤقت هذه في مشروعك ، فسيتم إنفاق موارد النظام الخاصة بزوار الموقع على تحليل الشفرة وتجميعها فقط عند الانتقال إلى المورد لأول مرة. في الزيارات المتكررة للموقع ، سيتم أخذ المواد اللازمة من ذاكرة التخزين المؤقت.
TTI الرصد
من أجل استكشاف كيفية فهم المستخدمين لموقعك بنجاح ، نوصي باستخدام أنظمة مراقبة أداء موقع الويب مثل
Caliber . على وجه الخصوص ، نحن نتحدث عن حقيقة أن المواقع يتم اختبارها على جهازين على الأقل - على كمبيوتر مكتبي سريع وعلى هاتف محمول ، حيث يكون مستوى أدائها على مستوى أجهزة الطبقة المتوسطة البطيئة.
مع هذا النهج ، سيكون لديك بيانات عن الخيار الأفضل للعمل مع موقعك ، وللأسوأ. في الوقت نفسه ، سيتعين عليك التعود على حقيقة أن زوار موقعك لا يستخدمون نفس الأجهزة القوية التي يستخدمها فريقك.
التنميط اليدوي الدقيق
من أجل الحصول على أقصى استفادة من ملفات تعريف أداء كود JS ، يتم اختبار صفحات الاختبار على الأجهزة المحمولة التي تم إبطاءها بشكل خاص. إذا كان لديك هاتف قديم مستلقٍ على درج مكتبك ، فإن تحقيق هذه الفكرة يمكن أن يمنحها حياة ثانية رائعة.
البديل الجيد للأجهزة الحقيقية هو إمكانات أدوات مطوري Chrome.
فيما يلي مواد عن تشكيل تطبيقات React باستخدام هذه الأدوات.
مقاييس أخرى
تعتمد مقاييس مثل مؤشر السرعة ، الرسام ذي المحتوى الأول ، والطلاء ذي المعنى الأول على كيفية عرض المتصفح للصفحة. تتأثر هذه العوامل بعوامل مماثلة لتلك التي تحدثنا عنها بالفعل. وغالبًا ما يؤدي التأثير على هذه العوامل إلى تحسن جميع هذه المؤشرات.
من الناحية الموضوعية ، تحسين هذه المقاييس أسهل من TTI. الحقيقة هي أن أساس حسابهم هو سرعة عرض الصفحة من قبل المتصفح. يمكن تحسين هذه المقاييس باتباع الإرشادات الواردة بعد تحليل الصفحة بالضبط باستخدام المنارة.
إذا لم تكن تقوم بتحميل الخطوط مسبقًا أو تحسين الصفحة مع مراعاة خصائص الاستعلامات المهمة ، فيمكنك البدء في تحسين أداء عرض موقعك من هذين الاتجاهين فقط. في
هذه المقالة ، يمكنك العثور على معلومات مفصلة حول كيفية تحميل المتصفح وعرض الموارد الهامة المستخدمة في تكوين صفحات الويب.
النتائج: على مراقبة المواقع وإدخال تحسينات ملموسة على عملهم
تعد وحدة تحكم بحث Google المحدثة و Lighthouse و PageSpeed Insights أدوات ممتازة تتيح لك تقييم الأداء الكلي للموقع على الفور. ومع ذلك ، فهي ليست مناسبة بشكل جيد للفرق التي تحتاج إلى مراقبة وتحسين أداء مشاريعها بشكل مستمر.
تعد المراقبة المستمرة للأداء جزءًا أساسيًا من سير العمل الذي يهدف إلى الحفاظ على أداء الموقع باستمرار على مستوى عالٍ. مع هذا النهج ، يتعلم فريق المشروع على الفور حول مشاكل الأداء. من خلال اختبار الأداء اليدوي ، من الممكن أن تنتشر النتائج بشكل غير متوقع. نتيجة لذلك ، من دون إنشاء بيئة اختبار متخصصة ، يكاد يكون من المستحيل اختبار أداء الموقع باستخدام أجهزة مختلفة ، أو محاكاة المعلمات المتغيرة الأخرى لأنظمة المستخدمين المحتملين.
أصبحت سرعة الصفحة عاملا حاسما في ترتيب كبار المسئولين الاقتصاديين الصفحة. هذا البيان قوي بشكل خاص هذه الأيام ، عندما يتم إنشاء ما يقرب من 50 ٪ من حركة مرور الويب عن طريق الأجهزة المحمولة.
لضمان عدم فقد موقعك لموقعه في نتائج البحث ، حاول استخدام إصدارات حديثة من الأدوات لتحليل أداء أهم صفحاته والحفاظ على سرعته بمستوى يناسبك.
أعزائي القراء! هل تقوم بتحسين مشاريع الويب الخاصة بك مع مراعاة تحسين المؤشرات التي تؤثر على درجات Google PageSpeed؟
