تحدي الأداء الأمامي: الفائز والنتائج

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

ما الجوائز تسأل؟ الفائز يفوز برحلة ذهاب وإياب إلى لندن ، وإقامة كاملة في فندق فاخر ، وتذكرة إلى SmashingConf London 2018 ، وأخيراً وليس آخراً ، ورشة عمل Smashing من اختيارهم.

تحد؟ ما التحدي؟

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

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

لكن ما يكفي من الحقائق الثابتة في الوقت الحالي. نحن نعلم أنك فضولي بالفعل ، ولا نريد أن نبقيك في حالة ترقب بعد الآن. ها هو المشروع الفائز.

و الفائز هو…

ليوناردو لوسوفيز

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

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

تم إنشاء PoP فوق WordPress. هذا يعني أن العديد من تقنيات التحسين المبتكرة المتاحة لأطر عمل جافا سكريبت ، مثل تقسيم الشفرة باستخدام Webpack أو Service Workers من خلال sw-precache ، بعيدة المنال (على الأقل بدون حل بديل كبير). على هذا النحو ، فإن جميع تقنيات التحسين الموضحة أدناه كلها DIY ، مصممة وتنفيذها من البداية.

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

كل التقديمات

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

يورغن فيويج

قدم Jorgen Verweij نسخة محسنة من موقع الويب الخاص بشركته Perplex Internetmarketing BV. جنبًا إلى جنب مع فريق مكون من UX'er ، وواجهة أمامية ، ومطور للجهة الخلفية ، ومسؤول نظام ، شرع في مسعى الأداء.

والنتيجة هي تنفيذ ممتاز مع نتائج ممتازة في جميع المجالات: SpeedIndex أقل بكثير من هدفهم المحدد وهو 1250 ، ووقت تحميل أقل من ثانية واحدة ، ويبدأ العرض في نصف ثانية ، و ¹⁰⁰ ₁₀₀ PageSpeedscore وتدقيق Lighthouse تقريبًا . مقارنة بالوضع القديم ، يكون وقت التحميل أسرع بثماني مرات تقريبًا. مجد! يمكنك قراءة المزيد من التفاصيل حول العملية في هذه الكتابة الشاملة التي وضعها Jorgen معًا.

ماركو هينجستينبيرج

قدم Marco Hengstenberg نسخة محسنة من موقع وكالة السياحة Land in Sicht . لتحسين الأداء ، استخدم ماركو الكثير من الحيل والتقنيات الصغيرة الأنيقة. التحميل المسبق لورقة الأنماط الرئيسية وتحميل الخط الحرج مع التحميل المسبق في المتصفحات الداعمة هما فقط اثنان منهم. كما أعاد هيكلة HTML لجعله مسطحًا ودلاليًا ويمكن الوصول إليه قدر الإمكان وقلل كمية البيانات التي تم نقلها في البداية عند الزيارة الأولى من حوالي 3 ميجابايت إلى 1.3 ميجابايت على سطح المكتب (وبسبب استخدام الصور سريعة الاستجابة للصورة البطل ، أقل من ذلك على الشاشات الضيقة).

لتبسيط الموقع ، قام Marco بإزالة Bootstrap و jQuery و Modernizr ، وأعد عملية إنشاء باستخدام Grunt ، وقدم ServiceWorker الذي يجعل الموقع متاحًا بلا اتصال بالإنترنت أيضًا. كان الجهد يستحق كل هذا العناء: والنتيجة هي TTL الدراماتيكي الذي انخفض من 32 ثانية إلى ثانيتين وانخفاض بنسبة 50٪ تقريبًا في طلبات HTTP والبايتات المنقولة (انظر أيضًا تقرير Lighthouse ، ZIP 251KB). يساعد كل من التحميل المسبق والعرض الأولي السريع على وقت التحميل المتصور. عمل عظيم!

غابرييل مارياني

كان موقع San Diego Christian College هو الموقع الذي طبق فيه Gabriel Mariani مهاراته في الأداء. قسّم عملية التحسين إلى أربع خطوات. أولاً ، قام بقص جميع الصور إلى الحد الأقصى للحجم الذي كانت بحاجة إليه فعلاً وأنشأ نسخًا بحجم الجوال منها. ثم جعل كل الصور بطيئة التحميل. ركزت الخطوة الثانية على JavaScript وإزالة جميع البرامج النصية المضمنة التي يأتي معها موقع WordPress وموضوعه ومكوناته الإضافية. ثم قام بتدوين أكبر عدد ممكن من البرامج النصية بحيث يمكن لـ Autoptimize التقاطها وتصغيرها / دمجها في ملف واحد.

قلص Gabriel أيضًا عدد الخطوط المستخدمة وضبط خطوط Google ليتم تحميلها بشكل غير async بحيث يتم تحميل المسار الحرج CSS أولاً. أخيرًا وليس آخرًا ، تناول بعض الاحتمالات والنهايات الصغيرة الأخرى مثل تخصيص مكونات WordPress الإضافية ، لذا فهي تعتمد على ajax بدلاً من PHP. سمح له ذلك بتمكين التخزين المؤقت للصفحة وفي النهاية تمكين CDN للموقع. كان التحول إلى HTTP / 2 و HTTPS هو الخطوة الأخيرة. انظر WebPageTest للحصول على النتائج الكاملة. لطيف - جيد!

الكسندر زارجيس

طور Alexander Zarges Cloud Player ، وهو تطبيق ويب من صفحة واحدة يعتمد على Angular 4 يتيح لك البحث وتشغيل تطبيقات YouTube و SoundCloud. يستخدم الإصدار الذي تمت ترقيته مترجم Angular المسبق لتحقيق وقت تهيئة يبلغ حوالي 2.9 ثانية (مقارنة بـ 5.2 ثانية عند استخدام برنامج التحويل البرمجي في الوقت المناسب). إذا كنت تريد التعمق في الكود ، فراجع مستودع GitHub المصاحب.

برادلي تونت

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

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

جون بيلز

تحدى John Beales نفسه لإعطاء 4RoadService.com دفعة للأداء. عندما بدأ ، كانت هناك بالفعل بعض التحسينات. تم تشغيل الصور الثابتة من خلال ImageOptim ، على سبيل المثال ، تم تصغير CSS و JS ، وكانوا يشغّلون CDN من خلال CloudFlare ، وكان الموقع يستخدم بالفعل أداة تحميل نمط الصفحة الواحدة ، لذلك يتم جلب المحتوى الجديد دائمًا بواسطة XHR والصفحة أبدا إعادة رسم تماما.

لهذا التحدي ، قام جون بتشغيل تحسين الصورة وضغط WebP في Cloudflare. يستخدم الموقع المحدث الآن HTTP / 2 Server Push لإرسال ملفات CSS و JS الرئيسية مع تحميل الصفحة الأولي ويعتمد على Guetzli لضغط JPEG. لتحسين التخزين المؤقت ، قام بتحديث عناوين URL لجميع الأصول الثابتة بحيث يتغير عنوان URL كلما تغير الأصل ، ثم عيّن جميع الأصول الثابتة للتخزين المؤقت لمدة عام. لتحسين التخزين المؤقت للصور ، قام John أيضًا بتحديث عناوين URL للصور التي تم تغيير حجمها ديناميكيًا ، لذلك يعتقد CloudFlare أنها ملفات صور ثابتة.

النتيجة: انخفض أول طلاء ذي مغزى من 2220 مللي ثانية إلى 1290 مللي ثانية وأول طلاء تفاعلي من 5480 مللي ثانية إلى 3040 مللي ثانية. يمكنك عرض نتائج Lightbox و WebPage Test الكاملة هنا.

شون أوكونيل

كان دخول شون أوكونيل هو العمل الذي قام به على kiwi.ruby.nz. كان الهدف هو تحويل موقع المؤتمر إلى PWA حتى يتمكن الحاضرون من البحث عن جميع المعلومات المتعلقة بالحدث دون اتصال بالإنترنت. بعض الأشياء التي قام بها: استبدال إطار خرائط Google النموذجي بخرائط Google الثابتة ، وخطوط مجموعة فرعية ذاتية الاستضافة ، ونقل CSS مضمّنًا للحفاظ على الطلب الأول أقل من 14 كيلوبايت ، وإزالة التبعيات ، وإضافة عمال خدمة التخزين المؤقت المسبق ، وإضافة Turbolinks لسرعة. انتقالات الصفحة. من خلال القيام بذلك ، انخفض وقت العرض الأولي من 3.9 ثانية إلى 0.3 ثانية.

لمزيد من التفاصيل راجع WebPageTests.

رسلان جولباريسو

قدم رسلان جولباريسو موقعه الشخصي على الإنترنت zerofy.de. منذ أن أنهى أعمال التحسين الخاصة به قبل وقت قصير من نشر المسابقة ، لسوء الحظ ، لا توجد تفاصيل تفصيلية قبل النتائج ، لكن رسلان قام بعمل كتابة جيدة عن الكيفية التي أدت بها تعديلاته إلى حجم صفحة 1.6 كيلوبايت و TTFB 197 مللي ثانية. بصرف النظر عن التخزين المؤقت ، والتصغير ، وتعديل GZIP ، و jQuery ، يقوم بتحميل الخطوط بعد ذلك لتجنب حظر التجسيد ، وباستبدال FontAwesome بمجموعة IcoMoon مخصصة من 10 أيقونات ، تمكن من توفير 130 كيلو بايت إضافية.

لتعزيز درجة مؤشر السرعة والحصول على أسرع تجربة ممكنة ، قام أيضًا بإنشاء ملف PHP منفصل يحتوي على جميع أنماط CSS التي تؤثر على عرض الجزء المرئي من الصفحة. تفاصيل رائعة: يتيح له البرنامج النصي الصغير Barba.js إنشاء انتقالات للصفحة دون إعادة تحميل الموقع بالكامل.

شكرا للجميع على المشاركة

تفو! الآن كان هذا تحديًا كبيرًا بالفعل! لأولئك منكم الذين يستمتعون بمثل هذا التحدي الجيد ودغدغة دماغية بين الحين والآخر ، ترقبوا التحدي التالي. سنخرج بواحد آخر في وقت قصير - هذا أمر مؤكد!