7 خطوات للتحسين لاجتياز تقييم أساسيات الويب الحرجة
فكرة المرور عبر سطر التعليمات البرمجية لموقعك بسطر لمحاولة تحسينه استعدادًا لتحديث خوارزمية Google في يونيو 2023 هي فكرة محيرة للعقل.
قبل الغوص في حفرة الأرانب، يجب عليك تحديد خطوات التحسين السبعة هذه التي ستساعدك على اجتياز تقييم الحيوية للشبكة الأساسية …
أو على الأقل تحصل على 90٪ من هدفك.
يجب أن نشير إلى أن معظم هذه النصائح متقدمة إلى حد ما.
لقد أضفنا بعض الموارد في نهاية المقال إذا كنت بحاجة إلى التعمق أكثر.
فقط حوالي 16٪ من مواقع الويب الأمريكية تجتاز حاليًا تقييم حيوية الويب الأساسي.
ثبت أنه من الصعب المضي قدمًا دون مراعاة المقاييس وإجراء التغييرات الصحيحة على كيفية عمل الموقع.
قبل أن ندرج هذه الخطوات، يجب أن تلقي نظرة سريعة على كيفية قياس حيوية الويب الأساسية على موقع الويب الخاص بك للتحقق من أدائك الحالي.
حسنًا، في القائمة.
1.
استخدم شبكة توصيل المحتوى
تساعد خدمة الأصول من خلال CDN في تقليل المسافة الفعلية بين الطلبات والاستجابات، مما يقلل من زمن انتقال الشبكة.
يمكن أن يؤدي تقليل وقت استجابة الشبكة إلى تحسين سرعة تحميل موقعك، خاصة للطلبات المتباعدة.
استخدام CDN له تأثير مباشر على الحد الأقصى لسحب محتوى موقع الويب الخاص بك.
إذا كان أكبر عنصر في صفحتك (أي المحتوى الأكبر)، مثل الصورة الرئيسية، مستضافًا على خادم على الجانب الآخر من العالم، يمكن أن يكون لوقت استجابة الشبكة تأثير كبير على المدة التي يستغرقها التحميل.
يعني تحميل محتوى موقعك على شبكة CDN أن إصدار الملف يجب أن يكون فعليًا أقرب إلى المتصفح الذي يحاول تحميله.
يعد إنشاء شبكة توصيل المحتوى أمرًا سهلاً، اعتمادًا على كيفية إعداد موقع الويب الخاص بك.
بالنسبة إلى مواقع الويب التي تم إنشاؤها باستخدام مولدات مواقع ثابتة مثل Gatsby، وهو إطار العمل المفضل لدينا، فإن تكوين CDN يكون سهلاً مثل النشر في Cloudflare أو Amazon S3.
2.
تقديم “غلاف”
يمكن أن تكون تغييرات التخطيط التراكمية مشكلة يصعب حلها، خاصةً إذا كان موقعك ثقيلاً على الإعلانات أو التضمينات أو الإطارات المضمنة.
في بعض الأحيان يتم تحميل هذه العناصر على الصفحة بطرق غير متوقعة وتتسبب في رقص جميع العناصر الأخرى.
لحل هذه المشكلة، يجب أن يعرض موقعك “shell” باستخدام CSS للحفاظ على المساحة التي ستظهر فيها هذه العناصر المسببة للمشاكل بعد التحميل.
تأكد من استخدام الأبعاد الصحيحة عند استخدام محتوى العنصر النائب للحفاظ على المساحة، أو سينتهي بك الأمر مع CLS.
من الجيد أيضًا إبقاء الإعلانات غير اللاصقة بعيدًا عن أعلى الصفحة وتجنب تقليل المساحة عند عدم تحميل أي شيء.
3.
استخدام الأنماط على الإنترنت
عادة ما يتم استهجان الأنماط المضمنة من قبل مجتمع التطوير.
بطبيعة الحال.
يعد استخدام الأنماط المضمنة في كل مكان مجرد طريقة محيرة لتنظيم التعليمات البرمجية الخاصة بك.
ولكن استخدام الأنماط المضمنة لتحميل أجزاء “مهمة” من موقعك (أي شيء في الجزء المرئي من الصفحة) يعني أنك لست مضطرًا إلى إعادة قياسها عند تنزيل أوراق الأنماط بشكل فردي.
هذا يقطع شوطا طويلا في منع CLS.
هذه فائدة أخرى وجدناها من استخدام GatsbyJS.
استخدم مكونًا إضافيًا مثل مكون Gatsby الإضافي الذي سيأخذ المكونات النهائية ويدمج الأنماط من أجلك!
4.
تمنع طلبات الحظر الصفحة من التحميل
قبل أن يتمكن المتصفح من عرض الصفحة، يحتاج إلى تحليل ترميز HTML.
عندما يواجه المتصفح نصًا برمجيًا يحتاج إلى التنفيذ، فإنه يمنع عرض بقية الصفحة.
اسم اللعبة هنا هو تجنب هذه النصوص قدر الإمكان.
لكن هذه ليست نصيحة واقعية.
إذا لم تتمكن من التخلص منه، فهناك خياران آخران.
إذا كان صغيرًا، يمكنك تضمين البرنامج النصي لتجنب طلبات الشبكة الزائدة.
ولكن إذا كان النص كبير جدًا، فسيؤدي ذلك إلى تقليل وقت التحميل الأولي.
الخيار الثاني هو تأخير تحميل النص لتجنب التأثير على وقت تحميل الصفحة.
يعمل هذا فقط إذا كان من الممكن تأخير الوظيفة المضافة بواسطة البرنامج النصي لبضع ثوان.
5.
تأخير نصوص الطرف الثالث
هذه الخطوة مشابهة جدًا للخطوة السابقة.
كما تقول Google على مدونتهم ؛
“البرامج النصية للجهات الخارجية هي السبب الرئيسي لتدهور الأداء، وغالبًا ما تنتج عن موارد خارجة عن سيطرتك.”
هذا البيان مثير للسخرية إلى حد ما، نظرًا لأن جوهر المشكلة عادةً ما يكون Google Tag Manager أو إعلانات Google أو YouTube أو الخدمات الأخرى المملوكة لشركة Google.
في أي حال، إذا حددت نصًا برمجيًا تابعًا لجهة خارجية على موقعك وهو أمر ضروري ولكنه يؤثر على الأداء، فمن الأفضل تأخير تحميله أو تعيينه ليتم تحميله بشكل غير متزامن.
6.
تقليل حجم حزمة JavaScript
إذا لم تقم بتحسين موقعك بجدية، فمن السهل الوقوع في فخ تضمين مكتبات ثقيلة للغاية وترك “شفرة ميتة” في موقعك.
قد يؤثر الفشل في تقليل حجم الحزمة الأولي على LCP و FIP.
عندما يكون ذلك ممكنًا، ابحث عن مكتبات خفيفة الوزن.
على سبيل المثال، إذا قمت بتحميل React طوال مشروعك، ولكنك استخدمت وحدات قليلة فقط، فقد تفكر في التبديل إلى Preact (3Kb) كبديل خفيف الوزن.
تعد إزالة الكود الميت من الحمولة الأولية (والمشروع بأكمله) اقتراحًا واضحًا للتحسين.
ليس من الأسهل دائمًا تنفيذه، خاصةً إذا كنت تعمل في مشروع قديم.
حاول تصغير الكود الخاص بك عندما يكون ذلك ممكنًا.
قد تكون إعادة هيكلة جافا سكريبت صعبة وتستغرق وقتًا طويلاً، ولكن كل ذلك باسم التحسين!
أخيرًا، إذا كنت تستخدم حزمة تعليمات برمجية مثل Webpack، فقد تفكر في تقسيم الحزمة.
يستخدم هذا الأسلوب المسار الجديد لجلب الوحدات ديناميكيًا عند الحاجة، بدلاً من تحميلها عند تهيئة الموقع.
7.
تحميل الصور تدريجيًا
يمكن أن تقلل الصور المتزايدة أو البطيئة التحميل بشكل كبير من الحمل الأولي على موقع الويب الخاص بك وتقليل كمية البيانات التي يحتاجها المستخدمون للتفاعل مع موقع الويب الخاص بك.
يمكن أن يكون لهذا تأثير مباشر على درجة LCP لموقعك، نظرًا لأن الصورة الكبيرة غير المحسَّنة بشكل سيئ والمخفية في مكان ما على الصفحة غالبًا ما تكون السبب في الحصول على درجة LCP عالية.
يساعد تحميل الصور أيضًا في ترميز المستند بدقة أقل مع تجنب CLS.
كما أنه يوفر تجربة مستخدم أفضل.
من الصعب تحديد السبب بالضبط، ولكن يبدو أن انتظار تغيير الصورة من دقة منخفضة إلى دقة عالية أمر مقصود، ويبدو انتظار ظهور الصورة أمرًا أخرقًا. مصادر أخرى
الغرض من هذا المنشور ليس إنشاء مستند 40.000 كلمة لإصلاح حيوية الويب الأساسية الخاصة بك.
للحفاظ على أوقات التحميل السريعة والسمات المحسّنة، نحاول الحفاظ على توصياتنا خفيفة الوزن.
ومع ذلك، قد تحتاج إلى التعمق في حل بعض المشكلات.
المقالات التالية مفيدة لمساعدتك في معالجة المزيد من الأسئلة المحددة حول كل مقياس
https//web.dev/browser-level-image-lazy-loading/
https//web.dev/optimize-cls/
https//addyosmani.com/blog/performance-budgets/
https // المطور.
google.com/web/fundamentals/performance/why-performance-matters/
https//developers.google.com/web/fundamentals/performance/optimizing-javascript/code-splitting/
https//developers.google.com/ web / tools / lighthouse / audits / time-to-dynamic
https//www.contentful.com/blog/2017/10/10/put-your-webpack-on-a-diet-part-1/
https//www.keycdn.com/support/the-growth-of-web-page-size الخلاصة
حان الوقت تقريبًا لإصدار Google UX.
إذا كنت في نفس الموقف الذي نحن فيه، فقد تكون قلقًا قليلاً بشأن التأثير على المواقع التي تديرها، ولكنك أيضًا تتطلع إلى النتائج.