يتم تشغيل هذه القاعدة عند اكتشاف PageSpeed Insights أنه يلزم المرور ذهابًا وإيابًا عبر الشبكة لعرض الجزء العلوي من الصفحة.
نظرة عامة
إذا كان حجم البيانات المطلوبة يتجاوز فترة ازدحام البيانات الأولية (عادةً ما يكون 14.6 كيلوبايت مضغوط)، سيتطلب ذلك عمليات النقل ذهابًا وإيابًا إضافية بين الخادم ومتصفّح المستخدم. وبالنسبة إلى المستخدمين على الشبكات التي تحتاج إلى مهلات طويلة مثل شبكات الجوّال، قد يتسبب هذا في تأخر تحميل الصفحة.
اقتراحات
حتى يتم تحميل الصفحات بشكل أسرع، يمكنك تقييد حجم البيانات (ترميز HTML والصور وCSS وجافا سكريبت) المطلوبة لعرض محتوى الجزء العلوي من الصفحة.
وتتوفّر عدّة طرق لإجراء ذلك:
تهيئة HTML لتحميل محتوى الجزء العلوي من الصفحة المهم أولاً
يمكنك تحميل المحتوى الرئيسي من الصفحة أولاً؛ قم بتنظيم صفحتك بحيث ترسل الاستجابة الأولية من الخادم البيانات اللازمة لعرض الجزء المهم من الصفحة على الفور وتأجيل الباقي.
وقد يعني ذلك أنّه يجب تقسيم CSS إلى جزأين: جزء مضمّن مسؤول عن تنسيق الجزء ATF من المحتوى، والجزء الذي يمكن تأجيله.
يمكنك تجربة الأمثلة التالية لكيفية تهيئة الموقع على التحميل بشكل سريع:
إذا كان HTML يحمل أدوات جهات خارجية قبل تحميل المحتوى الأساسي، يمكنك تغيير الترتيب لتحميل المحتوى الأساسي أولاً.
إذا كان موقعك يستخدم تصميمًا ثنائي الأعمدة مع شريط جانبي للتنقل ومقالة، ولكن يتم في HTML تحميل الشريط الجانبي قبل المقالة، يمكنك تجربة تحميل المقالة أولاً.
تقليل مقدار البيانات المستخدمة بواسطة الموارد
بعد إعادة تصميم موقعك الإلكتروني للعمل بشكل جيد على عدة أجهزة وتحميل المحتوى المهم أولاً، يمكنك اتّباع الأساليب التالية لتقليل كمية البيانات المطلوبة لعرض صفحتك:
تقليل الموارد: يمكن تقليل موارد HTML وCSS وجافا سكريبت من خلال إزالة المسافات والتعليقات غير اللازمة. ويمكن إدخال مزيد من التحسينات من خلال استخدام الأدوات التي تعيد تسمية الأسماء المتغيرة في مواردك.
تاريخ التعديل الأخير: 2024-09-04 (حسب التوقيت العالمي المتفَّق عليه)
[null,null,["تاريخ التعديل الأخير: 2024-09-04 (حسب التوقيت العالمي المتفَّق عليه)"],[[["This PageSpeed Insights rule is triggered when additional network round trips are needed to render above-the-fold content."],["To optimize, prioritize loading critical above-the-fold content first by restructuring HTML and reducing resource sizes."],["Reduce data size by minifying resources, using CSS instead of images where possible, and enabling compression."],["This documentation refers to a deprecated version of PageSpeed Insights API; the latest version is 5."]]],["The core issue addressed is the delay in page loading caused by excessive data transfer required to render above-the-fold content. Key actions include structuring HTML to prioritize critical content, loading it first, and deferring non-essential parts. Recommendations involve reducing data size by minifying resources (HTML, CSS, JavaScript), using CSS instead of images when feasible, and enabling compression. The document advises optimizing content loading to avoid additional network round trips and improve page speed.\n"]]
