เป็นสิ่งสำคัญมากสำหรับเว็บไซต์ที่จะโหลดโดยเร็วที่สุด ผู้ใช้ต้องการดูหน้าเว็บที่พวกเขาต้องการเห็นอย่างรวดเร็วและหากคุณไม่สามารถตอบสนองพวกเขาได้พวกเขาจะมองหาที่อื่น ในบทความนี้คุณจะเห็นการอภิปรายเกี่ยวกับเทคนิคที่เรียบง่ายและมีประสิทธิภาพห้าประการเพื่อเพิ่มความเร็วหน้าเว็บของคุณ
การรู้เวลาในการโหลดของเว็บไซต์เป็นขั้นตอนแรกก่อนที่จะตัดสินใจว่าเกิดอะไรขึ้น นอกจากนี้ยังช่วยให้คุณรู้ว่าคุณต้องการเปลี่ยนแปลงการเร่งความเร็วเว็บไซต์ของคุณหรือไม่
ก่อนที่เราจะเริ่มถ้าคุณยังไม่ได้ติดตั้ง YSLow โปรดติดตั้ง มันเป็นส่วนขยายของ Mozilla Firefox คุณสามารถค้นหาได้จากลิงค์ด้านล่าง:
ก่อนอื่นมาดูเว็บไซต์ Six Revisions เราทุกคนใช้ตัวอย่างเดียวกันเพื่อทดสอบ (จำเป็นต้องเปิดในแท็บใหม่หรือหน้าต่างเบราว์เซอร์)
ในเบราว์เซอร์มีคอลัมน์ของเครื่องวัดระยะทาง (ดังแสดงในรูปที่ 1) ถัดไปเมื่อหน้าเว็บโหลดเสร็จแล้วคุณจะเห็น YSLOW และตัวเลข จำนวนแสดงถึงเวลา (เป็นวินาที) ที่เบราว์เซอร์ใช้ในการโหลดเว็บไซต์ เราต้องการให้หมายเลขนี้ต่ำที่สุดเท่าที่จะทำได้
รูปที่ 1: ไอคอน YSLOW และเครื่องวัดระยะทางแสดงเวลาโหลดหน้าเว็บ
ในกรณีส่วนใหญ่หนึ่งหรือกลุ่มของเหตุผลที่ทำให้เวลาในการโหลดหน้าเว็บเป็นเวลานานมีดังนี้:
เราจะพูดถึงสิ่งเหล่านี้ในภายหลัง
เพื่อให้แน่ใจว่าเวลาในการโหลดของเว็บไซต์ของคุณจะปรากฏขึ้นให้เรียกดูเว็บไซต์บางแห่ง ตรวจสอบ Google, Facebook และบล็อกและเว็บไซต์ที่คุณชอบ คุณจะสังเกตเห็นว่ายิ่งมีการใช้รูปภาพมากขึ้นเท่าใดเวลาตอบสนองของหน้า JS ก็จะนานขึ้นเท่านั้น
นอกเหนือจากการวัดว่ามันโหลดเร็วแค่ไหน YSLOW ยังให้ข้อมูลเชิงลึกเชิงลึกบางอย่างแก่คุณเช่นสิ่งที่คุณสามารถทำได้เพื่อปรับปรุงประสิทธิภาพของเว็บไซต์ของคุณรวมถึงการขาดประสิทธิภาพการโหลดของเว็บไซต์ของคุณ
ภาพด้านล่างคือแท็บ 'ประสิทธิภาพ' (ดังแสดงในรูปที่ 2) แต่ถ้าคุณคลิกที่มันจะแสดงรายละเอียดของแต่ละพื้นที่ที่มีผลต่อการโหลดเวลาและประสิทธิภาพโดยรวม
รูปที่ 2: แท็กประสิทธิภาพ
ในฟิลด์นี้ตัวเลือกที่เป็นส่วนตัวที่สุดคือการใช้ CDN (เครือข่ายการกระจายเนื้อหา) .CDN มีประสิทธิภาพมากสำหรับเว็บไซต์ขนาดใหญ่ สิ่งที่พวกเขาทำคือกระจายเนื้อหาของเว็บไซต์ข้ามเซิร์ฟเวอร์ทั่วทั้งภูมิภาค ยิ่งเซิร์ฟเวอร์ฟิสิคัลใกล้เข้ามาในการโหลดเว็บไซต์ของผู้ใช้ ดังนั้นการใช้ CDN คือการแจกจ่ายเนื้อหาจากเซิร์ฟเวอร์ไปยังผู้ใช้หน้าเข้าถึงที่ใกล้ที่สุด
รูปที่ 3: แท็กประสิทธิภาพใช้ตัวอักษร (A, B, C, D, F) เพื่อแสดงเกรดและเกรดปัจจุบัน (1-100)
นอกเหนือจากการใช้ CDN (ซึ่งอาจมีค่าใช้จ่ายสูง) - ทุกอย่างอื่นสามารถทำได้
ลองผ่านปัจจัยระดับแต่ละระดับนี่คือความเร็วที่สองโดยย่อสำหรับแต่ละระดับและวิธีการแก้ปัญหาเหล่านี้เพื่อให้ได้ประสิทธิภาพที่ดีที่สุด
ลดคำขอ HTTP : เมื่อหน้าเว็บได้รับไฟล์จากเซิร์ฟเวอร์คำขอ HTTP จะถูกสร้างขึ้น ขอบเขตรวมถึงสคริปต์ไฟล์ CSS รูปภาพและคำขอไคลเอนต์/เซิร์ฟเวอร์แบบอะซินโคน (AJAX และเทคโนโลยีการเปลี่ยนแปลงอื่น ๆ ) นี่คือจุดสำคัญเมื่อพูดถึงการแสดง แต่สามารถแก้ไขได้ง่ายด้วยความพยายามเพียงเล็กน้อย ตัวอย่างเช่นมักจะมีประโยชน์ในการรวมสคริปต์ CSS และรูปภาพให้มากที่สุดเท่าที่จะทำได้ไฟล์แคชบนเครื่องของผู้ใช้
เพิ่มส่วนหัวคำ : 80% ของเวลาในการโหลดหน้าเกี่ยวข้องกับการดาวน์โหลดสคริปต์รูปภาพและ CSS ในกรณีส่วนใหญ่องค์ประกอบเหล่านี้จะไม่เปลี่ยนแปลงในเครื่องของผู้ใช้ คุณสามารถแคชรหัสใน. htaccess ในเครื่องท้องถิ่นของผู้ใช้ (เราจะหารือเกี่ยวกับวิธีการทำงานในภายหลังในบทความ)
ส่วนประกอบ GZIP : GZIPING หรือไฟล์ JS ที่บีบอัดรูปภาพเอกสาร HTML เอกสาร CSS ฯลฯ ผู้ใช้สามารถดาวน์โหลดไฟล์ขนาดเล็กลงเพื่อเพิ่มความเร็วในการโหลดของหน้าเว็บ สิ่งนี้สามารถลดการใช้เซิร์ฟเวอร์ได้ แต่ส่วนประกอบการบีบอัดสามารถทำให้เกิดการตอบสนองต่อหน้าช้าลงขึ้นอยู่กับเบราว์เซอร์ของผู้ใช้
ใส่ CSS ที่ด้านบน : ใส่ไฟล์ CSS ที่ด้านบนของเว็บไซต์ซึ่งสามารถโหลดส่วนอื่น ๆ เช่นรูปภาพและข้อความให้มากที่สุดในเวลาเดียวกัน
ใส่ JS ที่ด้านล่าง : ใส่ CSS ที่หัวเอกสารคุณจะต้องแทรก JS ก่อนปิด <Boby> ในขณะที่สคริปต์เหล่านี้ถูกโหลดในพื้นหลังผู้ใช้ก่อนจะได้รับหน้าที่ดูเหมือนจะสมบูรณ์
หลีกเลี่ยงการแสดงออกของ CSS : ฉันไม่เคยใช้นิพจน์ CSS (เรียกว่าคุณสมบัติแบบไดนามิก) ซึ่งเป็นเพียงคุณสมบัติ CSS ที่เพิ่มแนวคิดการเขียนโปรแกรม (เช่นโครงสร้างการควบคุม/เงื่อนไข) เช่นเดียวกับ IE8 เครื่องยนต์เค้าโครงตรีศูล (ใช้ใน IE) ไม่ได้รับการสนับสนุนอีกต่อไป อย่างไรก็ตามพวกเขาไม่มีความคิดที่ดีที่จะใช้ ในระดับหนึ่งฉันจะใช้สคริปต์ PHP เพื่อโหลดกฎสไตล์ CSS ที่แตกต่างกันตามเงื่อนไขที่แตกต่างกันเช่นจำนวนสุ่มเวลาของวันหรือเบราว์เซอร์
การโทรภายนอกไปยัง JS และ CSS : ใส่ไฟล์ JS และ CSS ในไฟล์ภายนอกและเบราว์เซอร์แคชไว้ด้วยความเร็วในการโหลดหน้าเว็บที่เร็วกว่าการโทรแต่ละครั้ง
ลดการค้นหา DNS : ตราบใดที่ผู้ใช้พิมพ์ชื่อโดเมนในแถบที่อยู่ของเบราว์เซอร์เบราว์เซอร์จะทำการค้นหา DNS สำหรับที่อยู่ IP เสมอ ยิ่งเว็บไซต์มีสถานที่ที่มีการค้นหา DNS ที่จำเป็นมากขึ้นเท่านั้น รักษาระดับให้ต่ำที่สุดเท่าที่จะเป็นไปได้และดำเนินการค้นหา DNS โดยเฉลี่ย 60-100 มิลลิวินาที
Zoom in JS : ซึ่งแตกต่างจากการบีบอัด GZIP ทั่วไปการซูมในเอกสาร JS คือการลบช่องว่างที่ไม่จำเป็นแท็บและอักขระการเลือกอื่น ๆ ของ Zhonghe Yang ลดขนาดทั้งหมดของไฟล์และหน้าเล็ก ๆ สามารถรับความเร็วในการโหลดได้เร็วขึ้น คุณสามารถใช้ JSMIN เพื่อซูมใน JavaScript
หลีกเลี่ยงการเปลี่ยนเส้นทาง : ไม่ว่าจะเป็นการเปลี่ยนเส้นทางส่วนหัวของเซิร์ฟเวอร์การเปลี่ยนเส้นทาง JS หรือการเปลี่ยนเส้นทางองค์ประกอบ HTML เว็บไซต์ของคุณจะโหลดส่วนหัวของหน้าว่างแล้วหน้าใหม่ ผู้ใช้ใช้เวลามากขึ้นเรื่อย ๆ ในการรับหน้าเว็บที่ต้องการดังนั้นพวกเขาควรหลีกเลี่ยงค่าใช้จ่ายทั้งหมด
ลบสคริปต์ที่ซ้ำกัน : เบราว์เซอร์ที่โหลดสคริปต์เดียวกันจะเพิ่มเวลาโหลดของหน้าซึ่งเป็นปัญหาทางคณิตศาสตร์ที่ง่ายมากไฟล์มากขึ้นเท่ากันเวลาโหลดมากขึ้น ตรวจสอบเว็บไซต์ของคุณอีกครั้งเพื่อให้แน่ใจว่าคุณไม่ได้โทรหา jQuery สองครั้งหรือสามครั้งหรือสคริปต์อื่น ๆเมื่อ…นั่นเป็นจำนวนมากลองไปที่แท็บ Yslow ถัดไปก่อนที่เราจะเข้าสู่เทคนิคอื่น ๆ เพื่อเพิ่มประสิทธิภาพของเว็บไซต์ของคุณ
รูปที่ 4: ฉลากชิ้นส่วน
แท็กชิ้นส่วน (ดังแสดงในรูปที่ 4) สามารถให้ข้อมูลเชิงลึกเกี่ยวกับผลกระทบของการเพิ่มความเร็วในการโหลดเว็บไซต์ ที่นี่คุณสามารถดูว่าเอกสารปัจจุบันต้องโหลดนานแค่ไหนหากไฟล์เหล่านี้ถูกบีบอัดเวลาตอบสนองและหากถูกแคชในเครื่องของผู้ใช้และเมื่อแคชหมดอายุ นี่คือการประเมินที่ดีของเว็บไซต์การวัดประสิทธิภาพและการเพิ่มประสิทธิภาพความเร็ว ในที่สุดแท็กสถิติ (ดังแสดงในรูปที่ 4) ซึ่งแสดงคำขอ HTTP ทั้งหมดเอกสารที่ดาวน์โหลดในเวลาเดียวกันและไฟล์ที่แคช แคชเปล่าแสดงไฟล์ที่เบราว์เซอร์ต้องการดาวน์โหลดหน้าการแสดงผล ในทางกลับกันแคช Primed จะแสดงรายการไฟล์ที่มีอยู่แล้วในแคชเบราว์เซอร์ของผู้ใช้ดังนั้นจึงบันทึกคำขอของเบราว์เซอร์เพื่อไม่ต้องดาวน์โหลดไฟล์อีกครั้ง
รูปที่ 5: แท็บสถิติ