Front-End Performance 2021: Quick Wins

เผยแพร่แล้ว: 2022-03-10

สรุปด่วน ↬ มาสร้างปี 2021… ให้ไว! รายการตรวจสอบประสิทธิภาพฟรอนต์เอนด์ประจำปีที่มีทุกสิ่งที่คุณจำเป็นต้องรู้เพื่อสร้างประสบการณ์ที่รวดเร็วบนเว็บในปัจจุบัน ตั้งแต่เมตริกไปจนถึงเครื่องมือและเทคนิคฟรอนต์เอนด์ อัปเดตตั้งแต่ 2016

สารบัญ

เตรียมตัวให้พร้อม: การวางแผนและการวัดผล
การตั้งเป้าหมายที่สมจริง
การกำหนดสภาพแวดล้อม
การเพิ่มประสิทธิภาพสินทรัพย์
สร้างการเพิ่มประสิทธิภาพ
การเพิ่มประสิทธิภาพการจัดส่ง
เครือข่าย, HTTP/2, HTTP/3
การทดสอบและการตรวจสอบ
ชนะอย่างรวดเร็ว
ทุกอย่างในหน้าเดียว
ดาวน์โหลดรายการตรวจสอบ (PDF, Apple Pages, MS Word)
ทุกอย่างในหน้าเดียว
ดาวน์โหลดรายการตรวจสอบ (PDF, Apple Pages, MS Word)
สมัครรับจดหมายข่าวทางอีเมลของเราเพื่อไม่ให้พลาดคำแนะนำต่อไป

ชนะอย่างรวดเร็ว

รายการนี้ค่อนข้างครอบคลุม และการเพิ่มประสิทธิภาพทั้งหมดอาจใช้เวลาสักครู่ ดังนั้น หากคุณมีเวลาเพียง 1 ชั่วโมงในการปรับปรุงที่สำคัญ คุณจะทำอย่างไร? มาต้มให้เหลือ 17 ผลไม้ห้อยต่ำ กัน แน่นอน ก่อนที่คุณจะเริ่มและเมื่อคุณทำเสร็จ ให้วัดผลลัพธ์ ซึ่งรวมถึง Largest Contentful Paint และ Time To Interactive บน 3G และการเชื่อมต่อด้วยสายเคเบิล

วัดจากประสบการณ์จริงและกำหนดเป้าหมายที่เหมาะสม ตั้งเป้าให้เร็วกว่าคู่แข่งที่เร็วที่สุดของคุณอย่างน้อย 20% อยู่ภายใน Largest Contentful Paint < 2.5 วินาที, ความล่าช้าในการป้อนข้อมูลครั้งแรก <100 มิลลิวินาที, เวลาในการโต้ตอบ < 5 วินาทีบน 3G ที่ช้า สำหรับการเข้าชมซ้ำ TTI < 2 วินาที เพิ่มประสิทธิภาพอย่างน้อยสำหรับ First Contentful Paint และ Time To Interactive
ปรับรูปภาพให้เหมาะสมด้วย Squoosh, mozjpeg, guetzli, pingo และ SVGOMG และให้บริการ AVIF/WebP ด้วย CDN รูปภาพ
เตรียม CSS ที่สำคัญสำหรับเทมเพลตหลักของคุณและอินไลน์ใน <head> ของแต่ละเทมเพลต สำหรับ CSS/JS ให้ดำเนินการภายในงบประมาณขนาดไฟล์ที่สำคัญที่สูงสุด 170KB gzipped (แตกไฟล์ 0.7MB)
ตัดแต่ง เพิ่มประสิทธิภาพ เลื่อนเวลา และสคริปต์โหลดแบบขี้เกียจ ลงทุนในการกำหนดค่า Bundler ของคุณเพื่อลบความซ้ำซ้อน และตรวจสอบทางเลือกที่มีน้ำหนักเบา
โฮสต์ทรัพย์สินแบบคงที่ด้วยตนเองเสมอและต้องการโฮสต์ทรัพย์สินของบุคคลที่สามด้วยตนเองเสมอ จำกัดผลกระทบของสคริปต์บุคคลที่สาม ใช้ส่วนหน้า โหลดวิดเจ็ตในการโต้ตอบ และระวังตัวอย่างข้อมูลป้องกันการสั่นไหว
เลือกเมื่อเลือกกรอบงาน สำหรับแอปพลิเคชันหน้าเดียว ให้ระบุหน้าที่สำคัญและให้บริการแบบคงที่ หรืออย่างน้อยก็แสดงล่วงหน้า และใช้ไฮเดรชั่นแบบก้าวหน้าในระดับส่วนประกอบและโมดูลนำเข้าในการโต้ตอบ
การเรนเดอร์ฝั่งไคลเอ็นต์เพียงอย่างเดียวไม่ใช่ตัวเลือกที่ดีสำหรับประสิทธิภาพ แสดงผลล่วงหน้าหากเพจของคุณไม่ได้เปลี่ยนแปลงมากนัก และเลื่อนการบูตของเฟรมเวิร์กออกไปหากทำได้ หากเป็นไปได้ ให้ใช้การสตรีมการเรนเดอร์ฝั่งเซิร์ฟเวอร์
ให้บริการรหัสเดิมเฉพาะกับเบราว์เซอร์รุ่นเก่าที่มี <script type="module"> และรูปแบบโมดูล/nomodule
ทดลองจัดกลุ่มกฎ CSS ใหม่และทดสอบ CSS ในเนื้อหา
เพิ่มคำแนะนำทรัพยากรเพื่อเพิ่มความเร็วในการจัดส่งด้วย dns-lookup preconnect prefetch preload และแสดงผล prerender
เซ็ตย่อยฟอนต์ของเว็บและโหลดแบบอะซิงโครนัส และใช้ font-display ใน CSS เพื่อการเรนเดอร์ครั้งแรกอย่างรวดเร็ว
ตรวจสอบว่าส่วนหัวแคช HTTP และส่วนหัวความปลอดภัยได้รับการตั้งค่าอย่างถูกต้อง
เปิดใช้งานการบีบอัด Brotli บนเซิร์ฟเวอร์ (หากไม่สามารถทำได้ อย่างน้อยต้องแน่ใจว่าเปิดใช้งานการบีบอัด Gzip แล้ว)
เปิดใช้งานความแออัดของ TCP BBR ตราบใดที่เซิร์ฟเวอร์ของคุณทำงานบนเคอร์เนล Linux เวอร์ชัน 4.9+
เปิดใช้งานการเย็บเล่ม OCSP และ IPv6 หากเป็นไปได้ ให้บริการใบรับรอง DV ที่เย็บเล่ม OCSP เสมอ
เปิดใช้งานการบีบอัด HPACK สำหรับ HTTP/2 และย้ายไปที่ HTTP/3 หากมี
สินทรัพย์แคช เช่น ฟอนต์ สไตล์ JavaScript และรูปภาพในแคชของเจ้าหน้าที่บริการ

ดาวน์โหลดรายการตรวจสอบ (PDF, Apple Pages)

ด้วยรายการตรวจสอบนี้ คุณควรเตรียมพร้อมสำหรับโครงการประสิทธิภาพส่วนหน้าทุกประเภท คุณสามารถดาวน์โหลดไฟล์ PDF ที่พร้อมพิมพ์ของรายการตรวจสอบ รวมถึง เอกสาร Apple Pages ที่แก้ไขได้ เพื่อปรับแต่งรายการตรวจสอบตามความต้องการของคุณ:

ดาวน์โหลดรายการตรวจสอบ PDF (PDF, 166 KB)
ดาวน์โหลดรายการตรวจสอบใน Apple Pages (.pages, 275 KB)
ดาวน์โหลดรายการตรวจสอบใน MS Word (.docx, 151 KB)

หากคุณต้องการทางเลือกอื่น คุณสามารถตรวจสอบรายการตรวจสอบส่วนหน้าโดย Dan Rublic "รายการตรวจสอบประสิทธิภาพเว็บของนักออกแบบ" โดย Jon Yablonski และรายการตรวจสอบส่วนหน้า

เราไปกันเถอะ!

การปรับให้เหมาะสมบางอย่างอาจอยู่นอกเหนือขอบเขตของงานหรืองบประมาณของคุณ หรืออาจเกินความสามารถเนื่องจากรหัสเดิมที่คุณต้องจัดการ ไม่เป็นไร! ใช้รายการตรวจสอบนี้เป็นแนวทางทั่วไป (และหวังว่าจะครอบคลุมทั้งหมด) และสร้างรายการปัญหาที่เกี่ยวข้องกับบริบทของคุณ แต่ที่สำคัญที่สุด ให้ทดสอบและวัดผลโครงการของคุณเองเพื่อระบุปัญหาก่อนที่จะเพิ่มประสิทธิภาพ ผลงานปี 2564 สุขสันต์นะครับทุกคน!

สารบัญ

เตรียมตัวให้พร้อม: การวางแผนและการวัดผล
การตั้งเป้าหมายที่สมจริง
การกำหนดสภาพแวดล้อม
การเพิ่มประสิทธิภาพสินทรัพย์
สร้างการเพิ่มประสิทธิภาพ
การเพิ่มประสิทธิภาพการจัดส่ง
เครือข่าย, HTTP/2, HTTP/3
การทดสอบและการตรวจสอบ
ชนะอย่างรวดเร็ว
ทุกอย่างในหน้าเดียว
ดาวน์โหลดรายการตรวจสอบ (PDF, Apple Pages, MS Word)
ทุกอย่างในหน้าเดียว
ดาวน์โหลดรายการตรวจสอบ (PDF, Apple Pages, MS Word)
สมัครรับจดหมายข่าวทางอีเมลของเราเพื่อไม่ให้พลาดคำแนะนำต่อไป

ขอบคุณมากสำหรับ Guy Podjarny, Yoav Weiss, Addy Osmani, Artem Denysov, Denys Mishunov, Ilya Pukhalski, Jeremy Wagner, Colin Bendell, Mark Zeman, Patrick Meenan, Leonardo Losoviz, Andy Davies, Rachel Andrew, Anselm Hannemann, Barry Pollard, Patrick ฮามันน์, กิเดี้ยน ไพเซอร์, แอนดี้ เดวีส์, มาเรีย โพรสเวอร์นินา, ทิม แคดเลค, เรย์ บังโก, แมทเธียส อ็อตต์, ปีเตอร์ บาวเยอร์, ฟิล วอลตัน, มาเรียนา เปรัลตา, เปปิน เซนเดอร์ส, มาร์ค นอตติงแฮม, ฌอง ปิแอร์ วินเซนต์, ฟิลิปป์ เทลลิส, ไรอัน ทาวน์เซนด์, อิงกริด เบิร์กแมน, โมฮาเหม็ด ฮุสเซน SH, Jacob Groß, Tim Swalling, Bob Visser, Kev Adamson, Adir Amsalem, Aleksey Kulikov และ Rodney Rehm สำหรับการทบทวนบทความนี้ รวมถึงชุมชนที่ยอดเยี่ยมของเราซึ่งได้แบ่งปันเทคนิคและบทเรียนที่เรียนรู้จากการทำงานในการเพิ่มประสิทธิภาพการทำงานให้ทุกคนได้ใช้ . คุณยอดเยี่ยมจริงๆ!