تحسين موقع الويب لـ GooglePage Speed ​​(تؤخذ جميع الميزات في الاعتبار بعد التحديث) ، الجزء 1

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

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

سأذكر ما سأتحدث عنه في هذا المقال:

1. CSS و JS
   
   • اتصال الملف
   • تحميل المكتبات
   • الحيل
   
   
2. الخطوط
   
   • اتصال الخط
   • عرض الخطوط أثناء تحميل الصفحة
   
   
3. الصور
   
   • صيغ مختلفة (jpg ، png ، webp ، base64)
   • العفريت

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

CSS و JS

شبيبة

1. ستكون خاصية المزامنة للبرامج النصية الإضافية (باستثناء jQuery) مطلوبة. هذا سيوفر لك بالتأكيد من تعليق GPSpeed ​​حول تحميل البرنامج النصي غير المتزامن.
2. النصيحة شائعة ، لكنها معقولة للغاية - حاول استخدام مكتبات معقدة وكبيرة إلى الحد الأدنى.
3. من الأفضل تحميل إعدادات مكتبة js الخاصة بك (بقعة ، fancybox) أو أجزاء صغيرة من التعليمات البرمجية التي تؤدي مهام مختلفة إلى الخادم بملف واحد. في حالتي ، يكون كل من البرنامج النصي لإرسال البريد وقناع الإدخال والرسوم المتحركة وكل شيء في نفس ملف build.js (الذي قمت بتعيينه أيضًا غير متزامن) .
4. هذه النصيحة الظرفية ، أي أن ننظر إلى الوضع. إذا كان لديك نوع ما من البرامج النصية تعمل مباشرة بعد فتح الصفحة على شاشتها الأولى ، فسيكون من الأصح توصيلها بشكل منفصل وعدم إعطائها مزامنة

CSS

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

   <link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css> 

   
   في هذا النموذج ، سيتم توصيل ملفات css الخاصة بك فقط بعد شجرة DOM. تحدث تقريبًا ، هذا هو نفس التزامن .css فقط
2. نصيحة مهمة وفعالة للغاية! ويضيف 5-10 نقاط مضمونة. تحتاج إلى تقسيم main.css إلى ملفين . في البداية ، سيكون هناك فقط تلك الأنماط التي يتم تحميلها للمحتوى المرئي فور فتح الصفحة. هذا هو الشريط العلوي ، الرأس ، الصورة الأولى ، النموذج الأول ، إلخ. بشكل عام ، ما تضعه على "وجه" موقعك. في الثانية ، كل شيء آخر هو بالفعل.

الخطوط

لقد اكتشفت خاصية css جديدة للخطوط

 font-display 

على وجه التحديد ، فإن معلمة التبادل الخاصة بها ، والتي ، دون انتظار تحميل الخط الجميل والثقيل ، تعرض النص في المستعرض باستخدام الخط المضمن في المستعرض نفسه (على سبيل المثال ، sans-serif). هذا يزيل على الفور واحدة من الأخطاء في GPSpeed.

سيبدو مثل هذا

  @font-face { font-family: 'FontName'; src: local('FontName'), url('FontName.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; } 

يوجد أيضًا مثل هذا البرنامج النصي (تحتاج إلى توصيل fontfaceobserver.js لتشغيله):

 <script> var html = document.documentElement; if (sessionStorage.fontsLoaded) { html.classList.add("fonts-loaded"); } else { var script = document.createElement("script"); script.src = "../js/fontfaceobserver.js"; script.async = true; script.onload = function() { var regular = new FontFaceObserver("FontName"); var bold = new FontFaceObserver("FontName", { weight: "bold" }); var light = new FontFaceObserver("FontName", { weight: "300" }); Promise.all([ regular.load(), bold.load(), light.load() ]).then(function() { html.classList.add("fonts-loaded"); sessionStorage.fontsLoaded = true; }); }; document.head.appendChild(script); } </script> 

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

اتصال الخط

1. في الأساس ، هناك نوعان من الاتصال - استخدام رابط (على سبيل المثال ، لخطوط google ، أو محليًا ، على الخادم ، لذلك ، فيما يتعلق بالطريقة الثانية ، يمكن أيضًا تقسيمها إلى 2: ملف css منفصل (باستخدام رابط نقوم بتوصيل fonts.css ) ومباشرة من خلال الرمز (من خلال style.css الخاص بك).
   وبما أننا نتحدث الآن عن تحسين موقع GPSpeed ​​، فقد تأكدت من أنه من الأفضل توصيل الخطوط من خلال ملف css الرئيسي.
2. وهناك نصيحة أخرى تساعد على وضع ملفات الخطوط (woff ، ttf ، إلخ) بجوار ملف css الذي يطلبها. اعتدت أن يكون لدي مجلد منفصل على الخادم للخطوط ، ولكن بعد ذلك قمت بنقل سرعة تنزيل الخط بمقدار 2 مرات. (وفقًا لنظام GPSpeed ​​، استغرق الأمر 180 مللي ثانية لتوصيل خط Muller من قبل ، الآن 70-90ms)

الصور ، الصور ، الخ

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

1. قم بتنزيل جميع الصور <img > تمامًا باستخدام التحميل الكسول. سيبدو مثل هذا

 <img class="yourClass lazy" data-src="../images/image.jpg" alt=""/> 

ولا تنسَ الاتصال بـ lazyload.min.js

2. إذا كان لديك العديد من عناصر sv g على الصفحة ، فمن الأفضل إضافتها برمز نظيف ، دون استخدام لا لزوم له لعلامة img. بالإضافة إلى ذلك ، يجب ضغط svg ، على سبيل المثال ، باستخدام هذا الموقع jakearchibald.imtqy.com/svgomg (وليس الإعلان).

3. مبتذلة ، ولكن لا تنسى أن تضغط كل الصور على الموقع. حتى تلك التي تزن 5 كيلو بايت. على الرغم من أن 3 كيلوبايت التي تفوز بها لن تؤثر على سرعة التنزيل بأي شكل من الأشكال ، إلا أنك ستتخلص من الخطأ في GPSpeed ​​، وتضيف ما يصل إلى 10 نقاط.

! الآن المشكلة هي تنسيقات الصور. وهي ، نحن قلقون بشأن webp و JPEG 2000 و JPEG XR . في الواقع ، الآن هو واحد من ملحقات GPSpeed ​​الموصى بها. كما تعلمون ، لا تزال غير مدعومة من قبل بعض المتصفحات ، من بينها Mozila Firefox الرائجة. على الرغم من إعلانهم أنه سيكون هناك دعم كامل لهذا التنسيق في شهر مارس ، إلا أنه لا يزال يتعين علينا الانتظار لمدة عام حتى يتم تحديث جميع مستخدمي هذا المتصفح إلى أحدث إصدار ... لقد بحثت في مجموعة من المواقع ، مجموعة من البرامج النصية ، لكنني لم أجد أي شيء معقول. والآن حان الوقت لطرح سؤال عليك: هل تستخدم تنسيق ويب أو أي تنسيقات صور أخرى جديدة؟ وكيف يمكنك أن تفعل ذلك؟