🌊 👲🏾 🙍🏾 نحن نسرع Google PageSpeed إلى 100 وأكثر 🛬 👉🏽 🤽🏾

نصائح بسيطة ومفيدة تتيح لك زيادة موقع الويب الخاص بك دون الحاجة إلى البحث في مقاييس Google PageSpeed و Lighthouse.

جافا سكريبت

بدلاً من JavaScript ، حاول استخدام علامات HTML5 في كثير من الأحيان: <إدخال نوع = تاريخ> ، <إدخال نوع = الوقت> ، تفاصيل / ملخص ، إلخ.

غالبًا ما ننسى أو لا نعرف حتى عن الحلول الجاهزة المضمنة في المتصفحات التي ستعمل بشكل أفضل على أجهزة مختلفة والتي لا تتطلب شفرة JavaScript إضافية.
استخدم تصغير رمز JavaScript.
حاول وضع كل شفرة JavaScript في التذييل أو التحميل المتأخر ، وكلما قلت JavaScript في <head> ، كان الأداء أفضل في Google PageSpeed.
يتطلب <script src = "file-path"> وصولًا إضافيًا إلى الخادم ، تذكر ذلك.

إذا بدلاً من ملف JavaScript ، أدخل محتويات الملف في تذييل الصفحة:
```
<script>   </script> 
```
بعد ذلك سيكون التنزيل الأول أسرع ، ولكن لن يكون هناك تخزين مؤقت لملف JavaScript.

تأخر التحميل

استخدم التحميل البطيء (المتأخر) للصور ، iframe ، الفيديو ، الصوت ، javascript وغيرها من الكائنات المشابهة. يجب تضمينه للعناصر الموجودة في النوافذ المنبثقة أو على الشاشات الثانية والتالية على الصفحة.
لهذه الأغراض ، هناك العديد من المكتبات: lazyload ، lazysizes ، التحميل التلقائي ، إلخ.
يمكنك استخدام التحميل البطيء الأصلي في Chrome.
تقدم VK وضع اتصال شفرة JavaScript في <head> لكي تعمل أداة تعليقاتهم ، ولكن هذا يقلل سرعة Google PageSpeed وتحميل الصفحة.

بدلاً من التعليمات البرمجية التي يقدمها VK:
```
  <script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script>  <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script> 
```
الصق الشفرة المعدلة قليلاً تحت التنزيل المؤجل:
```
 <div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script> 
```
نتيجة لذلك ، نحصل على رمز سيتم تحميله فقط عندما يتم تمرير الشاشة إلى عنصر واجهة المستخدم.

رمز الخريطة الذي تقدمه Google لتضمينه على الموقع:
```
 <iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe> 
```
إذا كانت البطاقة في وضع منبثق أو بعيد في تذييل الصفحة ، عندها سيبدأ الشخص الذي يزور صفحتك على الفور في تحميل الكثير من هذا الإطار وستكون سرعة تنزيل هذه الصفحة بطيئة جدًا ، وسيمنحك Google PageSpeed علامة ناقص وواحدة كبيرة!

الصق الشفرة المعدلة قليلاً تحت التنزيل المؤجل:
```
 <iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe> 
```
كل هذا يرجع إلى عدم إعطاء المتصفح src = "" على الفور ، ولكن فقط عندما يحتاج شخص ما إلى ذلك بالفعل. وهكذا مع كل الأشياء!

مسج

إذا كان ذلك ممكنًا ، فلا تستخدم Jquery في مشاريعك وسيؤدي ذلك إلى زيادة كبيرة في سرعة موقعك ، ولكن إذا كنت تستخدمه بالفعل ، فاستبدله تدريجياً بـ JavaScript أصلي أصلي.
إذا قمت بتوصيل Jquery بـ <head> ، فسيؤدي ذلك إلى حظر عرض الصفحة ، نظرًا لأن المتصفح ينتظر حتى يتم تحميل كل ما هو في <head> ، ثم يعرض الصفحة فقط. ولكن نظرًا لأن المكتبة نفسها صغيرة ، والإنترنت سريع للجميع ، فإن هذا له تأثير ضئيل على السرعة ، فإذا قامت Google بتخفيض التصنيف ، فستكون 0.5 ، على الرغم من أنه قبل 10 أو 20 نقطة ، تم تصويره لذلك ...
يتم وضع كل رمز jquery الذي كتبته أو مكتبات jquery التي تستخدمها بشكل أفضل في تذييل الموقع بسبب حظر العرض. إذا لم تتمكن من نقلها إلى تذييل الصفحة ، فربما يجب عليك استخدام تنفيذ التعليمات البرمجية المؤجلة ، مقالة حول هذا الموضوع: استخدام بأمان. (() قبل تضمين jQuery .

الخطوط

خطوط جوجل
1. إذا كانت Google تقوم بتوصيل الخط لفترة طويلة ، فتأكد من توصيله مرة أخرى ، نظرًا لأن وجود & display = المبادلة في عنوان URL مهم - وهذا خيار جديد يؤثر على Google PageSpeed ويسمح لك بعرض النص على الصفحة قبل تحميل الخط ... ليس جميلًا دائمًا ، لكنه يزيد سرعة عرض الموقع ... ويؤثر على Google PageSpeed
2. إذا كان من الممكن استبدال خطوط Google بخطوطك الخاصة ، ثم القيام بها ، فمن الأفضل أن تكون الخطوط موجودة على الخادم الخاص بك ، وهذا يزيد السرعة أيضًا.
3. عند اختيار خط على Google Fonts ، حاول اختيار الحد الأدنى من الخيارات ، واختر فقط ما تحتاجه ، وإذا كنت لا تستخدم خطًا مائلًا أو سماكة 200 على الموقع ، فلا تحدد هذا في الإعدادات ، لأن هذا سيؤثر على سرعة التنزيل.
الخطوط المخصصة
1. تحقق من وجود css style font-display: swap؛ في الخطوط الخاصة بك ، يولي Google PageSpeed الانتباه إلى هذا ، ويقلل من أهمية ما إذا كان هذا النمط لا يستحق ذلك:
```
 @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } 
```
2. إذا قمت بتوصيل الخطوط من خلال ورقة أنماط منفصلة ، فهذا يؤثر على وقت العرض الأول ويقلل من أداء Google PageSpeed ، فمن الأفضل عدم القيام بذلك:
```
 <link href="/fonts.css" rel="stylesheet"> 
```
  إذا أدخلت اتصال خط في <head> عبر علامة <style> ، وليس من خلال <link> ، فسيؤدي ذلك إلى تحسين سرعة وأداء Google PageSpeed ، نظرًا لأن المتصفح لن يحتاج إلى الوصول إلى ورقة أنماطك بشكل منفصل:
```
 <head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head> 
```
3. إذا أمكن ، فقم بإزالة جميع الأشياء غير الضرورية التي لا تستخدمها من ملفات الخطوط لزيادة سرعة التنزيل.
4. يمكنك القيام بتحميل الخط على خطوتين: تطوير استراتيجية تحميل خط قوي لـ CSS-Tricks

CSS

حاول التخلص من شفرة CSS الزائدة للمتصفحات القديمة ، بما في ذلك البادئات -moz- -o-ms- -webkit-
حاول عدم تحميل الأنماط غير المستخدمة في هذه الصفحة ، ولكن يتم استخدامها على صفحات أخرى من الموقع.
إذا كان ذلك ممكنًا ، فإنه يستحق تحميل أجزاء من CSS و HTML code من خلال التحميل المتأخر.
لتحميل الأنماط باستخدام <link href = 'st.css' rel = 'stylesheet'> يؤدي إلى إبطاء عملية تحميل الصفحة الأولى وعرضها ، ولكن يتيح للمتصفح تخزين هذا الملف مؤقتًا.

إذا كان لديك أنماط فريدة لكل صفحة أو أكثر أهمية بالنسبة لك أن يتم تحميل الصفحة الأولى بشكل أسرع قليلاً ، فسنقوم بإدراج علامة النمط بدلاً من الملف:
```
 <style>   </style> 
```
استخدم تصغير CSS ، مثل Cssresizer أو أدوات أخرى مماثلة.

HTML

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

صورة

استخدم العلامة <picture> لاستخدام تنسيقات الصور الحديثة (JPEG 2000 و JPEG XR و WebP). يولي Google PageSpeed الانتباه إلى هذا إذا لم يكن لديك تحميل كسول للصور.
```
 <picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt=""> </picture> 
```
يمكنك أيضًا استخدام الوسائط واستبدال الصور المختلفة بدقة مختلفة وكثافة بكسل مختلفة.
```
 <source media="(max-width: 640px)" srcset="image.png, image-retina.png 2x"> 
```
هذا مفيد لكل من الصور والفيديو.

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

إعدادات الخادم

قم بتمكين التخزين المؤقت للملفات الثابتة (الخطوط ، البرامج النصية ، الصور ، css وما إلى ذلك) ، أثناء تعيين سنة التخزين المؤقت ، وإلا أقسم Google.
تمكين ضغط gzip.
استخدم رؤوس HTTP Last-Modified و If-Modified-Since لتخزين الصفحات في ذاكرة التخزين المؤقت.

صلة

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

استنتاج

من المستحيل ضغط PageSpeed 108 أو أكثر من النقاط :)

من غير المجدي الضغط حتى على 100 نقطة تحت الهاتف المحمول. يجب أن نسعى جاهدين من أجل 100 ، وألا نقع في جنون العظمة! هذا مجرد واحد من العديد من المؤشرات المهمة للموقع.

يمكنك الاطلاع على مثال لصفحة حيث تكون مؤشرات الهواتف المحمولة 97-98 و 100 للكمبيوتر.

يوجد في هذه الصفحة مقطعان من مقاطع فيديو YouTube في النوافذ المنبثقة ويتم تنشيط الفيديو فقط عند فتح النافذة المنبثقة.

يتم وضع جميع الصور في التحميل كسول.

يتم تقديم جميع JavaScript من <head> في تذييل الصفحة.

ولكن في الوقت نفسه ، يتم ربط ما يلي بـ <head>: عدادات Jquery و GoogleFonts و Yandex (Google).

يتم إدراج الأنماط في علامة <style> الخاصة برموز الأنماط </ style>.

<الصورة> غير مستخدمة في هذه الصفحة.

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

شكرا لاهتمامكم!

نحن نسرع ​​Google PageSpeed ​​إلى 100 وأكثر

More articles:

نحن نسرع Google PageSpeed إلى 100 وأكثر