كيف تسريع الموقع الخاص بك وحل مشاكل cls فى مشرفى المواقع

فكرة مراجعة كود موقعك سطرًا بسطر لمحاولة تحسينه استعدادًا لتحديث خوارزمية Google في يونيو 2021 هي فكرة محيرة للعقل.

قبل الغوص في حفرة الأرانب ، يجب عليك تحديد خطوات التحسين السبع هذه التي ستساعدك على اجتياز تقييم العلامات الحيوية للشبكة الأساسية ...

أو على الأقل تصل بك إلى 90٪ من هدفك.

يجب أن نشير إلى أن معظم هذه النصائح متقدمة إلى حد ما.

لقد أضفنا بعض الموارد في نهاية المقال إذا كنت بحاجة إلى التعمق أكثر.

فقط حوالي 16٪ من مواقع الويب الأمريكية تجتاز حاليًا التقييم الأساسي لحيوية الويب.

هذا يثبت أنه من الصعب المرور دون مراعاة المقاييس وإجراء التغييرات الصحيحة على كيفية عمل الموقع.

قبل أن ندرج هذه الخطوات ، يجب أن تلقي نظرة سريعة على كيفية قياس حيوية الويب الأساسية على موقع الويب الخاص بك للتحقق من أدائك الحالي.

حسنًا ، في القائمة.

يساعد تقديم الأصول من خلال CDN في تقليل المسافة الفعلية بين الطلبات والاستجابات ، مما يقلل من زمن انتقال الشبكة.

يمكن أن يؤدي تقليل وقت استجابة الشبكة إلى تحسين سرعة تحميل موقعك ، خاصة للطلبات المتباعدة.

استخدام CDN له تأثير مباشر على الحد الأقصى لسحب محتوى موقع الويب الخاص بك.

إذا كان أكبر عنصر في صفحتك (أي المحتوى الأكبر) ، مثل صورة رئيسية ، مستضافًا على خادم على الجانب الآخر من العالم ، يمكن أن يكون لوقت استجابة الشبكة تأثير كبير على المدة التي يستغرقها التحميل.

يعني تحميل محتوى موقعك على شبكة CDN أن إصدار الملف يجب أن يكون أقرب ماديًا إلى المتصفح الذي يحاول تحميله.

يعد إنشاء شبكة توصيل المحتوى أمرًا سهلاً ، اعتمادًا على كيفية إعداد موقع الويب الخاص بك.

بالنسبة إلى مواقع الويب التي تم إنشاؤها باستخدام مولدات مواقع ثابتة مثل Gatsby ، وهي إطار العمل المفضل لدينا ، فإن تكوين CDN سهل مثل النشر في Cloudflare أو Amazon S3.

يمكن أن تكون تغييرات التخطيط التراكمية مشكلة يصعب حلها ، خاصةً إذا كان موقعك ثقيلاً على الإعلانات أو التضمينات أو الإطارات المضمنة.

في بعض الأحيان يتم تحميل هذه العناصر على الصفحة بطرق غير متوقعة وتتسبب في رقص جميع العناصر الأخرى.

لحل هذه المشكلة ، يجب أن يعرض موقعك "shell" باستخدام CSS للحفاظ على المساحة التي ستظهر فيها هذه العناصر المسببة للمشكلة بعد التحميل.

تأكد من استخدام الأبعاد الصحيحة عند استخدام محتوى العنصر النائب للحفاظ على المساحة ، وإلا فسوف ينتهي بك الأمر باستخدام CLS.

من الجيد أيضًا إبقاء الإعلانات غير اللاصقة بعيدًا عن الجزء العلوي من الصفحة وتجنب تصغير المساحة عند عدم تحميل أي شيء.

عادة ما يتم استهجان الأنماط المضمنة من قبل مجتمع التنمية.

بالطبع.

يعد استخدام الأنماط المضمنة في كل مكان مجرد طريقة محيرة لتنظيم التعليمات البرمجية الخاصة بك.

ولكن استخدام الأنماط المضمنة لتحميل أجزاء "مهمة" من موقعك (أي شيء في الجزء المرئي من الصفحة) يعني أنك لست مضطرًا إلى إعادة قياسها عند تنزيل أوراق الأنماط بشكل فردي.

هذا يقطع شوطا طويلا في منع CLS.

هذه فائدة أخرى وجدناها من استخدام GatsbyJS.

استخدم مكونًا إضافيًا مثل مكونات Gatsby التي ستأخذ المكونات النهائية وتضمن الأنماط لك!

قبل أن يتمكن المتصفح من عرض الصفحة ، يحتاج إلى تحليل ترميز HTML.

عندما يواجه المتصفح نصًا برمجيًا يحتاج إلى التنفيذ ، فإنه يمنع عرض بقية الصفحة.

اسم اللعبة هنا هو تجنب هذه النصوص قدر الإمكان.

لكن هذه ليست نصيحة واقعية.

إذا لم تتمكن من التخلص منه ، فهناك خياران آخران.

إذا كانت صغيرة ، يمكنك تضمين البرنامج النصي لتجنب طلبات الشبكة الزائدة.

ولكن إذا كان النص البرمجي كبيرًا جدًا ، فسيؤدي ذلك إلى تقليل وقت التحميل الأولي.

الخيار الثاني هو تأخير تحميل النص لتجنب التأثير على وقت تحميل الصفحة.

يعمل هذا فقط إذا كان من الممكن تأخير الوظيفة المضافة بواسطة البرنامج النصي لبضع ثوان.

هذه الخطوة مشابهة جدًا للخطوة السابقة.

كما تقول Google على مدونتهم ؛

"البرامج النصية للجهات الخارجية هي السبب الرئيسي لتدهور الأداء ، وغالبًا ما تنتج عن موارد خارجة عن سيطرتك."

هذا البيان مثير للسخرية إلى حد ما ، لأن جوهر المشكلة عادة ما يكون Google Tag Manager أو إعلانات Google أو YouTube أو الخدمات الأخرى المملوكة لشركة Google.

في أي حال ، إذا حددت نصًا برمجيًا تابعًا لجهة خارجية على موقعك يعد أمرًا ضروريًا ولكنه يؤثر على الأداء ، فمن الأفضل تأخير تحميله أو تعيينه ليتم تحميله بشكل غير متزامن.

إذا لم تقم بتحسين موقعك بجدية ، فمن السهل الوقوع في فخ تضمين مكتبات ثقيلة للغاية وترك "شفرة ميتة" في موقعك.

قد يؤثر الفشل في تقليل حجم الحزمة الأولي على LCP و FIP.

عندما يكون ذلك ممكنًا ، ابحث عن مكتبات خفيفة الوزن.

على سبيل المثال ، إذا قمت بتحميل React طوال مشروعك ، ولكنك استخدمت وحدات قليلة فقط ، فقد تفكر في التبديل إلى Preact (3Kb) كبديل خفيف الوزن.

تعد إزالة الكود الميت من الحمولة الأولية (والمشروع بأكمله) اقتراح تحسين واضح.

ليس من الأسهل دائمًا تنفيذه ، خاصةً إذا كنت تعمل في مشروع قديم.

حاول تصغير الكود الخاص بك عندما يكون ذلك ممكنًا.

قد تكون إعادة هيكلة JavaScript صعبة وتستغرق وقتًا طويلاً ، ولكن كل ذلك باسم التحسين!

أخيرًا ، إذا كنت تستخدم حزمة تعليمات برمجية مثل Webpack ، فقد تفكر في تقسيم الحزمة.

يستخدم هذا الأسلوب المسار الجديد لجلب الوحدات ديناميكيًا عند الحاجة ، بدلاً من تحميلها عند تهيئة الموقع.

يمكن أن تقلل الصور ذات التحميل التدريجي أو البطيء بشكل كبير من الحمل الأولي على موقع الويب الخاص بك وتقليل كمية البيانات التي يحتاجها المستخدمون للتفاعل مع موقع الويب الخاص بك.

يمكن أن يكون لهذا تأثير مباشر على درجة LCP لموقعك ، نظرًا لأن الصورة الكبيرة غير المحسّنة بشكل سيئ والمخفية في مكان ما على الصفحة غالبًا ما تكون السبب في الحصول على درجة LCP عالية.

يساعد أيضًا تحميل الصور في ترميز المستند بدقة أقل في تجنب CLS.

كما أنه يوفر تجربة أفضل للمستخدمين.

من الصعب تحديد السبب بالضبط ، لكن انتظار تغيير الصورة من دقة منخفضة إلى دقة عالية يبدو مقصودًا ، وانتظار ظهور الصورة يبدو أمرًا أخرقًا.
مصادر أخرى

الغرض من هذا المنشور ليس إنشاء مستند مكون من 40000 كلمة لإصلاح حيوية الويب الأساسية لديك.

للحفاظ على أوقات التحميل السريعة والسمات المحسّنة ، نحاول الحفاظ على توصياتنا خفيفة الوزن.

ومع ذلك ، قد تحتاج إلى التعمق في حل مشكلات معينة.

المقالات التالية مفيدة لمساعدتك في معالجة المزيد من الأسئلة المحددة حول كل مقياس:

https://web.dev/browser-level-image-lazy-loading/

 https://web.dev/optimize-cls/

https://addyosmani.com/blog/performance-budgets/

https: // developer.

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 لتجربة المستخدم.

إذا كنت في نفس وضعنا ، فقد تكون قلقًا قليلاً بشأن تأثير ذلك على المواقع التي تديرها ، ولكنك أيضًا تتطلع إلى النتائج.