اجتياز كل اختبار CWV و PageSpeed ​​Insights باستخدام تقنيات تطوير WordPress هذه

في عام 2021 ، في StrategiQ ، وهي وكالة رقمية متكاملة مقرها المملكة المتحدة ، جعلناها هدفًا لنا للبدء في تطوير كل موقع ويب نطوره ونطلقه لاجتياز أداء Google Core Web Vitals (CWV) و PageSpeed ​​Insights (PSI) أبلغ عن.

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

يعد اختبار CWV الخاص بك سهلاً مثل الفطيرة - ما عليك سوى التوجه إلى https://pagespeed.web.dev/ وإدخال عنوانك. تعرض المنطقة العلوية أحدث بيانات العالم الحقيقي من آخر 28 يومًا ، بينما القسم السفلي (الدرجة من 100 ، للجوال وسطح المكتب على حدٍ سواء) ، عبارة عن بيانات تم إنشاؤها في المختبر.

لماذا هذا مهم؟ حسنًا ، لأن Google تقول ذلك.

في يوليو 2018 ، أعلنت Google أن السرعة عامل في كيفية ظهور الموقع في نتائج البحث ، وخاصة على الهاتف المحمول. مصدر.

في عام 2020 ، أعلنوا أيضًا أن مقاييس تجربة المستخدم (التي تشكل Core Web Vitals / CVW) تُستخدم الآن في كيفية تصنيف المواقع. مصدر.

الأمر بسيط: فكلما كان الموقع أسرع وأفضل أداءً ، كان من المرجح أن يحصل على ترتيب أفضل.

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

الجدير بالذكر ، هو أن CWV و PSI معروفان بصعوبة المرور. الغالبية العظمى من المواقع لا تفعل ذلك ، حتى العديد من أكثر المواقع شهرة في العالم . فكر في YouTube و BBC وحتى WP Engine أنفسهم يكافحون للحصول على تصريح على كل من الأجهزة المحمولة وسطح المكتب ( آسف يا شباب ).

إذن ما الذي فعلناه للتأكد من أننا رأينا تلك الكعك الأخضر اللذيذ اللذيذ؟

لقد جردنا كل شيء وعملنا على تعويذة واحدة بسيطة:

تحميل أقل قدر ممكن ، في أسرع وقت ممكن.

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

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

مع وجود خادم عالي الأداء في جوهره ، نعلم أن الأمر متروك لنا الآن لجعل موقع الويب يعمل بأسرع ما يمكن.

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

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

أعرف ما تفكر فيه - احصل على الأشياء الجيدة!

لن أزعج نفسي بإدراج الأشياء المملة المعتادة التي تراها في كل مشاركة مدونة هناك ، مثل "صور التحميل البطيء". ولكن إذا لم تقم بذلك ، فهذا أمر لا بد منه بالفعل - لدينا وظيفة للصور تطبع صورنا محملة بعلامات srcset والأحجام (المعروفة باسم الصور المتجاوبة).

دعنا ندخله مباشرة.

الطريقة 1: القطعة والقائمة

يحدث هذا كثيرًا: يحتوي المشروع على ملف css واحد وملف js واحد ، وينتهي بهم الأمر بالانتفاخ إلى حجم كوكب صغير. ماذا بعد؟ يسألك Google "لماذا يتم تحميل الأنماط وعدم استخدام جافا سكريبت في هذه الصفحة؟". لماذا ا؟ لماذا؟!

إنها نقطة صحيحة. لماذا يجب عليك تحميل كتل من css وجافا سكريبت لموقع ويب بأكمله عندما لا تحتاج إلا إلى جزء صغير من ذلك في كل صفحة؟

تم بناء جميع مواقعنا بالكامل باستخدام كتل Gutenberg. هذا يعني أنه بالنسبة لكل كتلة ، يمكنك الاستفادة من القوة الرائعة لتجميع ملفات css و js.

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

النتائج؟ نقوم فقط بتحميل ما هو موجود بالفعل في كل صفحة.

الطريقة الثانية: استخدم عداء المهام مثل gulp لدمج الأصول وتقليلها

يتم تصغير جميع الأصول التي تم إنشاؤها بواسطة وظيفة البلع (يتوفر البعض الآخر ، مثل grunt). تجدر الإشارة إلى أنه منذ عدة أقمار ، كانت Google تفضل التسلسل إلى التصغير (كان من الممكن أن يكون طلب كبير واحد أفضل من 5 طلبات صغيرة) ، ولكن منذ ظهور HTTP / 2 (الذي يضاعف طلبات متعددة في وقت واحد) لم يعد هذا أمرًا مشكلة.

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

الطريقة الثالثة: إيقاف عرض الأصول المحظورة

نتأكد من أن جميع هذه الأصول المدرجة في قائمة الانتظار في أسفل الصفحة ، وبالتالي لا تعرض الحظر.

حتى أننا قمنا بإلغاء ترتيب jQuery الذي يأتي مع WordPress وقمنا بإدراج إصدار جديد (إصدار لا يحتوي على ثغرات أمنية) ، أيضًا في أسفل الصفحة.

ولكن ماذا عن FOUC (وميض محتوى غير منظم) أسمعك تقوله؟

الطريقة 4: فوق طي css

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

لإصلاح ذلك ، قمنا بتقسيم أنماط الطية أعلاه وإضافتها كعلامة <style> مضمنة في الرأس. إنه ليس أصلًا يحظر العرض ، ولا نحصل على FOUC.

الطريقة الخامسة: WP Rocket

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

النتائج؟

حسنًا ، النتائج تتحدث عن نفسها.

SportsAidEastern هي مؤسسة خيرية تدعم الرياضيين البريطانيين. وفقًا لـ PSI ، فإن الموقع الذي طورناه لهم سجل 97/100 على الهاتف المحمول و 100/100 على سطح المكتب.

تقدم Calligo خدمات بيانات تحويلية ، ونتائج مواقعها أفضل حتى من SportsAid ؛ يأتي في أقرب 99/100 على الهاتف المحمول و 100/100 على سطح المكتب.

خاتمة

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

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