ความเร็วของเพจคือการวัดความเร็วของเนื้อหาบนเพจของคุณที่โหลด. ความเร็วของหน้ามักจะสับสนกับ “ความเร็วไซต์,” ซึ่งเป็นความเร็วหน้าเว็บสำหรับตัวอย่างการดูหน้าเว็บบนเว็บไซต์. สามารถอธิบายความเร็วของเพจได้ในทั้งสองอย่าง “เวลาในการโหลดหน้าเว็บ” (เวลาที่ใช้ในการแสดงเนื้อหาอย่างสมบูรณ์ในหน้าใดหน้าหนึ่ง) หรือ “เวลาถึงไบต์แรก” (เบราว์เซอร์ของคุณใช้เวลานานเท่าใดในการรับข้อมูลไบต์แรกจากเว็บเซิร์ฟเวอร์).

คุณสามารถประเมินความเร็วหน้าของคุณด้วย ข้อมูลเชิงลึกของ PageSpeed ​​ของ Google. คะแนนความเร็วของ PageSpeed ​​Insights รวมข้อมูลจาก CrUX (รายงานประสบการณ์ผู้ใช้ Chrome) และรายงานตัวชี้วัดความเร็วที่สำคัญสองรายการ: ระบายสีเนื้อหาแรก (เอฟซี) และ DOMContentLoaded (ดีซีแอล).

แนวทางปฏิบัติที่ดีที่สุดสำหรับ SEO

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

ความเร็วของหน้าก็มีความสำคัญต่อประสบการณ์ของผู้ใช้เช่นกัน. หน้าเว็บที่มีเวลาในการโหลดนานกว่ามักจะมีอัตราตีกลับสูงกว่าและเวลาเฉลี่ยบนหน้าเว็บต่ำกว่า. เวลาโหลดนานขึ้น ได้รับการแสดงด้วย ส่งผลเสียต่อการแปลง.

ต่อไปนี้คือวิธีบางส่วนในการเพิ่มความเร็วหน้าเว็บของคุณ:

เปิดใช้งานการบีบอัด

ขณะเขียนบทความ ซิป, แอปพลิเคชันซอฟต์แวร์สำหรับ การบีบอัดไฟล์, เพื่อลดขนาด CSS ของคุณ, HTML, และไฟล์ JavaScript ที่มีขนาดใหญ่กว่า 150 ไบต์.

ห้ามใช้ gzip กับไฟล์รูปภาพ. แทนที่, บีบอัดสิ่งเหล่านี้ในโปรแกรมเช่น Photoshop ซึ่งคุณสามารถควบคุมคุณภาพของภาพได้. ดู “ปรับภาพให้เหมาะสม” ด้านล่าง.

ลดขนาด CSS, JavaScript, และ HTML

โดยการเพิ่มประสิทธิภาพรหัสของคุณ (รวมถึงการลบช่องว่าง, เครื่องหมายจุลภาค, และอักขระที่ไม่จำเป็นอื่นๆ), คุณสามารถเพิ่มความเร็วเพจของคุณได้อย่างมาก. ลบความคิดเห็นของรหัสด้วย, การจัดรูปแบบ, และรหัสที่ไม่ได้ใช้. Google แนะนำให้ใช้ CSSNano และ UglifyJS.

ลดการเปลี่ยนเส้นทาง

ทุกครั้งที่หน้าเปลี่ยนเส้นทางไปยังหน้าอื่น, ผู้เยี่ยมชมของคุณต้องเผชิญกับเวลาเพิ่มเติมในการรอรอบการตอบสนองคำขอ HTTP ให้เสร็จสมบูรณ์. ตัวอย่างเช่น, หากรูปแบบการเปลี่ยนเส้นทางมือถือของคุณมีลักษณะเช่นนี้: “ตัวอย่าง.คอม -> www.example.com -> ม.example.com -> ม.example.com/home,” การเปลี่ยนเส้นทางเพิ่มเติมทั้งสองรายการทำให้หน้าเว็บของคุณโหลดช้าลง.

ลบ JavaScript ที่ปิดกั้นการแสดงผล

เบราว์เซอร์ต้องสร้างแผนผัง DOM โดยแยกวิเคราะห์ HTML ก่อนจึงจะสามารถแสดงหน้าได้. หากเบราว์เซอร์ของคุณพบสคริปต์ในระหว่างขั้นตอนนี้, มันต้องหยุดและดำเนินการก่อนที่จะสามารถดำเนินต่อไปได้.

Google แนะนำให้หลีกเลี่ยงและลดการใช้การบล็อก JavaScript.

ใช้ประโยชน์จากการแคชเบราว์เซอร์

เบราว์เซอร์เก็บข้อมูลจำนวนมาก (สไตล์ชีต, ภาพ, ไฟล์จาวาสคริปต์, และอื่น ๆ) เพื่อที่เมื่อผู้เยี่ยมชมกลับมาที่ไซต์ของคุณ, เบราว์เซอร์ไม่ต้องโหลดซ้ำทั้งหน้า. ใช้เครื่องมือเช่น YSlow เพื่อดูว่าคุณได้ตั้งค่าวันหมดอายุสำหรับแคชของคุณแล้วหรือยัง. แล้ว ตั้งค่าของคุณ “หมดอายุ” หัวข้อ ระยะเวลาที่คุณต้องการให้แคชข้อมูลนั้น. ในหลายกรณี, เว้นแต่ว่าการออกแบบไซต์ของคุณจะมีการเปลี่ยนแปลงบ่อยครั้ง, ปีเป็นเวลาอันสมควร. Google มีข้อมูลเพิ่มเติมเกี่ยวกับการใช้ประโยชน์จากการแคช ที่นี่.

ปรับปรุงเวลาตอบสนองของเซิร์ฟเวอร์

เวลาตอบสนองของเซิร์ฟเวอร์จะขึ้นอยู่กับปริมาณการรับส่งข้อมูลที่คุณได้รับ, ทรัพยากรที่แต่ละเพจใช้, ซอฟต์แวร์ที่เซิร์ฟเวอร์ของคุณใช้, และโซลูชันโฮสติ้งที่คุณใช้. เพื่อปรับปรุงเวลาตอบสนองของเซิร์ฟเวอร์ของคุณ, มองหาปัญหาคอขวดด้านประสิทธิภาพ เช่น การสืบค้นฐานข้อมูลที่ช้า, เส้นทางช้า, หรือหน่วยความจำไม่เพียงพอและแก้ไขได้. เวลาตอบสนองของเซิร์ฟเวอร์ที่เหมาะสมคือต่ำกว่า 200ms. เรียนรู้เพิ่มเติมเกี่ยวกับ เพิ่มประสิทธิภาพเวลาของคุณเป็นไบต์แรก.

ใช้เครือข่ายการกระจายเนื้อหา

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

ปรับภาพให้เหมาะสม

ตรวจสอบให้แน่ใจว่ารูปภาพของคุณไม่ใหญ่เกินกว่าที่ควรจะเป็น, ว่าอยู่ในรูปแบบไฟล์ที่ถูกต้อง (โดยทั่วไป PNG จะดีกว่าสำหรับกราฟิกที่มีจำนวนน้อยกว่า 16 สีในขณะที่ JPEG มักจะดีกว่าสำหรับภาพถ่าย) และถูกบีบอัดสำหรับเว็บ.

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