الصفحة الرئيسية
- 28 فبراير 2018 أطلق أصدقاؤنا في WP Engine مؤخرًا صفحة رئيسية جديدة وجميلة تم إنشاؤها باستخدام Beaver Builder. لقد شاركنا رابطًا للصفحة في مجموعة Beaver Builders على Facebook ولاحظ عدد قليل من الأشخاص أن وقت التحميل الإجمالي للصفحة كان مرتفعًا جدًا. جاء صديقنا العزيز ومطور WordPress الاستثنائي، جون براون، إلى الإنقاذ بشرح رائع.
اسمحوا لي أن أعيد صياغة المحادثة هنا بسرعة كبيرة:
Concerned Beaver Builder: لقد أجريت اختبار تحميل الصفحة باستخدام أداة اختبار XYZ واستغرق التحميل 10 ثوانٍ تقريبًا!
جون: تعد السرعة والأداء خيارًا تصميميًا وهو أمر بالغ الأهمية لتحويلات المبيعات، لكن هذا لا يعني أنها ليست مقايضة مقابل أدوات أخرى ذات قيمة أكبر.
أرى أشخاصًا ينظرون إلى درجات الحروف وإجمالي وقت التحميل في كثير من الأحيان دون فهم الشلال. سيؤدي ذلك إلى ضلالك إلا إذا كنت تنظر إلى مواقع بسيطة جدًا ...
تعتبر درجات أدوات الاختبار هذه بدائية حقًا وتتجاهل الكثير من الحقائق العملية. سينصحونك بتجنب عمليات إعادة التوجيه عندما تكون مخصصة للإعلانات وتتبع البرامج النصية والأشياء الأخرى التي تعمل بالضرورة بهذه الطريقة. غالبًا ما يتجاهلون HTTP/2 ويوصون بتقليل الطلبات وتسلسل الأصول التي لا تهم وربما تكون ضارة... ولا يركزون على مؤشر السرعة والعرض في الجزء المرئي من الصفحة...
التحميل الحقيقي للصفحة هو <1.5 ثانية
سألت جون إذا كان يرغب في طرح بعض الأسئلة الإضافية حول موضوع الأداء وقد وافق بكل لطف. هذه هي أسئلتي (روبي) مع إجابات جون.
أوه، هل ذكرت أن جون يدير متجرًا مخصصًا للتطوير يُدعى 9seeds، لذا فهو متاح للتأجير لمساعدتك في تحسين أداء موقع الويب الخاص بك على WordPress!
هناك الكثير من الأدوات المتوفرة لتقييم أداء موقع الويب. العديد من هؤلاء يقدمون تقريرًا يتضمن درجة الحروف سهلة الفهم. تعتبر درجات الحروف هذه أدوات غير حادة إلى حد ما، وعلى الرغم من أنها لطيفة عندما تحصل على كل شيء، إلا أنها ليست ثاقبة بشكل خاص، ناهيك عن كونها مفيدة، عندما لا ترى "أ" بشكل مباشر. درجة الحروف الوحيدة التي أجدها مفيدة هي ضغط الصور، وهو حل سهل، قم بتشغيل صورك من خلال أداة تحسين.
في كثير من الأحيان أرى المطورين العاديين والمبتدئين يصابون بالعمى بسبب الحروف. هناك الكثير من العوامل التي تدخل في أداء الواجهة الأمامية للويب ويحتاج المرء حقًا إلى إلقاء نظرة على "الشلال" وهو مجرد رسم بياني يوضح جميع طلبات HTTP، عند بدئها وعند اكتمالها. أستخدم WebPageTest.org لإنشاء هذه.
"الشلال" هو المكان الذي "ترى فيه" الأصول المحددة التي تستغرق وقتًا طويلاً للتحميل و/أو التي تمنع تحميل الأشياء الأخرى.
أخيرًا، عليك أن تدرك أن الأمر المستقيم قد يتطلب اختيارات تصميمية (مثل إزالة أشرطة التمرير) وإزالة أصول الطرف الثالث (مثل Google Analytics وHotJar وما إلى ذلك) والتي تعتبر أكثر قيمة لمالك الموقع من الحصول على علامة A. لا يمكن إنشاء كل موقع استقيم كما لو كان بدون تضحيات مؤلمة.
أنا شخصياً لم أجد أي شيء أفضل وأكثر مرونة في القيام بذلك من WebPageTest.org. ومع ذلك، فقد استخدمت GTMetrix وPingdom وGoogle Page Speed وغيرها في الماضي أيضًا وهي جيدة. بعض التطبيقات الجديدة مثل Lighthouse رائعة حقًا لتطبيقات الويب التقدمية (وليس 99% من مواقع WordPress). أنا بالتأكيد لا أطلب من الأشخاص تبديل الأدوات، استخدم الأداة التي تعرفها وتفهمها. إذا كنت لا تعرف أي أداة، فإن WPT هي أداة مجانية رائعة يمكنك التعلم باستخدامها. ما عليك سوى تجاوز الدرجات الحرفية والبدء في فهم سبب هذه الدرجات الحرفية.
عندما كانت معظم المواقع تستخدم بروتوكول HTTP، بدلاً من HTTPS، وكانت خوادم الويب جميعها تستخدم بروتوكول HTTP/1.1، لم يكن بوسع خوادم الويب سوى إرسال الكثير من الأصول بالتوازي. تم إرسال كل أصل (صورة، نص، ورقة أنماط) بشكل منفصل وكان لكل منها نفقات عامة خاصة به مما أدى إلى إبطاء الأمور. أدى تسلسل كل شيء ممكن معًا إلى تقليل عدد طلبات HTTP وكان له فوائد هائلة في الأداء.
في العامين الماضيين، كان هناك توجه كبير نحو HTTPS في كل مكان، وبدأت خوادم الويب في دعم بروتوكول HTTP/2 الجديد. يتمتع HTTP/2 بفوائد هائلة مثل الجلب المسبق والتحميل المسبق، ولكن يمكنه أيضًا إرسال كل هذه الأصول الصغيرة بالتوازي، لذلك ليست هناك حاجة لتسلسلها. في الواقع، قد يكون من الأفضل عدم القيام بذلك حتى يمكن تخزين كل أصل صغير بشكل مؤقت بشكل مستقل.
من المهم أن تضع في اعتبارك أن هذا لا يتم تفعيله إلا إذا كان خادم الويب الخاص بك يدعم HTTP/2 وهذا ممكن فقط إذا كان موقعك يستخدم HTTPS.
ومع ذلك، فإن جميع المواقع التي نعمل عليها هذه الأيام هي HTTPS وتعمل على خوادم قادرة على HTTP/2، لذلك أنا في هذه المرحلة لم أعد أفكر في تسلسل الأصول بعد الآن، وبالتأكيد لا يفوتني ذلك!
والأمر الأكبر هو ببساطة أن كل موقع يمكن أن يصبح مستقيمًا دون تقديم تنازلات مؤلمة مثل تغييرات التصميم أو إزالة أصول الطرف الثالث التي لا تسيطر عليها. ومع ذلك، لا بأس بذلك لأنه يجب عليك البدء في النظر إلى شيء يسمى مؤشر السرعة! لدى WPT كتابة جيدة حول هذا الأمر، ولكنها تأخذ في الاعتبار بشكل أساسي متى ينظر المستخدم إلى الجزء "الجزء العلوي" على أنه محمل بالكامل. يتعلق الأمر بتجربة المستخدم للسرعة، بدلاً من أن تكون الصفحة مكتملة حقًا. كان هذا أحد الأشياء المتعلقة بتصميم الصفحة الأولى الجديد لـ WP Engine، وكان مؤشر السرعة رائعًا. لقد كانت البرامج النصية المؤجلة هي التي استغرقت وقتًا طويلاً للتحميل والإكمال.
الأدوات التي أصبحت أعتمد عليها على مر السنين:
الإضافات:
شكرًا مرة أخرى، جون، على الوقت الذي أمضيته في إرشادنا عبر نهج أكثر حداثة في الأداء. أردت أن أعطي دفعة أخيرة لوكالة جون، 9seeds. إذا كنت تبحث عن مساعدة في أي نوع من تطوير WordPress المخصص، فاتصل بهم!
في 15 مارس 2018 الساعة 8:46 مساءًشكرا على التنبيه يا برايسون! مُثَبَّت!
يتم كتابة رسالتنا الإخبارية شخصيًا وإرسالها مرة واحدة تقريبًا في الشهر. إنه ليس مزعجًا أو غير مرغوب فيه على الإطلاق.
نحن نعد.
الرابط الخاص بصاروخ WP يفتقد شرطة.