ฉันไม่ชอบการเพิ่มประสิทธิภาพความเร็วเว็บไซต์ ฉันมีไซต์ที่ได้รับคะแนนแย่มากจากผู้ต้องสงสัยทั่วไปทั้งหมด (โดยเฉพาะ PageSpeed และ GT Metrics มันดูโอเคในเครื่องมือ Pingdom)
การตั้งค่าของฉันคือเซิร์ฟเวอร์ T3-Medium เดียวที่ใช้ Apache และ Wordpress อยู่เบื้องหลัง AWS ELB โดยปรับใช้กับ CloudFront เป็น CDN
ความพยายามครั้งแรกของฉันในการปรับปรุงประสิทธิภาพรวมอยู่ด้วย
- อัปเกรดเป็นขนาดกลาง (เซิร์ฟเวอร์ใช้งานเว็บไซต์ประมาณ 1/2-โหล แต่มีจำนวนการเข้าชมโดยรวมเพียงเล็กน้อย – มีจำนวนการเข้าชมเพียงไม่กี่พันครั้งต่อวัน – อย่างไรก็ตาม อินสแตนซ์ "ขนาดเล็ก" ก็เช่นกัน เฉื่อยเมื่อโจมตีเพียงครั้งเดียว เนื่องจากข้อจำกัดของหน่วยความจำ)
- ติดตั้งปลั๊กอิน WP Super Cache (ฉันทำงานอยู่เบื้องหลัง CloudFront อยู่แล้ว แต่ติดตั้งปลั๊กอินเพื่อแคชหน้าจริงๆ)
- เพิ่มส่วนหัวของการควบคุมแคชให้กับพฤติกรรมของ CloudFront
- ลบสตริงข้อความค้นหาออกจากคีย์แคช (นี่ไม่ใช่ไซต์อีคอมเมิร์ซแบบดั้งเดิม และโฆษณาบน Twitter กำลังเพิ่มสตริงที่ไม่ซ้ำกันต่อผู้ใช้ ซึ่งโดยพื้นฐานแล้วทำให้ทุกหน้าที่ดูพลาดแคชไป)
อย่างไรก็ตาม แม้ว่าจะเป็นเช่นนั้น ประสิทธิภาพเริ่มต้นก็ไม่เป็นที่ยอมรับ ผู้ร้ายน่าจะเป็นการส่งมอบจาวาสคริปต์ (และการดำเนินการ) ต่อไปนี้คือผลลัพธ์บางส่วนจาก GT Metrics โดยพิจารณาจากการดำเนินการด้วยตนเองที่ฉันดำเนินการ:
แคช-Miss Cache-Hit แคช-Miss Cache-Hit แคช-Miss Cache-Hit
เริ่มต้น ค้อนเริ่มต้น ค้อน YouTube ค้อนเลื่อน Youtube ค้อนเลื่อน
TTFB 1,100 91 75 66 75 72 | 74 74 122 74 54 75 | 76 86 104 86 63 45
FCP 2,200 1,100 4,200 494 519 383 | 1,100 2,700 1,400 710 415 622 | 1,200 1,200 1,200 388 338 256
พช. 3,300 2,000 6,300 1,900 1,700 1,800 | 1,800 3,500 2,000 2,700 881 1,600 | 1,900 2,000 2,500 684 617 490
โหลด 4,600 3,200 7,600 2,300 3,000 2,700 | 2,900 4,900 2,700 3,100 1,500 2,500 | 2,000 2,000 2,400 766 824 489
อปท. 4,700 3,300 7,600 2,500 2,900 3,200 | 3,000 8,000 2,800 3,400 1,700 3,000 | 8,000 6,800 1,200 6,700 6,700 6,400
อย่างที่คุณเห็น ถ้าฉันไม่ทำอะไรเลย (ตารางย่อย 2 รายการแรกคือ "ค่าเริ่มต้น") เว็บไซต์จะใช้เวลาเกือบ 3 วินาทีในการโหลดโดยพบแคช และมักจะอยู่ทางเหนือของ 4 เมื่อแคชพลาด
นี่คือต้นตอของคำถามจริงๆ ฉันควรทำอย่างไรจากที่นี่ ฉันจะอธิบายสิ่งที่ฉันกำลังทำอยู่ด้านล่าง แต่ฉันไม่เชื่อว่าสิ่งที่ฉันจะอธิบายคือแนวทางปฏิบัติมาตรฐานบนอินเทอร์เน็ต และโดยทั่วไปแล้วอินเทอร์เน็ตไม่ได้ต้องทนทุกข์ทรมานจากการแสดงประเภทนี้ .
การใช้ค้อนเลื่อน
ฉันไม่แน่ใจว่าเมตริกใดมีความสำคัญมากที่สุดจากมุมมองประสบการณ์ของผู้ใช้ แต่ในกรณีของฉัน ฉันสงสัยว่ามันคือ LCP และ onload (ฉันนึกภาพออกสำหรับบางเว็บไซต์ว่าเป็น TTI แต่ในกรณีของฉันไม่มีอะไรให้ทำในครึ่งหน้าบน ดังนั้นเมตริก First CPU Idle แบบเก่าน่าจะดีมาก ถ้า Lighthouse ยังคงรายงานอยู่)
สิ่งที่ฉันกำลังทำอยู่ตอนนี้คือสิ่งที่ฉันมีในส่วน "Sledge Hammer" ของตาราง ฉันเขียนสคริปต์ที่แยกแท็ก src ของจาวาสคริปต์ที่ไม่จำเป็นออกทั้งหมด และนำแท็กเหล่านั้นกลับมาหลังจากผ่านไป 5 วินาทีหรือการโต้ตอบครั้งแรกของผู้ใช้เท่านั้น คุณสามารถดูผลลัพธ์ แม้จะพลาดแคช ไซต์ก็โหลดในเวลาประมาณ 2 วินาที และเมื่อพบแคชก็ใช้เวลาน้อยกว่า 1 วินาที (เราสามารถเพิกเฉยต่อหมายเลข TTI ได้ เพราะนั่นคือการหน่วงเวลา 5 วินาทีของฉัน และไม่ส่งผลกระทบเหนือ-the- ลักษณะพับหรือการโต้ตอบ)
ตกลง ไซต์นี้ "ใช้งานได้" แต่จริงๆ แล้ว ไม่เพียงแต่ดูเหมือนว่าไม่จำเป็นต้องทำสิ่งนี้ในบทคัดย่อเท่านั้น แต่ยังมีจาวาสคริปต์บางตัวที่ฉันชอบจริงๆ ที่จะให้ทำงานตั้งแต่เริ่มต้น
เมื่อเจาะลึกเข้าไป ปัญหาทั้งหมดดูเหมือนจะเป็น JavaScript ของบุคคลที่สาม (เช่น สิ่งที่ไม่ใช่ / ไม่สามารถอยู่ใน CDN ของฉัน) บางอย่างก็ร้ายแรงมาก และฉันสามารถจัดการกับมันเป็นการภายในได้ (เช่น ฉันสามารถบอกนักการตลาดว่า "ใช้ HotJar เมื่อคุณต้องการจริงๆ เท่านั้น จากนั้นปิดมัน â มันเพิ่มเวลาหนึ่งวินาทีเต็มในการโหลดหน้าเว็บ เวลา"). แต่บางส่วนเป็นเพียง "มาตรฐานอินเทอร์เน็ต" - Stripe และการวิเคราะห์ของ Google แต่ละรายการจะเพิ่ม ~500ms ระหว่างเวลาโหลดและเวลาทำงาน
ฉันสามารถปรับแต่งค้อนขนาดใหญ่ของฉันต่อไปได้ตามที่ Tim แนะนำไว้ในความคิดเห็น แต่ก็ยังรู้สึกไม่ถูกต้อง ต้องมีบางสิ่งที่ฉันขาดหายไปในแง่ของการตั้งค่านี้และ JavaScript (โดยเฉพาะอย่างยิ่งของบุคคลที่สาม)