أداء الواجهة الأمامية 2021: انتصارات سريعة

نشرت: 2022-03-10
ملخص سريع ↬ لنجعل 2021 ... سريعًا! قائمة مراجعة سنوية للأداء الأمامي تحتوي على كل ما تحتاج إلى معرفته لإنشاء تجارب سريعة على الويب اليوم ، من المقاييس إلى الأدوات وتقنيات الواجهة الأمامية. تم التحديث منذ عام 2016.

جدول المحتويات

  1. الاستعداد: التخطيط والقياسات
  2. تحديد أهداف واقعية
  3. تعريف البيئة
  4. تحسينات الأصول
  5. بناء التحسينات
  6. تحسينات التسليم
  7. الشبكات ، HTTP / 2 ، HTTP / 3
  8. الاختبار والمراقبة
  9. انتصارات سريعة
  10. كل شيء في صفحة واحدة
  11. قم بتنزيل قائمة التحقق (PDF ، Apple Pages ، MS Word)
  12. كل شيء في صفحة واحدة
  13. قم بتنزيل قائمة التحقق (PDF ، Apple Pages ، MS Word)
  14. اشترك في النشرة الإخبارية عبر البريد الإلكتروني حتى لا تفوت الأدلة التالية.

انتصارات سريعة

هذه القائمة شاملة تمامًا ، وقد يستغرق إكمال جميع التحسينات بعض الوقت. لذا ، إذا كان لديك ساعة واحدة فقط للحصول على تحسينات كبيرة ، فماذا ستفعل؟ دعونا نغليها كلها حتى تصل إلى 17 فاكهة منخفضة التعليق . من الواضح ، قبل أن تبدأ وبمجرد الانتهاء ، قم بقياس النتائج ، بما في ذلك Largest Contentful Paint و Time To Interactive على اتصال 3G والكابل.

  1. قياس تجربة العالم الحقيقي وتحديد الأهداف المناسبة. استهدف أن تكون أسرع بنسبة 20٪ على الأقل من أسرع منافس لك. ابق ضمن أكبر محتوى محتوى <2.5 ثانية ، وتأخير الإدخال الأول <100 مللي ثانية ، ووقت التفاعل <5 ثوانٍ على شبكة الجيل الثالث البطيئة ، للزيارات المتكررة ، TTI <2 ثانية. قم بالتحسين على الأقل لأول رسم محتوى ووقت للتفاعل.
  2. قم بتحسين الصور باستخدام Squoosh و mozjpeg و guetzli و pingo و SVGOMG ، وقم بتقديم AVIF / WebP مع صورة CDN.
  3. قم بإعداد CSS الهامة للقوالب الرئيسية الخاصة بك ، وقم بتضمينها في <head> لكل قالب. بالنسبة إلى CSS / JS ، تعمل ضمن ميزانية ذات حجم ملف حرج بحد أقصى. 170 كيلو بايت gzipped (0.7 ميجا بايت غير مضغوط).
  4. اقتطاع البرامج النصية وتحسينها وتأجيلها وتحميلها البطيء. استثمر في تكوين الحزمة الخاصة بك لإزالة التكرار والتحقق من البدائل خفيفة الوزن.
  5. استضف دائمًا أصولك الثابتة بنفسك وتفضل دائمًا استضافة أصول الجهات الخارجية. الحد من تأثير البرامج النصية للجهات الخارجية. استخدم الواجهات وتحميل عناصر واجهة المستخدم عند التفاعل واحذر من المقتطفات المضادة للوميض.
  6. كن انتقائيًا عند اختيار إطار عمل. بالنسبة للتطبيقات ذات الصفحة الواحدة ، حدد الصفحات المهمة وخدمها بشكل ثابت ، أو على الأقل اعرضها مسبقًا ، واستخدم الترطيب التدريجي على مستوى المكون ووحدات الاستيراد عند التفاعل.
  7. لا يعد العرض من جانب العميل وحده خيارًا جيدًا للأداء. عرض مسبقًا إذا لم تتغير صفحاتك كثيرًا ، وقم بتأجيل تمهيد الأطر إذا استطعت. إذا أمكن ، استخدم العرض المتدفق من جانب الخادم.
  8. قم بتقديم التعليمات البرمجية القديمة فقط للمتصفحات القديمة باستخدام <script type="module"> ونمط الوحدة النمطية / الوحدة النمطية.
  9. جرب إعادة تجميع قواعد CSS واختبر CSS داخل الجسم.
  10. أضف تلميحات عن الموارد لتسريع التسليم من خلال بحث أسرع dns-lookup ، والتوصيل المسبق ، preconnect prefetch ، preload المسبق ، والعرض prerender .
  11. قم بتعيين خطوط الويب وتحميلها بشكل غير متزامن ، واستخدم font-display في CSS لتقديم سريع لأول مرة.
  12. تحقق من تعيين رؤوس ذاكرة التخزين المؤقت HTTP ورؤوس الأمان بشكل صحيح.
  13. تفعيل ضغط Brotli على الخادم. (إذا لم يكن ذلك ممكنًا ، فتأكد على الأقل من تمكين ضغط Gzip.)
  14. قم بتمكين ازدحام TCP BBR طالما أن خادمك يعمل على Linux kernel الإصدار 4.9+.
  15. قم بتمكين تدبيس OCSP و IPv6 إن أمكن. قم دائمًا بتقديم شهادة DV OCSP المدبسة.
  16. قم بتمكين ضغط HPACK لـ HTTP / 2 وانتقل إلى HTTP / 3 إذا كان متاحًا.
  17. أصول التخزين المؤقت مثل الخطوط والأنماط وجافا سكريبت والصور في ذاكرة التخزين المؤقت لعامل الخدمة.

قم بتنزيل قائمة التحقق (PDF ، صفحات Apple)

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

  • قم بتنزيل قائمة التحقق بصيغة PDF (PDF ، 166 كيلو بايت)
  • قم بتنزيل قائمة التحقق في صفحات Apple (.pages ، 275 كيلوبايت)
  • قم بتنزيل قائمة التحقق في MS Word (.docx ، 151 كيلوبايت)

إذا كنت بحاجة إلى بدائل ، فيمكنك أيضًا التحقق من قائمة التحقق من الواجهة الأمامية بواسطة Dan Rublic ، و "قائمة مراجعة أداء الويب الخاصة بالمصمم" بواسطة Jon Yablonski وقائمة التحقق من FrontendChecklist.

فعلينا العودة!

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

جدول المحتويات

  1. الاستعداد: التخطيط والقياسات
  2. تحديد أهداف واقعية
  3. تعريف البيئة
  4. تحسينات الأصول
  5. بناء التحسينات
  6. تحسينات التسليم
  7. الشبكات ، HTTP / 2 ، HTTP / 3
  8. الاختبار والمراقبة
  9. انتصارات سريعة
  10. كل شيء في صفحة واحدة
  11. قم بتنزيل قائمة التحقق (PDF ، Apple Pages ، MS Word)
  12. كل شيء في صفحة واحدة
  13. قم بتنزيل قائمة التحقق (PDF ، Apple Pages ، MS Word)
  14. اشترك في النشرة الإخبارية عبر البريد الإلكتروني حتى لا تفوت الأدلة التالية.

شكر كبير لغاي بودجارني ، ويواف ويس ، وآدي عثماني ، وأرتيم دينيسوف ، ودينيس ميشونوف ، وإيليا بوكالسكي ، وجيريمي واجنر ، وكولين بيندل ، ومارك زيمان ، وباتريك مينان ، وليوناردو لوسوفيز ، وآندي ديفيز ، وراشيل أندرو ، وأنسيلم هانيمان ، وباري بولارد ، وباتريك هامان ، جدعون بايزر ، آندي ديفيز ، ماريا بروسفرنينا ، تيم كادليك ، راي بانغو ، ماتياس أوت ، بيتر بوير ، فيل والتون ، ماريانا بيرالتا ، بيبين سيندرز ، مارك نوتنغهام ، جان بيير فينسنت ، فيليب تيليس ، رايان تاونسند ، إنجريد بيرغمان ، محمد حسين SH و Jacob Groß و Tim Swalling و Bob Visser و Kev Adamson و Adir Amsalem و Aleksey Kulikov و Rodney Rehm لمراجعة هذه المقالة ، بالإضافة إلى مجتمعنا الرائع الذي شارك التقنيات والدروس المستفادة من عمله في تحسين الأداء ليستخدمها الجميع . أنت حقا تحطيم!