اخبار علمية

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها

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

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

من بين أدوات Google المذكورة أعلاه ، من المحتمل أن يكون Google Search Console هو أفضل أداة يمكن استخدامها . هناك ، يمكنك الانتقال إلى Experience> Core Web Vitals والاطلاع على التقرير لجميع صفحاتك مرة واحدة:

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
تقرير “أساسيات الويب الحيوية” في Google Search Console

تحت التقرير ، توجد قائمة بجميع المقاييس الفاشلة:

اقرا ايضا : كيف تؤثر صيغة الصور على أداء موقعك

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
مشكلات “حيوية الويب الأساسية” في Google Search Console

ومن هناك يمكنك متابعة عملية البحث للعثور على المشكلات المحددة داخل كل مقياس ، ثم الصفحات المتأثرة بالمشكلة ، وبعد بضع نقرات ستنتهي في تقرير PageSpeed ​​Insights لصفحة معينة. لذلك ، على الرغم من تقديم تقرير المستوى الأعلى بكميات كبيرة ، إلا أن تحديد الصفحات التي تتأثر بالمشكلات التي قد تكون عملية مرهقة.

يمكن القول إن أفضل طريقة لقياس سرعة الصفحة هي استخدام WebSite Auditor . هناك يمكنك الانتقال إلى Site Structure> Site Audit والحصول على تقرير سرعة الصفحة المجمعة لموقعك بالكامل بالإضافة إلى عرض جميع الصفحات المتأثرة – كل ذلك من لوحة معلومات واحدة:

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
تقرير “أساسيات الويب الحيوية” في WebSite Auditor

أو يمكنك التبديل إلى Site Audit> Pages> Page Speed ​​وعرض قائمة بالصفحات معاكسة لمشكلات السرعة التي تؤثر عليها. انقر فوق أي صفحة وستحصل أيضًا على قائمة بعناصر الصفحة التي يمكن تحسينها للحصول على أداء أفضل:

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
تقرير “أساسيات الويب الحيوية” في WebSite Auditor

بشكل عام ، أجد WebSite Auditor أكثر ملاءمة للقيام بالعمل الفعلي لتحسين صفحاتك ، في حين أن Google Search Console هي أكثر من أداة لإعداد التقارير.

اقرا المزيد : شات جي بي تي الذكاء الاصطناعي

كيف تحسن سرعة الصفحة على موقع الويب الخاص بك؟

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

1. ضبط أبعاد الصورة

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

لتجنب هذه المشكلة ، قم دائمًا بتعيين خصائص العرض والارتفاع لصورك ، مثل:

<img src = “pillow.jpg” width = “640” height = “360” alt = “وسادة أرجوانية بنمط زهرة” />

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

2. خدمة الصور بتنسيقات الجيل التالي

لم يتم إنشاء جميع تنسيقات الصور على قدم المساواة. تتمتع تنسيقات JPEG و PNG الموثوق بها الآن بخصائص ضغط وجودة أسوأ بكثير مقارنة بتنسيقات AVIF و JPEG 2000 و JPEG XR و WebP.

من بين هذه التنسيقات المدرجة ، ربما يكون WebP هو التنسيق الذي يجب مراعاته أولاً. وهو يدعم كلا من الضغط مع فقدان البيانات وضياعها ، كما يسمح بالشفافية والرسوم المتحركة. علاوة على ذلك ، تكون ملفات WebP عمومًا أخف بنسبة 25٪ إلى 35٪ من ملفات PNG و JPEG ذات الجودة المماثلة . وعلى الرغم من أنه كان من دواعي القلق في الماضي أن تنسيق WebP غير مدعوم من قبل بعض المتصفحات ، فقد أضاف Safari مؤخرًا دعم WebP في الإصدار 14 ، وبالتالي فإن الدعم الكلي للتنسيق بين المتصفحات الآن يزيد عن 90٪.

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

3. ضغط الصور

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

فقط لإعطائك فكرة عن مقدار ما يمكنك توفيره ، قمت بإجراء اختبار سريع على مجموعة عشوائية من الصور من مجلد التنزيل الخاص بي:

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
نتائج ضغط الصور من TinyPNG

باستخدام ضاغط عبر الإنترنت ، قمت بحفظ ما بين 30٪ و 75٪ لكل صورة و 68٪ إجمالاً (الصور الأثقل تسحب وزناً أكبر وتشوه النسبة المئوية).

اقرا المزيد : اطلاق الذكاء الاصطناعي شات جي بي تي4

4. تأجيل الصور خارج الشاشة

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

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
في الجزء المرئي من الصفحة مقابل الجزء السفلي غير المرئي من الصفحة

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

5. تحويل صور متحركة إلى فيديو

قد يبدو الأمر غير منطقي ، ولكن غالبًا ما يكون للصور المتحركة حجم ملف أكبر من مقاطع الفيديو. لا معنى لذلك ، لا أعرف كيف أصبح الأمر ، لكن تحويل صورة gif كبيرة إلى مقطع فيديو سيؤدي إلى تقليل الحجم بنسبة تصل إلى 500٪ أو أكثر. لذلك ، إذا أخبرك تقرير سرعة صفحتك  باستخدام تنسيقات الفيديو لمحتوى متحرك ،  فقد تأخذ الأمر على محمل الجد.

لتحويل صور gif إلى مقاطع فيديو ، يمكنك استخدام أي محول عبر الإنترنت أو تنزيل أداة مثل FFmpeg . توصي Google بالفعل بإنشاء تنسيقين للفيديو: WebM و mp4. يشبه WebM WebP من حيث أنه أخف وزنا ، ولكنه غير مدعوم من قبل جميع المتصفحات. لذلك ، عند إضافة مقطع الفيديو الخاص بك إلى الصفحة ، يجب عليك إدراج إصدار WebM أولاً ثم إصدار mp4 كنسخة احتياطية:

<
source src = “animation.webm” type = “video / webm”>
<source src = “animation.mp4” type = “video / mp4”>
</video>

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

6. تأجيل CSS غير المستخدمة

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

الهدف هنا هو تحديد أجزاء CSS غير المستخدمة أو غير الحرجة وإما إزالتها تمامًا أو تغيير الترتيب الذي يتم تحميلها به. يرجى الرجوع إلى هذا الدليل حول تأجيل CSS غير المستخدمة .

7. تصغير JS و CSS

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

إذا كان لديك موقع ويب صغير ، فيمكنك تصغير الكود باستخدام المصغرات عبر الإنترنت ، مثل CSS Minifier و JavaScript Minifier و HTML Compressor . أو ، إذا كان موقع الويب الخاص بك مبنيًا على نظام أساسي CMS ، مثل WordPress ، فهناك بالتأكيد بعض المكونات الإضافية التي يمكنها القيام بالعمل نيابة عنك. للحصول على موقع ويب مخصص ، يرجى الرجوع إلى هذا الدليل حول تصغير CSS وهذا الدليل على تصغير JS .

8. استخراج CSS الحرجة

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

اقرا ايضا : كيفية فتح المواقع المحجوبة بدون برامج 2023

لحل هذه المشكلة ، يمكنك فقط استخراج تلك الأنماط المطلوبة لمنطقة الجزء المرئي من الصفحة الخاصة بك وإضافتها إلى <head> لمستند HTML الخاص بك. يمكن تحميل بقية ملفات CSS الخاصة بك بشكل غير متزامن. سيؤدي ذلك إلى تحسين نتائج LCP الخاصة بك بشكل كبير وجعل صفحاتك تظهر بشكل أسرع للمستخدمين.

راجع هذا الدليل حول استخراج CSS الهامة لمزيد من التفاصيل.

9. تحسين وقت استجابة الخادم

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

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

10. تأجيل / غير متزامن JS لجهة خارجية

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

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

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
سمات عدم التزامن مقابل سمات التأجيل

11. الاتصال المسبق بموارد الطرف الثالث

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

لربط موقع الويب الخاص بك مسبقًا بمصدر خارجي ، ما عليك سوى إضافة علامة ارتباط إلى صفحتك:

<link rel = “preconnect” href = “https://example.com”>

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

12. تقسيم المهام الطويلة

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

يمكنك استخدام Chrome DevTools لتحديد المهام الطويلة جدًا – وهي المهام المميزة بعلامات حمراء:

ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
ما هي سرعة الصفحة؟ و ما هي المقاييس التي تدخل فيها
المهام الطويلة في Chrome DevTools

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

شاهد ايضا : أنواع تحسين محركات البحث

13. تحميل الموارد الرئيسية

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

بمساعدة العلامة <link rel = “preload”> ، يمكنك إبلاغ المتصفح بأن هناك حاجة إلى مورد كجزء من الكود المسؤول عن عرض محتوى الجزء المرئي من الصفحة ، وجعله يجلب المورد في أقرب وقت ممكن.

فيما يلي مثال على كيفية استخدام العلامة:

<link rel = “preload” as = “script” href = “script.js” />
<link rel = “preload” as = “style” href = “style.css” />
<link rel = “preload” كـ = “image” href = “img.png” />
<link rel = “preload” as = “video” href = “vid.webm” type = “video / webm” /> <
link rel = “preload” href = “font.woff2” as = “font” type = “font / woff2” crossorigin />

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

14. تمكين التخزين المؤقت في المتصفح

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

عادةً ما يكون الهدف هو تخزين أكبر عدد ممكن من موارد الصفحة مؤقتًا لأطول فترة ممكنة والتأكد من إعادة التحقق من الموارد المحدثة للتخزين المؤقت. يمكنك بالفعل التحكم في كل هذه المعلمات باستخدام رؤوس HTTP خاصة تحتوي على تعليمات التخزين المؤقت. يعد هذا الدليل من Google مكانًا جيدًا لبدء التعرف على ذاكرة التخزين المؤقت لـ HTTP .

15. تقليل حجم DOM

يمكن لشجرة DOM كبيرة جدًا بقواعد نمط معقدة أن تؤثر سلبًا على أشياء مثل السرعة ووقت التشغيل وأداء الذاكرة. أفضل ممارسة هي أن يكون لديك شجرة DOM ، والتي يقل إجماليها عن 1500 عقدة ، وبها أقصى عمق 32 عقدة ولا توجد عقدة رئيسية بها أكثر من 60 عقدة فرعية.

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

16. تجنب الكثير من عمليات إعادة التوجيه

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

اقرا ايضا : تعرف على أهم الإضافات التي لا غنى عنها لأي موقع ووردبريس

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

شاهد ايضا : 6 مواقع لمتابعة احصائيات و زوار موقعك بدقة

افكار اخيرة

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

المصدر: من هنا 

iraqkhair

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

مقالات ذات صلة

زر الذهاب إلى الأعلى
Verified by MonsterInsights