استخدام Lighthouse لتحسين أداء تحميل الصفحات

Lighthouse هي أداة مبرمَجة لتحسين جودة موقعك الإلكتروني. ما عليك سوى اختيار عنوان URL، وتقديم قائمة بالاقتراحات حول كيفية تحسين أداء الصفحات، وتسهيل الوصول إلى الصفحات، والالتزام بأفضل الممارسات، وغير ذلك. يمكنك تشغيلها من داخل "أدوات مطوري البرامج في Chrome" كإضافة في Chrome أو حتى كوحدة عقدة، وهي مفيدة للتكامل المستمر.

منذ فترة من الوقت، قدَّمت أداة Lighthouse العديد من النصائح لتحسين أداء تحميل الصفحات، مثل تفعيل ضغط النص أو تقليل النصوص البرمجية التي تحظر العرض. يواصل فريق Lighthouse إرسال عمليات تدقيق جديدة لمنحك المزيد من النصائح المفيدة لزيادة سرعة مواقعك على الويب. تقدم هذه المشاركة ملخصًا لعمليات تدقيق الأداء المفيدة التي قد لا تكون على دراية بها، مثل:

• تحليل سلسلة الإجراءات الأساسية
• التحميل المُسبق لطلبات المفاتيح
• وقت تشغيل JavaScript مرتفع
• تجنُّب عمليات إعادة توجيه الصفحة
• محتوى JavaScript غير مستخدَم
• استخدام سياسة ذاكرة التخزين المؤقت غير الفعّالة في مواد العرض الثابتة
• تجنّب الرحلات ذهابًا وإيابًا متعددة مكلفة إلى أي نقطة وصول
• استخدام تنسيقات الفيديو لمحتوى الرسوم المتحركة
• تظل جميع النصوص مرئية أثناء تحميل خط Webfont
• لغة CSS وJavaScript غير مصغّرة
• قواعد CSS غير المستخدَمة

تحليل عمل سلسلة التعليمات الرئيسية

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

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

التحميل المُسبق لطلبات المفاتيح

عندما تسترد المتصفحات الموارد، فهي تفعل ذلك عندما تجد مراجع لها داخل المستند وموارده الفرعية. وقد يكون هذا دون المستوى الأمثل في بعض الأحيان، لأنه يتم اكتشاف بعض الموارد المهمة في وقت متأخر إلى حد ما من عملية تحميل الصفحة. لحسن الحظ، تمنح rel=preload للمطوّرين إمكانية التلميح إلى المتصفّحات المتوافقة لتحديد الموارد التي يجب جلبها في أقرب وقت ممكن. إنّ عملية التدقيق الجديدة في طلبات التحميل المُسبق لطلبات المفاتيح تتيح للمطوّرين معرفة الموارد التي يمكن أن يستفيد منها التحميل في وقت أقرب بحلول rel=preload.

من المهم للغاية اختبار تغييرات الأداء ومقارنتها باستخدام rel=preload أو بدونه، لأنّ ذلك قد يؤثّر في أداء التحميل بطرق قد لا تتوقّعها. على سبيل المثال، قد يؤدي التحميل المُسبق لصورة كبيرة إلى تأخير العرض الأوّلي، ولكن المفاضلة هي أنّ الصورة التي تم تحميلها مسبقًا ستظهر في وقت أقرب في التنسيق. احرص دائمًا على أن تكون النتائج مفيدة لك.

وقت تشغيل JavaScript مرتفع

عند تحميل مقدار كبير من JavaScript، قد لا تستجيب الصفحة أثناء تحليل المتصفح وتجميعه وتنفيذه. تعتبر النصوص البرمجية والإعلانات التابعة لجهات خارجية مصدرًا محددًا لأنشطة النصوص البرمجية الزائدة التي يمكن أن تعطل حتى الأجهزة ذات الأداء العالي. يكشف التدقيق الجديد وقت تشغيل JavaScript مرتفع عن مقدار وقت وحدة المعالجة المركزية (CPU) الذي يستهلكه كل نص برمجي على صفحة، إلى جانب عنوان URL الخاص به:

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

تجنُّب عمليات إعادة توجيه الصفحة

في بعض الأحيان، عندما يطلب المتصفّح عنوان URL، يستطيع الخادم الاستجابة برمز حالة من المستوى 300. يؤدي ذلك إلى إعادة توجيه المتصفح إلى عنوان URL آخر. على الرغم من أنّ عمليات إعادة التوجيه ضرورية لتحسين محركات البحث ولأغراض الراحة، إلا أنّها تضيف وقت استجابة إلى الطلبات. ويكون هذا صحيحًا خاصةً إذا كانت تعيد التوجيه إلى مصادر أخرى، ما قد يؤدي إلى زيادة وقت البحث عن نظام أسماء النطاقات والاتصال/بروتوكول أمان طبقة النقل.

عمليات إعادة التوجيه غير مرغوب فيها للصفحات المقصودة على موقعك. لمساعدتك في تقليل وقت الاستجابة وتحسين أداء التحميل، توفِّر أداة Lighthouse الآن ميزة التدقيق عمليات إعادة توجيه الصفحات التي تتيح لك معرفة الوقت الذي تؤدّي فيه عملية التنقّل إلى تشغيل أي عمليات إعادة توجيه.

يُرجى العِلم أنّه من الصعب تفعيل عملية التدقيق هذه في إصدار "أدوات مطوري البرامج" من Lighthouse، لأنّها تحلل عنوان URL الحالي في شريط عناوين الصفحة، ما يعكس درجة دقة جميع عمليات إعادة التوجيه. من المرجح أن ترى هذا التدقيق ممتلئًا في واجهة سطر الأوامر للعقدة.

JavaScript غير مستخدم

يمكن أن تمثل التعليمات البرمجية غير الصالحة مشكلة خطيرة في التطبيقات التي تستخدم JavaScript. ورغم أنها لا تشكِّل تكاليف تنفيذ حيث لا يتم استدعاؤها مطلقًا، إلا أنها تحمل آثارًا أخرى غير مرغوب فيها. يظلّ بإمكانك تنزيل الرمز البرمجي المعطّل وتحليله وتجميعه من خلال المتصفّح. يؤثر ذلك في أداء التحميل ووقت تشغيل JavaScript. وعلى غرار لوحة التغطية في "أدوات مطوري البرامج"، يكشف تدقيق JavaScript غير المستخدَم عن لغة JavaScript التي تم تنزيلها من خلال الصفحة الحالية، ولكن لا يتم استخدامها أبدًا.

من خلال عملية التدقيق هذه، يمكنك تحديد الرموز غير الصالحة في تطبيقاتك وإزالتها لتحسين أداء التحميل والحدّ من استخدام موارد النظام. نصيحة احترافية: يمكنك أيضًا استخدام لوحة تغطية الرمز في "أدوات مطوري البرامج" من Chrome للعثور على هذه المعلومات.

استخدام سياسة ذاكرة التخزين المؤقت غير الفعّالة على مواد العرض الثابتة

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

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

تجنَّب رحلات ذهاب وعودة متعددة مكلفة إلى أي مكان

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

وعندما ينخفض وقت الاستجابة لمواد العرض من مصادر متعددة، سيلاحظ المستخدمون أنّ الأمور تسير بشكل أسرع قليلاً. من خلال تدقيق Lighthouse الجديد هذا، ستتعرّف على الفرص الجديدة لاستخدام rel=preconnect لإجراء ذلك.

استخدام تنسيقات الفيديو لمحتوى الرسوم المتحركة

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

إذا كان موقعك الإلكتروني يتضمّن أي ملفات GIF يزيد حجمها عن 100 كيلوبايت، ستعمل عملية التدقيق هذه تلقائيًا على الإبلاغ عنها وإرشادك إلى بعض الإرشادات حول كيفية تحويلها إلى فيديو وتضمينها. نجحت مواقع إلكترونية مثل Imgur في تحسين أداء التحميل بشكل كبير من خلال تحويل ملفات GIF إلى فيديو. بالإضافة إلى ذلك، إذا كان موقعك الإلكتروني يتّبع خطة استضافة ذات معدل نقل بيانات يفرض تكلفة استخدام، سيكون مقدار التوفير المحتمل في التكلفة كافيًا لإقناعك بذلك.

بقاء كل النص مرئيًا أثناء عمليات تحميل خطوط الويب

عندما نقوم بتحميل خطوط الويب للصفحات، تعرض المتصفحات غالبًا نصًا غير مرئي إلى أن يتم تحميل الخط. قد تكون هذه الظاهرة، التي تُعرف باسم فلاش النص غير المرئي (FOIT)، مفضّلةً لديك من منظور التصميم، ولكنّها في الواقع مشكلة. ولا يمكن قراءة النص الذي تم حظر عرضه إلا بعد أن يتم عرضه ويصبح مرئيًا. في حال كان وقت الاستجابة السريع و/أو في الاتصالات ذات النطاق الترددي العالي، يعني هذا عدم توفّر جزء أساسي من تجربة المستخدم. ويمكن أن تكون هذه المشكلة أيضًا من ضمن المشاكل الإدراكية في الأداء، لأنّ الصفحة لا تعرض محتوًى مفيدًا في أسرع وقت ممكن. لحسن الحظ، يساعدك تدقيق جميع النصوص المتبقية أثناء عمليات تحميل خطوط الويب في العثور على فرص لإصلاح هذه المشكلة على موقعك الإلكتروني.

إذا عثر Lighthouse على خطوط ويب في تطبيقك تؤخر عرض النص، هناك بعض الحلول المحتملة. يمكنك التحكّم في عرض النص باستخدام السمة font-display في CSS و/أو Font Upload API. إذا أردت التعمّق أكثر، يمكنك قراءة الدليل الشامل لاستراتيجيات تحميل الخطوط، وهو دليل ممتاز من تأليف زاك ليثرمان، وهو مرجع ممتاز لتحميل الخطوط بشكل مثالي.

CSS وJavaScript غير مصغّر

كان تقليل البيانات أسلوبًا مقترحًا منذ أن كان أداء الويب مهمًا، ولسبب وجيه. تقلّل بشكل كبير من حجم الموارد النصية، ما يُعدّ مفيدًا لأداء التحميل. ومع ذلك، من السهل تجاهل هذا التحسين، خاصة إذا لم تعتني عمليات الإنشاء به من أجلك. ستجمع عمليات التدقيق التي تستخدم Minify CSS وMinify JavaScript قائمة بالموارد غير المصغّرة التي يعثر عليها في الصفحة الحالية. يمكنك بعد ذلك اتّخاذ إجراء من خلال تصغير هذه الملفات يدويًا أو زيادة نظام التصميم لديك للقيام بذلك نيابةً عنك.

قواعد CSS غير المستخدَمة

نظرًا لأن الموقع يحتاج إلى وقت طويل جدًا، فلا مفر من أن يبدأ تراكم التكاليف المتبقية من عملية إعادة الهيكلة. يأتي أحد هذه المصادر في شكل قواعد CSS غير مستخدَمة لم تعُد ضرورية ليعمل الموقع الإلكتروني، ومع ذلك لا تزال يستهلك معدّل نقل البيانات. للتيسير عليك، يكشف تدقيق قواعد CSS غير المستخدمة عن موارد CSS التي تحتوي على CSS غير المستخدَمة.

إذا عثرت أداة Lighthouse على محتوى CSS على الصفحة، هناك طرق للتخلص منه. وتُعدّ UnCSS إحدى الأدوات المساعدة التي تنفّذ هذا الإجراء نيابةً عنك تلقائيًا (على الرغم من أنّه يجب استخدامها بحرص). وتنطوي طريقة يدوية أكثر على استخدام لوحة تغطية الرمز في "أدوات مطوري البرامج". تذكَّر فقط أنّ محتوى CSS غير المستخدَم على إحدى الصفحات قد يكون ضروريًا على صفحة أخرى. يمكنك أيضًا تقسيم CSS إلى ملفات خاصة بالنموذج لا يتم تحميلها إلا عند الضرورة. أيًا كان الإجراء الذي تقرّره، سيكون Lighthouse متاحًا لك لكي تعرف ما إذا كانت العناصر غير الضرورية من CSS ستحدث الكثير من التغييرات.

ندعوك لتجربة Lighthouse.

إذا كنت متحمسًا لإجراء عمليات التدقيق الجديدة هذه، يُرجى تحديث Lighthouse وتجربتها.

• من المفترض أن يتم تحديث إضافة Lighthouse في Chrome تلقائيًا، ولكن يمكنك تعديلها يدويًا من خلال chrome://extensions.
• في "أدوات مطوري البرامج"، يمكنك تشغيل Lighthouse في لوحة التدقيق. يتم تحديث Chrome إلى إصدار جديد كل 6 أسابيع تقريبًا، لذا قد لا تتوفر بعض عمليات التدقيق الجديدة. إذا كنت متحمسًا لاستخدام أحدث عمليات التدقيق المتاحة، يمكنك تشغيل أحدث رموز Chrome عن طريق تنزيل Chrome Canary.
• لمستخدمي العُقد: يمكنك تشغيل npm update lighthouse أو npm update lighthouse -g في حال تثبيت Lighthouse على مستوى العالم.

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