Score:0

วิธีเพิ่มประสิทธิภาพการจัดส่งจาวาสคริปต์บน wordpress / apache / AWS

ธง cv

ฉันไม่ชอบการเพิ่มประสิทธิภาพความเร็วเว็บไซต์ ฉันมีไซต์ที่ได้รับคะแนนแย่มากจากผู้ต้องสงสัยทั่วไปทั้งหมด (โดยเฉพาะ 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 (โดยเฉพาะอย่างยิ่งของบุคคลที่สาม)

Tim avatar
gp flag
Tim
อ่านการอัปเดตของคุณ สิ่งที่ดีเลย์ 5 วินาทีทั้งหมดนั้นผิดปกติจริงๆ คุณสามารถดาวน์โหลด js ที่โฮสต์ได้ทุกที่และวางไว้บนเซิร์ฟเวอร์ / CDN ของคุณหากต้องการ ขอแนะนำให้คุณลองใช้แนวคิดของฉัน เนื่องจากคุณให้ข้อมูลไม่เพียงพอที่จะช่วยเหลือคุณได้อย่างแท้จริงหากคุณต้องการความช่วยเหลือจริงๆ ให้โพสต์ URL
philolegein avatar
cv flag
@Tim ฉันไม่พบโพสต์ที่ฉันได้รับแนวคิดดั้งเดิมสำหรับความล่าช้า แต่ฉันคิดว่าแนวคิดคือ "รอนานเพื่อเริ่มโหลด แต่ให้เร็วกว่านี้หากผู้ใช้เลื่อน/คลิก/ฯลฯ .. ". อย่างไรก็ตาม เราได้ทำตามคำแนะนำของคุณแล้วและได้ลดความล่าช้าลงเหลือ 650 มิลลิวินาที ตามข้อมูลที่ฉันใส่ในการแก้ไข คุณสามารถดูหน้าที่เป็นปัญหาได้ที่นี่: [ลิงก์](https://www.chrisrichardson.info/lp/prague-b/)
Tim avatar
gp flag
Tim
การโหลดครั้งแรกใช้เวลาไม่กี่วินาทีสำหรับฉันในนิวซีแลนด์ การโหลดครั้งที่สองและหลังจากนั้นเร็วมาก ดังนั้น CDN จึงทำงานได้ การทดสอบหน้าเว็บบอกว่าไม่เป็นไร https://www.webpagetest.org/result/220531_BiDcPJ_7TB/ . GTMetrix โหลดครั้งแรกค่อนข้างช้า https://gtmetrix.com/reports/www.chrisrichardson.info/8JdbxgoE/ แต่เมื่อมันถูกแคชบนโหนด CDN ใกล้ไซต์ทดสอบแล้ว มันจะเร็วมาก https://gtmetrix.com/reports/ www.chrisrichardson.info/4jXER8rm/ ดังนั้นฉันคิดว่าการโหลดครั้งแรกเป็นปัญหาของคุณ ฉันไม่คิดว่านี่เป็นปัญหาโครงสร้างพื้นฐาน ความแปรปรวนน่าจะเกิดจากสภาพทางภูมิศาสตร์ ฉันจะสูญเสียความล่าช้าโดยสิ้นเชิง
Tim avatar
gp flag
Tim
ฉันจะลบความล่าช้าในการโหลด JS ห้าวินาทีและตรวจสอบให้แน่ใจว่าได้ตั้งค่าการแคชส่วนหัวสำหรับทรัพยากรแบบคงที่ (js / jpg / etc) เพื่อให้ CloudFront สามารถแคชได้

โพสต์คำตอบ

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