ไขความลับของ SEO: แนะนำสุดยอดคู่มือความเร็วเว็บไซต์

ความเร็วมีความสำคัญทั้งสำหรับผู้ใช้และ SEO: ไม่มีใครต้องการรอสักครู่เพื่อให้เว็บไซต์โหลด ผู้ใช้ต้องการออกจากไซต์ของคุณและไปหาคู่แข่งมากกว่าที่จะใช้เวลารอ คำพูดที่ว่า "เวลาคือเงิน" เป็นความจริงเช่นเดียวกับที่เบนจามิน แฟรงคลินกล่าวไว้เมื่อหลายร้อยปีก่อน เวลาก็มีความสำคัญสำหรับ Google ด้วย ความเร็วเป็นหนึ่งในปัจจัยการจัดอันดับของ Google ทุกสิ่งเท่าเทียมกัน ยิ่งเว็บไซต์เร็ว อันดับยิ่งสูง และไม่มีใครที่จะโต้แย้งว่าทุกวันนี้การมีเว็บไซต์ที่รวดเร็วไม่จำเป็น คำถามคือ จะทำให้เว็บไซต์ของคุณเร็วขึ้นได้อย่างไร? ผู้เขียนรับเชิญของเราใน Unwrapping the Secrets of SEO นี้คือ Tomek Rudzki หัวหน้าทีมวิจัยและพัฒนาที่ Elephate ผู้ชนะรางวัล “Best Small SEO Agency” จากงาน European Search Awards ประจำปี 2018 Rudzi ให้คำแนะนำในการเร่งเว็บไซต์ของคุณและชนะ

คำแนะนำที่ครอบคลุมเกี่ยวกับความเร็วของเว็บไซต์นี้มีสามบทความ อ่านโพสต์ต่อไปนี้ที่นี่: The Ultimate Guide to Website Speed ​​– ตอนที่ 2 และ The Ultimate Guide to Website Speed ​​– ตอนที่ 3

การศึกษาความเร็วเพจฟรี

1. เวลาคือเงิน

มีงานวิจัยมากมายที่ชี้ให้เห็นถึงความจริงที่ว่าเว็บไซต์ที่เร็วกว่านั้นเท่ากับรายได้ที่มากกว่า

• Pinterest ตระหนักว่าการลดเวลารอที่รับรู้ได้ส่งผลให้จำนวนการสมัครเพิ่มขึ้น 15%
• BBC สังเกตว่าเว็บไซต์โหลดทุก ๆ วินาที ผู้ใช้ 10% ออกจากเว็บไซต์
• DoubleClick โดย Google ได้ตรวจสอบว่าการลดจำนวนการโหลดหน้าเว็บจาก 19 (สุดโต่ง!) เหลือ 5 วินาที ส่งผลให้อัตราการตีกลับลดลง 35% และเซสชันนานขึ้น 70%
• การศึกษาของ Amazon เปิดเผยว่าการโหลดเว็บไซต์ช้าลงเพียงหนึ่งวินาทีอาจส่งผลให้ยอดขายลดลง 1.6 พันล้านในแต่ละปี

คุณอาจพูดว่า “โอเค แต่ฉันไม่สนใจ Pinterest, BBC หรือ Amazon; พูดคุยกับฉันเกี่ยวกับธุรกิจ ของฉัน '” Google ได้สร้าง เครื่องมือที่ดีที่คำนวณผลกระทบด้านความเร็วต่อรายได้ที่อาจเกิดขึ้น ฉันกรอกเครื่องมือด้วยข้อมูลตัวอย่าง: ผู้เข้าชมรายเดือนเฉลี่ย 1,000,000 อัตราการแปลง 3.26% โดยมีมูลค่าการสั่งซื้อเฉลี่ย $82

คุณอาจถามว่า “โทเม็ก ทำไมคุณถึงเลือกข้อมูลนี้: อัตราการแปลง 3.26 แต่ไม่ใช่ 1% หรือ 4% หรือแม้แต่ 10%” โอเค ฉันได้รับข้อมูลจาก Statista แล้ว ตาม รายงาน ของพวกเขา มูลค่าเฉลี่ยของคำสั่งซื้อสินค้าออนไลน์ในสหรัฐอเมริกาในไตรมาสที่ 4 ของปี 2017 (เป็นดอลลาร์สหรัฐฯ) คือ 82 ยิ่งไปกว่านั้น อัตราการแปลงเฉลี่ยอยู่ที่ 3.26

ดูเหมือนว่าการลดความเร็วในการโหลดเพจจาก 5 วินาทีเป็น 2.8 วินาที อาจส่งผลให้รายรับเพิ่มขึ้น 1.97 ล้านดอลลาร์ต่อปี ฟังดูเข้าท่า!

แน่นอน มันเป็นแค่เครื่องคิดเลข แต่เครื่องคิดเลขนั้นใช้ข้อมูลจริง ฉันไม่คิดว่า Google จะเพิ่มเลขศูนย์สองสามตัวที่ส่วนท้ายของค่าที่คำนวณได้เพื่อทำให้ดูจริงจัง

2. คิดถึงผู้ใช้มือถือเสมอ

ตาม Statcounter ในเดือนกุมภาพันธ์ 2018 ผู้ใช้มากกว่า 55% เชื่อมต่ออินเทอร์เน็ตผ่านมือถือหรือแท็บเล็ต – สถิติที่น่าประทับใจ!

ทุกวันนี้ หากคุณต้องการสร้างความพึงพอใจให้ผู้ใช้มือถือของคุณ คุณควร:

• ตรวจสอบให้แน่ใจว่าเว็บไซต์ของคุณทำงานได้ดีบนมือถือ (เช่น หากตอบสนองได้)
• ทำให้เว็บไซต์รวดเร็วจริงๆ

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

3. ใช้ GTMetrix

มีเครื่องมือที่ยอดเยี่ยมที่จะบอกคุณว่าคุณสามารถปรับปรุงอะไรได้บ้างเพื่อทำให้เว็บไซต์ของคุณเร็วขึ้น คุณสามารถตรวจสอบเว็บไซต์ใด ๆ ได้ฟรี คุณไม่จำเป็นต้องเป็นเจ้าของเว็บไซต์เพื่อเริ่มการตรวจสอบ (เช่น ฉันตรวจสอบแล้ว Giphy.com) เครื่องมือนี้รวมทั้งข้อมูลและคำแนะนำจาก Google PageSpeed ​​Insights และ Yahoo Slow

คุณควรเสียเวลาไปที่ https://gtmetrix.com/ แล้วพิมพ์ URL ของเว็บไซต์ของคุณ

คุณสามารถดูรายการคำแนะนำเกี่ยวกับวิธีปรับปรุงความเร็วเว็บไซต์ของคุณได้โดยคลิกที่แท็บ "PageSpeed" หรือ "YSlow"

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

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

แต่อย่าบ้าไปกับ GTMetrix

แม้ว่า GTMetrix จะเป็นเครื่องมือที่ยอดเยี่ยม แต่บางครั้งคำแนะนำก็สามารถนำคุณไปสู่การไล่ล่าห่านป่าได้ ไม่มีอะไรผิดปกติกับ GTMetrix เป็นเพียงว่าไม่มีกฎ "หนึ่งขนาดพอดี" เมื่อปรับความเร็วให้เหมาะสม – สิ่งที่ GTMetrix ตระหนักดีถึง:

ตัวอย่างเช่น GTMetrix แนะนำให้คุณตั้งค่าการแคชของเบราว์เซอร์สำหรับทรัพยากรที่จัดเก็บไว้ในเซิร์ฟเวอร์ Google Analytics หรือ Facebook แหล่งข้อมูลเหล่านี้อยู่นอกเหนือการควบคุมของคุณ คุณไม่สามารถทำอะไร ได้ นักพัฒนาของ Google และ Facebook ตัดสินใจว่า ไม่ว่าด้วยเหตุผลใดก็ตาม ทรัพยากรเหล่านี้ไม่ควรถูกแคชเป็นเวลานาน

แน่นอนว่ามีเครื่องมือมากมายที่คล้ายกับ GTMetrix เช่น WebPageTest (ซึ่งมีประสิทธิภาพมากกว่า GTMetrix มาก) อย่างไรก็ตาม ฉันตัดสินใจแนะนำคุณให้รู้จักกับ GTMetrix ด้วยเหตุผลสองประการ:

1. GTMetrix นั้นใช้งานง่ายกว่า
2. WebPageTest ไม่ได้ให้คำแนะนำที่ชัดเจนเกี่ยวกับสิ่งที่ต้องทำ

ฉันอยากจะพูดถึงเครื่องมือที่น่าสนใจอีกอย่างหนึ่ง – Google Lighthouse (หากคุณใช้ Chrome แสดงว่าคุณได้ติดตั้งไว้แล้ว) Kamila Spodymek จาก Elephate เขียนบทความดีๆ เกี่ยวกับ SEO ที่จะได้รับประโยชน์จากตัวชี้วัดประสิทธิภาพของ Google Lighthouse ได้ อย่างไร อ่านดีแน่นอน!

4. ใช้การบีบอัด GZIP

มีกฎข้อหนึ่งที่คุณควรรู้: หากทรัพยากรมีน้ำหนักน้อยกว่า เบราว์เซอร์สามารถดาวน์โหลดได้เร็วกว่ามาก ซึ่งจะทำให้การโหลดหน้าเว็บเร็วขึ้น ผู้ใช้มือถือของคุณจะได้รับประโยชน์จากมันจริงๆ

คุณลดขนาดไฟล์ข้อความ (เช่น HTML, SVG, CSS และ JS) ได้โดยใช้การบีบอัด GZIP เป็นเรื่องปกติที่การบีบอัด GZIP จะบันทึกขนาดทรัพยากรได้ 70-80% โดยไม่สูญเสียข้อมูลใดๆ มันเป็นเรื่องใหญ่จริงๆ!

ไปที่ https://checkgzipcompression.com/ เพื่อตรวจสอบจำนวนกิโลไบต์ที่คุณสามารถบันทึก (หรือบันทึกไว้แล้ว!) โดยใช้ GZIP ในกรณีของ Searchmetrics.com GZIP ถูกเปิดใช้งาน (อนุญาตให้บันทึก 83% ของขนาดหน้า) ฟังดูเข้าท่า!

แต่ระวัง! บางครั้ง เว็บมาสเตอร์อาจทำผิดพลาดและบีบอัดไฟล์สแตติกทั้งหมด รวมทั้ง JPEG, รูปภาพ PNG และ PDF ให้ฉันอ้างอิงเอกสารของ Yahoo Developer Network : "ไฟล์รูปภาพและ PDF ไม่ควร gzipped เพราะถูกบีบอัดแล้ว การพยายาม gzip ไม่เพียงแต่ทำให้เสีย CPU เท่านั้น แต่ยังสามารถเพิ่มขนาดไฟล์ได้อีกด้วย”

หากคุณต้องการบันทึกกิโลไบต์เพิ่มเติม คุณควรย่อ ไฟล์ HTML, JS และ CSS ของคุณ

5. ให้บริการภาพที่ปรับขนาด

ความจริงที่ว่าเว็บไซต์จะโหลดช้ามาก (โดยเฉพาะบนโทรศัพท์มือถือ!) เนื่องจากมีรูปภาพจำนวนมาก

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

อันดับแรก มาพูดถึงการปรับขนาดภาพกันก่อน สมมติว่ามีภาพขนาดย่อขนาด 220×220 สิบภาพต่อหน้า แต่คุณอัปโหลดภาพขนาด 800×800 ไปยังเซิร์ฟเวอร์ คุณควรให้บริการภาพที่ปรับขนาดแล้วแก่ผู้ใช้หรือบังคับให้เบราว์เซอร์ปรับขนาด "ทันที" หรือไม่?

คำตอบนั้นง่าย หากคุณไม่ปรับขนาดรูปภาพบนฝั่งเซิร์ฟเวอร์ เบราว์เซอร์จะต้องดาวน์โหลดกิโลไบต์มากกว่าที่จำเป็น เปล่าประโยชน์เพราะภาพจะถูกปรับขนาดต่อไป นอกจากนี้ยังเป็นงานเพิ่มเติมสำหรับ GPU ในฝั่งไคลเอ็นต์ ไม่ต้องพูดถึงความเร็วในการโหลดหน้าจะประสบ

6. บีบอัดภาพของคุณ

ทีนี้ มาพูดถึงการบีบอัดภาพกัน นี่เป็นอีกหนึ่งเทคนิคที่จำเป็นสำหรับเว็บสมัยใหม่

โดยทั่วไป การบีบอัดภาพมีสองประเภท:

• Lossless (ทำงานได้ดีจริงๆ คุณสามารถมั่นใจได้ว่าคุณภาพจะไม่ได้รับผลกระทบ)

• สูญเสีย (มักจะทำให้ภาพมีน้ำหนักเบามากขึ้น แต่ตามชื่อ: คุณสูญเสียคุณภาพบางส่วน)

คำถามเกิดขึ้น: การบีบอัดแบบใดดีกว่า: การสูญเสียหรือการสูญเสีย?

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

7. อย่าบังคับให้ผู้เยี่ยมชมมือถือของคุณดาวน์โหลดรูปภาพ Full HD!

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

มาดูตัวอย่าง Elephate.com กัน เรามีรูปภาพขนาดใหญ่ (2600×1463 พิกเซล) ของสมาชิกบริษัทของเราที่ด้านบนของหน้าแรก (522kb)

ใช้งานได้ดีสำหรับเดสก์ท็อป พวกเขาสามารถดาวน์โหลดได้เร็วมาก แต่สำหรับผู้ใช้มือถือ เราใช้พารามิเตอร์ “srcset” ของ HTML ด้วยการใช้งานสิ่งนี้ ผู้ใช้มือถือจะดาวน์โหลดภาพที่เล็กกว่ามาก (พวกเขาไม่ต้องการภาพที่ใหญ่กว่านี้) ซึ่งส่งผลดีต่อเวลาในการโหลดหน้าเว็บ

ผู้ใช้เดสก์ท็อปจะไม่ต้องทนทุกข์เพราะจะได้เห็นภาพแบบ Full HD แต่ผู้ใช้มือถือจะได้รับประโยชน์จากมันจริงๆ