การเพิ่มประสิทธิภาพความเร็วหน้าเว็บ: วิธีปรับปรุงเวลาในการโหลดของคุณ

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

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

สารบัญ

1. ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับความเร็วของหน้า
2. เครื่องมือใดที่คุณควรใช้วัดความเร็วหน้า
3. ใช้เวลานานเท่าใดในการโหลดเว็บไซต์
4. วิธีการเพิ่มประสิทธิภาพความเร็วของหน้า
5. มาตรการ OnPage สำหรับเว็บไซต์ที่รวดเร็ว
6. การเพิ่มประสิทธิภาพความเร็วหน้าอัตโนมัติ

ทุกสิ่งที่คุณจำเป็นต้องรู้เกี่ยวกับความเร็วของหน้า

เหตุใดเวลาในการโหลดเว็บไซต์จึงสำคัญ

มีสาเหตุหลายประการที่ทำให้เวลาในการโหลดที่รวดเร็วมีความสำคัญมาก:

1. ประสบการณ์ผู้ใช้ที่เป็นบวก: Google เชื่อว่าเวลาในการโหลดที่นานขึ้นจะส่งผลกระทบอย่างรุนแรงต่ออัตราการตีกลับ อันที่จริง การเพิ่มเวลาในการโหลดจาก 1 เป็น 6 วินาทีสามารถเพิ่มอัตราตีกลับได้ถึง 106% ซึ่งเป็นเหตุผลว่าทำไมจึงเป็นหนึ่งใน Core Web Vitals สำหรับประสิทธิภาพ (ดูด้านล่าง)

2. ปัจจัยการจัดอันดับ SEO: สำหรับ Google และเครื่องมือค้นหาอื่นๆ ประสบการณ์การใช้งานที่ดีของผู้ใช้เป็นปัจจัยสำคัญในการกำหนดคุณภาพของเว็บไซต์ นี่คือเหตุผลที่ Google ใช้ความเร็วเพจเป็นหนึ่งใน Core Web Vitals ดังนั้น ยิ่งไซต์ของคุณโหลดเร็วเท่าไหร่ โอกาสของคุณในการจัดอันดับก็จะยิ่งสูงขึ้นเท่านั้น

3. การเพิ่มประสิทธิภาพอัตราการแปลง: ความล่าช้าหนึ่งวินาทีในการโหลดสามารถลดการแปลงได้ถึงเจ็ดเปอร์เซ็นต์ตามการศึกษานี้ นี้อาจฟังดูไม่สำคัญนักในตอนแรก แต่ถ้าร้านค้าออนไลน์ของคุณสร้างรายได้ 1,000 ยูโรต่อวัน ความล่าช้าในการโหลดหนึ่งวินาทีอาจส่งผลให้สูญเสีย 70 ยูโรต่อวัน ประมาณ 2,100 ต่อเดือน หากคุณคำนวณสิ่งนี้เป็นประจำทุกปี ความเร็วของเพจที่ช้าคือตัวทำลายมูลค่าการซื้อขายที่แท้จริง

4. การรวบรวมข้อมูล: เว็บไซต์ที่โหลดช้าจะถูกรวบรวมข้อมูลช้าลงและไม่ได้รับการรวบรวมข้อมูลอย่างเข้มข้น เนื่องจาก Googlebot มีงบประมาณจำกัดสำหรับการรวบรวมข้อมูลเท่านั้น เวลาในการโหลดที่เร็วขึ้นอาจหมายความว่ามีการรวบรวมข้อมูลไซต์ของคุณบ่อยขึ้น ซึ่งหมายความว่าเนื้อหาของคุณในดัชนีของ Google จะมีความเกี่ยวข้องมากขึ้นด้วย

ความเร็วของหน้าวัดได้อย่างไร?

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

• Time to First Byte (TTFB) : เวลาระหว่างเว็บไซต์ที่ถูกเรียกและไบต์แรกที่โหลดโดยเว็บเซิร์ฟเวอร์
• First Contentful Paint (FCP) : เวลาที่องค์ประกอบการแสดงผลแสดงในเบราว์เซอร์เป็นครั้งแรก
• First Meaningful Paint (FMP) : เวลาที่ผู้ใช้รู้สึกว่ามีการโหลดเว็บไซต์
• Time to Interactive (TTI) : เวลาที่เว็บไซต์ได้รับการแสดงและพร้อมสำหรับการป้อนข้อมูลของผู้ใช้

ในบทความนี้ คุณสามารถค้นหาวิธีวัดความเร็วของหน้าได้อย่างแม่นยำ

คุณควรใช้เครื่องมือใดในการวัดความเร็วของหน้า

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

PageSpeed ​​Insights

เครื่องมือ Google สำหรับการวัดเวลาในการโหลดนี้ได้รับการอัปเดตและปรับปรุงอย่างต่อเนื่อง Pagespeed Insights เวอร์ชันล่าสุดใช้ Lighthouse ซึ่งเป็นเครื่องมือเพิ่มประสิทธิภาพเว็บไซต์ซึ่งมีให้ใช้งานเป็นส่วนขยายในเบราว์เซอร์ Chrome ด้วย ใช้ข้อมูลจาก CrUX ซึ่งเป็นรายงานประสบการณ์ผู้ใช้ Chrome

หลังจากป้อนโดเมนของคุณ เครื่องมือจะคำนวณคะแนนความเร็วระหว่าง 0 ถึง 100 PageSpeed ​​Insights จะแยกความแตกต่างระหว่างคะแนนสำหรับอุปกรณ์เคลื่อนที่และคะแนนสำหรับเดสก์ท็อป คะแนนมือถือถูกใช้เป็นมาตรฐาน และมักจะต่ำมาก เนื่องจาก Google ต้องการจูงใจผู้ให้บริการเว็บไซต์ให้เพิ่มประสิทธิภาพเว็บไซต์ของตนสำหรับรุ่นมือถือโดยเฉพาะ ด้านล่างคะแนนความเร็ว การวัดแต่ละรายการจะแสดงขึ้น สามารถใช้รหัสสีเพื่อระบุความร้ายแรงของปัญหาได้

รูปที่ 1: หน้าเริ่มต้นของ Google PageSpeed ​​Insights

Google Analytics

หากคุณวิเคราะห์เว็บไซต์ของคุณด้วย Google Analytics คุณจะพบสถิติเกี่ยวกับเวลาในการโหลดในส่วน "ประสิทธิภาพ" คลิกที่ "ความเร็วของเว็บไซต์" หากคุณได้ติดตั้งการติดตามอีคอมเมิร์ซ คุณสามารถประเมินโดยตรงว่าความเร็วในการโหลดส่งผลต่อการแปลงอย่างไร

Google Search Console

ใน Google Search Console คุณจะพบเวลาในการโหลดใต้เมนู "การรวบรวมข้อมูล" คุณจะเห็นจำนวนกิโลไบต์ที่ดาวน์โหลดต่อวัน และระยะเวลาที่ Googlebot ต้องการในการดาวน์โหลดไซต์ใดไซต์หนึ่งของคุณเป็นมิลลิวินาที วิธีนี้ช่วยให้คุณค้นพบปัญหากับเวลาในการโหลดเว็บไซต์ของคุณได้อย่างง่ายดาย

ไรต์

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

นอกจากนี้ยังมีรายงาน "Core Web Vitals" แยกต่างหาก ซึ่งแสดงให้เห็นว่าไซต์ของคุณให้คะแนนสำหรับตัวบ่งชี้ประสบการณ์หลักของ Google อย่างไร ซึ่งรวมถึงความเร็วในการโหลด (ซึ่งวัดโดย 'Largest Contentful Paint') พร้อมด้วยการโต้ตอบ ('First Input Delay') และ ความเสถียรของภาพ ('Cumulative Layout Shift')

อีสโลว์

Yslow ได้รับการพัฒนาโดย Yahoo! คุณสามารถใช้เป็น bookmarklet เครื่องมือสำหรับศูนย์คำสั่งหรือเป็นส่วนขยายของเบราว์เซอร์ กฎของความเร็วเป็นไปตามข้อกำหนดของ Yahoo! เครื่องมือนี้ยังน่าสนใจสำหรับผู้ใช้ขั้นสูงเนื่องจากฟังก์ชันบรรทัดคำสั่ง โปรดทราบว่าต้องติดตั้งปลั๊กอิน Firebug เพื่อใช้ปลั๊กอินผ่าน Firefox

รูปที่ 2: Yslow

พิงดอม

คุณต้องลงทะเบียนเพื่อใช้งาน Pingdom.com มันแสดงเวลาในการโหลดของคุณด้วยไดอะแกรมและสถิติ ซึ่งทำให้การประเมินง่ายขึ้น คุณสามารถดูองค์ประกอบได้อย่างง่ายดาย

รูปที่ 3: Pingdom

WebPageTest.org

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

ตัวไหนโหลดเร็วกว่า

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

ต้องใช้เวลานานแค่ไหนกว่าจะโหลดเว็บไซต์ได้?

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

คุณไม่มีอิทธิพลเหนือปัจจัยเหล่านี้:

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

คุณสามารถมีอิทธิพลต่อปัจจัยเหล่านี้:

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

24 วิธีในการเพิ่มประสิทธิภาพความเร็วของหน้า

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

1. สร้างเวลาการเชื่อมต่อที่รวดเร็ว

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

2. ใช้ CDN เพื่อการเข้าถึงทั่วโลก

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

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

ในการใช้ CDN คุณต้องลงทะเบียนกับผู้ให้บริการ Cloudflare มีแผนบริการฟรีบางส่วน แต่คุณควรตรวจสอบให้แน่ชัดว่าข้อเสนอนี้ฟรีตามเงื่อนไขใดบ้าง ผู้ให้บริการที่คิดค่าธรรมเนียมมักจะคิดค่าบริการตามปริมาณข้อมูลที่ใช้รายเดือนผ่านเครือข่าย

ผู้ให้บริการที่รู้จักกันดีคือ:

• Amazon Cloudfront
• คลาวด์แฟลร์
• Stackpath
• wao.io

3. เพิ่มประสิทธิภาพเว็บเซิร์ฟเวอร์ของคุณสำหรับความเร็วของหน้า

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

4. ตรวจจับคอขวดในโครงสร้างพื้นฐาน

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

สิ่งสำคัญคือต้องตระหนักถึงปัญหาคอขวดเหล่านี้เพื่อให้สามารถโต้ตอบได้อย่างรวดเร็ว โซลูชันโฮสติ้งจำนวนมากเสนอตัวชี้วัดเพื่อตรวจสอบการใช้งานเซิร์ฟเวอร์ จากการวัดที่นำเสนอข้างต้น “Time to First Byte” ซึ่งสามารถวัดได้ด้วยแพลตฟอร์ม Ryte ภายใต้ Web Performance ก็มีประโยชน์เช่นกัน หากเพิ่มขึ้นอย่างมาก แสดงว่าอาจมีปัญหากับเว็บเซิร์ฟเวอร์

5. ใช้การแคชฝั่งเซิร์ฟเวอร์

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

ในการตั้งค่าของซอฟต์แวร์เว็บเซิร์ฟเวอร์ - Apache HTTP Server และ Nginx มักใช้บ่อยที่สุด - สามารถเปิดใช้งานและตั้งค่าแคชฝั่งเซิร์ฟเวอร์ได้ หากคุณไม่มีความรู้ที่จำเป็น คุณสามารถสอบถามผู้ให้บริการโฮสติ้งของคุณ หรือให้แคชและมาตรการ PageSpeed ​​อื่นๆ ดำเนินการโดยบริการคลาวด์อัตโนมัติ (ดูด้านล่าง)

6. ใช้การแคชเบราว์เซอร์

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

ปลั๊กอินที่เป็นไปได้สำหรับการแคชเบราว์เซอร์ด้วย WordPress เช่น:

• WP Rocket
• W3 แคชทั้งหมด
• WP แคชที่เร็วที่สุด

การเปิดใช้งานแคชเบราว์เซอร์ด้วยตนเองเกิดขึ้นจากการปรับไฟล์ .htaccess ดังนั้น คุณสามารถเปิดสองโมดูลของเซิร์ฟเวอร์ Apache: mod_headers และ mod_expires

หากคุณใช้ mod_headers ไฟล์ .htaccess จะต้องกรอกด้วยรหัสต่อไปนี้ (ที่มา – GitHub):

<FilesMatch ".(css|js|gif|pdf|jpg|jpeg|png)$">
ชุดส่วนหัว Cache-Control "max-age=2592000, สาธารณะ"
</FilesMatch>

วงเล็บเหลี่ยมเกี่ยวข้องกับรูปแบบไฟล์ที่จะวางในแคช ในเวลาเดียวกัน ระยะเวลาของแคชจะได้รับด้วย "อายุ" หน่วยเป็นวินาที ในตัวอย่างนี้ เบราว์เซอร์จะบันทึกแคชไว้เป็นเวลา 30 วัน

หากคุณต้องการใช้ mod_expires สำหรับการแคชเบราว์เซอร์ ไฟล์ .htaccess จะถูกขยายด้วยบรรทัดต่อไปนี้:

## แคชหมดอายุ ##
<IfModule mod_expires.c>
หมดอายุActive On
ExpiresByType image/jpg "รับสิทธิ์เพิ่ม 1 ปี"
ExpiresByType image/jpeg "การเข้าถึงบวก 1 ปี"
ExpiresByType image/gif "รับสิทธิ์เพิ่ม 1 ปี"
ExpiresByType image/png "การเข้าถึงบวก 1 ปี"
ExpiresByType text/css "การเข้าถึงบวก 1 เดือน"
ExpiresByType text/html "การเข้าถึงบวก 1 เดือน"
แอปพลิเคชัน ExpiresByType/pdf "การเข้าถึงบวก 1 เดือน"
ExpiresByType text/x-javascript "การเข้าถึงบวก 1 เดือน"
แอปพลิเคชัน ExpiresByType/x-shockwave-flash "การเข้าถึงบวก 1 เดือน"
ExpiresByType image/x-icon "การเข้าถึงบวก 1 ปี"
ExpiresDefault "การเข้าถึงบวก 1 เดือน"
</IfModule>
## แคชหมดอายุ

วิธีนี้อนุญาตให้กำหนดกรอบเวลาที่ไม่ซ้ำกันแยกกันสำหรับไฟล์แต่ละประเภท

7. ใช้การบีบอัด GZip

ไฟล์สามารถประมวลผลและส่งได้เร็วที่สุดหากไฟล์มีขนาดเล็กที่สุด นอกจากนี้ยังใช้กับรหัสที่แสดงเว็บไซต์ในเบราว์เซอร์ของผู้ใช้ เช่นเดียวกับไฟล์ zip รหัสนี้สามารถบีบอัดและทำให้มีขนาดลดลงได้ ข้อมูลที่บีบอัดจะถูกแยกออกในเบราว์เซอร์

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

ฉันจะบีบอัดไฟล์ด้วย gzip ได้อย่างไร

เซิร์ฟเวอร์ Apache เป็นเซิร์ฟเวอร์ที่ใช้บ่อยที่สุดสำหรับเว็บไซต์ ดังนั้นตัวอย่างต่อไปนี้คือสำหรับ Apache

ใช้โมดูลที่แตกต่างกันสองโมดูล: mod_deflate และ mod_gzip

1. โมดูล mod_deflate มักจะติดตั้งไว้ล่วงหน้า ด้วยคำสั่งคอนโซลต่อไปนี้ คุณสามารถตรวจสอบว่ามีอยู่แล้วหรือไม่:

sudo apachectl -t -D DUMP_MODULES | grep deflate

หากคุณได้รับผลลัพธ์ "deflate_module (shared)" แสดงว่าติดตั้ง mod_deflate แล้ว หรือติดต่อโฮสต์ของคุณ

2. ตอนนี้เปิด "httpd.conf" ซึ่งเป็นไฟล์กำหนดค่า Apache ปกติจะอยู่ในโฟลเดอร์ “/etc/httpd/conf/” คุณเพิ่มบรรทัดต่อไปนี้:

AddOutputFilterByType ลบล้างข้อความ/ข้อความข้อความ/ข้อความ html/ข้อความธรรมดา/ข้อความ xml/แอปพลิเคชัน css/x-javascript
แอปพลิเคชัน/javascript

สิ่งนี้บ่งชี้ว่าข้อความและโค้ด HTML, CSS และ JavaScript ถูกบีบอัดด้วย GZip บันทึกไฟล์และรีสตาร์ทเว็บเซิร์ฟเวอร์ Apache จากนี้ไปข้อมูลจะถูกบีบอัดโดย Apache

8. เปิดใช้งาน HTTP/2

โดยค่าเริ่มต้น ไฟล์หน้าเว็บทั้งหมด (เช่น รูปภาพและสคริปต์) จะถูกโหลดโดยใช้โปรโตคอล HTTP/1.1 ไฟล์เหล่านี้ถูกดาวน์โหลดทีละไฟล์ผ่านการเชื่อมต่อที่แยกจากกัน

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

ดูข้อมูลเพิ่มเติมในบทความนี้: วิธีปรับปรุงความเร็วในการโหลดหน้าเว็บด้วย HTTP/2: คู่มือสำหรับผู้เริ่มต้น

9. บีบอัดภาพ

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

หากคุณสามารถลดขนาดไฟล์ของรูปภาพได้อย่างมาก คุณสามารถเพิ่มความเร็วของเพจได้อย่างมาก เราได้เขียนบทความเกี่ยวกับการบีบอัดภาพบน Ryte อย่างละเอียดแล้ว นี่คือบทสรุป

10. ปรับภาพทั้งหมดให้เหมาะสม

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

โดยทั่วไปแล้ว รูปภาพและกราฟิกคุณภาพสูงควรได้รับการพิจารณาว่าเป็นไฟล์ JPEG และกราฟิกและกราฟิกที่มีขนาดเล็กกว่าและกราฟิกที่มีสีหรือความโปร่งแสงน้อยควรได้รับการพิจารณาเป็นไฟล์ PNG

ขั้นตอนเพิ่มเติม:

• บีบอัดรูปภาพของคุณก่อนที่จะอัปโหลดบนเว็บไซต์ของคุณด้วยโปรแกรมประมวลผลรูปภาพ เช่น Gimp หรือ Adobe Photoshop ทั้งสองโปรแกรมมีฟังก์ชัน "บันทึกสำหรับเว็บ" สำหรับผู้เริ่มต้น ด้วยวิธีนี้ ขนาดไฟล์จะได้รับการปรับให้เหมาะสมโดยอัตโนมัติ ด้วยเครื่องมือต่างๆ เช่น kraken.io หรือ PNGGauntlet คุณสามารถลดขนาดไฟล์ได้โดยลบข้อมูลเพิ่มเติม
• ขนาดรูปภาพที่เกี่ยวข้องระบุไว้ในซอร์สโค้ด: หากเบราว์เซอร์ต้องคำนวณขนาดของกราฟิกเอง เวลาในการโหลดจะเพิ่มขึ้น ขนาดที่กำหนดควรสอดคล้องกับขนาดดั้งเดิมของภาพที่จัดเก็บไว้ในเซิร์ฟเวอร์ คุณยังสามารถกำหนดข้อมูลเกี่ยวกับขนาดรูปภาพผ่าน CSS
• ลบเมตาแท็กและข้อมูล EXIF ​​​​ออก: ตัวอย่างเช่น หากคุณใช้รูปภาพจากกล้องหรือสมาร์ทโฟนของคุณเอง รูปภาพเหล่านั้นมีข้อมูลเพิ่มเติมมากมาย เช่น ตำแหน่ง กล้องที่ใช้ และข้อมูลอื่นๆ ด้วยเครื่องมือเช่น tinypng คุณสามารถลบสิ่งเหล่านี้และประหยัดพื้นที่จัดเก็บ

11. ใช้รูปแบบภาพ WebP

ด้วย WebP Google ได้สร้างรูปแบบรูปภาพใหม่ที่สามารถบีบอัดรูปภาพทั้งแบบไม่สูญเสีย (คล้ายกับ PNG) และการสูญเสีย (คล้ายกับ JPEG) มีประสิทธิภาพมากกว่ารูปแบบเก่า

เบราว์เซอร์บางตัวยังไม่รองรับ WebP ดังนั้นจึงควรจัดเก็บทางเลือกอื่นสำหรับไฟล์ WebP ในซอร์สโค้ดและติดตั้งสวิตช์ ตัวอย่างเช่น

<รูปภาพ>
<source type="image/webp">
<source type="image/jpeg">
<img src="img/testbild2.jpg" alt="Fallback-Bild">
</image>

12. แยกแยะระหว่างไซต์เดสก์ท็อปและมือถือ

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

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

นอกจากนี้ เนื่องจากรูปแบบหน้าจอ รูปภาพจะแสดงในความละเอียดที่แตกต่างจากบนเดสก์ท็อป ดังนั้นจึงควรแยกความแตกต่างระหว่างสื่อที่ส่งออกกับการสร้างรูปแบบภาพสองรูปแบบ

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

13. ตั้งค่าการโหลดแบบขี้เกียจ

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

อย่างไรก็ตาม รูปภาพจำนวนมากที่โหลดด้วยวิธีนี้จะมองเห็นได้เฉพาะผู้ใช้เท่านั้นเมื่อเขาเลื่อนหน้าลง ดังนั้นจึงไม่จำเป็นที่โหลดไว้เมื่อผู้ใช้ดูที่ส่วน "ครึ่งหน้าบน"

ด้วยวิธีการที่เรียกว่า "Lazy Loading" คุณสามารถมั่นใจได้ว่ารูปภาพด้านล่างโฟลเดอร์จะโหลดได้ก็ต่อเมื่อปรากฏบนวิวพอร์ตจริงๆ เท่านั้น

14. ล้างซอร์สโค้ด

เมื่อมีการเรียก URL ของเว็บไซต์ ลูกค้าหรือเบราว์เซอร์จะติดตามซอร์สโค้ดของเอกสาร HTML ทีละบรรทัด อ่านอักขระว่างหรือตัวแบ่งบรรทัดทั้งหมด อักขระว่างที่ไม่จำเป็นเพียงตัวเดียวจะไม่ส่งผลเสียต่อประสิทธิภาพของเว็บไซต์ของคุณ

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

ดังนั้น คุณควรย่อซอร์สโค้ดของคุณให้เล็กที่สุด:

• ลบความคิดเห็นที่ไม่จำเป็นทั้งหมด
• ลบอักขระว่างที่ไม่จำเป็นทั้งหมด
• ลบการจัดรูปแบบที่ไม่จำเป็น ตัวอย่างเช่น หากพบการจัดรูปแบบที่ไม่มีเนื้อหาในซอร์สโค้ด เช่น “<strong></strong>”

เพื่อหลีกเลี่ยงไม่ให้ซอร์สโค้ดฟุ่มเฟือย คุณควรแทรกข้อความที่จัดรูปแบบเป็น HTML ในเว็บไซต์ ใช้โปรแกรมแก้ไข CMS หรือแทรกแล้วจัดรูปแบบข้อความเป็นข้อความธรรมดา หากคุณรวมข้อความจาก Word หรือโปรแกรม Office อื่นใน CMS โดยตรง จะส่งผลให้ซอร์สโค้ดฟุ่มเฟือย

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

15. ลดสคริปต์ภายนอก

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

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

เคล็ดลับเพิ่มเติม:

• ใช้โค้ดติดตามแบบอะซิงโครนัสเท่านั้น จะไม่โหลดจนกว่าไซต์จะได้รับการแสดงผลและไม่ขัดขวางการโหลดไซต์
• ใช้เครื่องมือเช่น Google Tag Manager ซึ่งหมายความว่าต้องรวมข้อมูลโค้ดเพียงชุดเดียวในซอร์สโค้ดสำหรับโค้ดติดตามจำนวนหนึ่ง และเวลาในการโหลดจะไม่ได้รับอิทธิพลอย่างมาก
• ถ้าเป็นไปได้ คุณควรเก็บสคริปต์ไว้บนเว็บเซิร์ฟเวอร์ของคุณและอย่ารวมสคริปต์จากภายนอก
• ลดจำนวน iFrame

16. Outsource JavaScript และ CSS

JavaScript เป็นภาษาสคริปต์ที่สามารถเรียกใช้ฟังก์ชันในเบราว์เซอร์และบนคอมพิวเตอร์ไคลเอนต์ได้ CSS (Cascading Style Sheets) สามารถใช้เพื่อกำหนดรูปแบบและการนำเสนอสำหรับเว็บไซต์ องค์ประกอบเหล่านี้ต้องใช้ซอร์สโค้ดจำนวนมาก ซึ่งต้องโหลดอีกครั้งทุกครั้งที่มีการร้องขอ URL ต้องใช้เวลา

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

วิธีการเอาต์ซอร์ส JavaScript:

ให้ซอร์สโค้ดของเว็บไซต์ของคุณแสดงพร้อมกับตัวแก้ไข ถัดไป ตัดไฟล์ JS ทั้งหมดออกและสร้างไฟล์ข้อความใหม่ที่คุณแทรกข้อมูลโค้ดทั้งหมด บันทึกไฟล์เป็น main.js และเก็บไว้ในเซิร์ฟเวอร์ของคุณในโฟลเดอร์ที่พบไฟล์ HTML อื่นๆ ทั้งหมด

ในโค้ด HTML ของเว็บไซต์ ให้ลบคำสั่งต่อไปนี้:

และ

แลกเปลี่ยนคำสั่งที่ถูกลบด้วยคำสั่งนี้:

17. ย่อขนาดไฟล์ CSS และ JavaScript

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

ข้อมูลโค้ดที่มีอักขระว่าง:

โค้ด CSS และอักขระว่าง:

ความสามารถในการอ่านลดลงอย่างมากโดยการนำช่องว่างและความคิดเห็นออก ตามหลักการแล้วคุณควรทำงานกับสองเวอร์ชัน: เวอร์ชันที่มีช่องว่างและความคิดเห็นทั้งหมดที่คุณสามารถแก้ไขได้ และเวอร์ชันสำหรับแสดงบนเว็บไซต์

เพื่อที่คุณจะได้ไม่ต้องทำซ้ำทุกการเปลี่ยนแปลงที่คุณทำ คุณยังสามารถใช้โปรแกรมเพื่อ "ย่อ" ได้ เป็นต้น คุณยังสามารถใช้เครื่องมือพิเศษเพื่อลดขนาด JavaScript และ CSS เครื่องมือที่แนะนำ ได้แก่ :

• YUI Compressor หรือ cssmin.js สำหรับไฟล์ CSS
• ปิดคอมไพเลอร์สำหรับ JavaScript

18. โหลด JavaScript และ CSS ในตอนท้าย

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

ตำแหน่งในอุดมคติสำหรับไฟล์ CSS จึงอยู่ในพื้นที่ <head> ของเว็บไซต์ อย่างไรก็ตาม คุณควรรวม JavaScript ไว้ในส่วนท้ายของเว็บไซต์

การรวมไฟล์ที่เป็นไปได้อาจปรากฏเป็น:

19. ใช้ CSS3 สำหรับพื้นหลัง

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

วิธีแก้ปัญหาคือการสร้างองค์ประกอบกราฟิกทั้งหมด ยกเว้นภาพถ่ายผ่าน CSS3 ด้วยวิธีนี้ คุณจะลดซอร์สโค้ด ในเวลาเดียวกัน ไฟล์จะแสดงด้วยคุณภาพสูงเหมือนกันบนอุปกรณ์ปลายทางทั้งหมด

20. ใช้การดึงข้อมูลล่วงหน้าและการแสดงผลล่วงหน้า

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

คุณต้องปรับซอร์สโค้ดเพื่อให้สามารถดึงไฟล์ล่วงหน้าได้ ในกรณีนี้ องค์ประกอบที่ต้องการจะถูกนำหน้าด้วยแอตทริบิวต์ rel=”prefetch”

ตัวอย่าง:

<link rel="prefetch" href="//mysite.com/example-image.jpg">

ในที่นี้ ตัวอย่างจะถูกโหลดซ้ำก่อนที่จะโหลดไซต์อื่น เวลาในการโหลดในมุมมองไซต์ใหม่จึงสั้นลง

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

ในการใช้งานการแสดงผลล่วงหน้า คุณต้องแทรกบรรทัดต่อไปนี้ลงในซอร์สโค้ดของเว็บไซต์เพื่อเข้าชม:

<link rel="prerender" href="//prerendering-site.com/index">

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

การเปลี่ยนเส้นทาง 301 นั้นยอดเยี่ยมสำหรับการหลีกเลี่ยงเนื้อหาที่ซ้ำกันหรือเปลี่ยนเส้นทาง URL เก่าไปยัง URL ใหม่หลังจากเปิดใหม่อีกครั้ง อย่างไรก็ตาม การเปลี่ยนเส้นทางแต่ละครั้งทำให้เวลาในการโหลดเพิ่มขึ้น ไม่ใช่เรื่องสำคัญ แต่ทุกครั้งที่เบราว์เซอร์พบการเปลี่ยนเส้นทาง จะต้องดึง URL ใหม่ และเบราว์เซอร์ต้องรอจนกว่าจะมีการส่งคำขอ http หากมีการเปลี่ยนเส้นทาง 310 ครั้งติดต่อกัน เวลาในการโหลดจะเพิ่มขึ้นอย่างมาก

>> การเปลี่ยนเส้นทาง: คู่มือสำหรับผู้เริ่มต้นใช้งาน <<

เพื่อหลีกเลี่ยงการเปลี่ยนเส้นทางมากเกินไป คุณควรจัดทำเอกสารโครงสร้าง URL หรือการพัฒนา URL ใหม่ เช่นเดียวกับการเปลี่ยนเส้นทาง 301 ที่สร้างขึ้น หากในการวิเคราะห์เว็บไซต์ของคุณ คุณพบว่ามีการส่งต่อหลายครั้ง คุณควรแนะนำการส่งต่อครั้งแรกโดยตรงไปยังเป้าหมายของลิงก์จริงโดยไม่ต้องอ้อมไปยังการเปลี่ยนเส้นทางอย่างน้อยหนึ่งรายการ

22. หลีกเลี่ยงคำขอที่ไม่ดี

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

คุณสามารถหลีกเลี่ยงคำขอที่ไม่ถูกต้องได้โดยแก้ไขไฟล์ที่ไม่ถูกต้องและระบุเส้นทางที่ถูกต้องหรือส่งต่อไปยังไฟล์ใหม่

23. ใช้ AMP

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

CMS จำนวนมากเช่น WordPress อนุญาตให้ใช้ AMP ได้โดยใช้ปลั๊กอิน จนถึงขณะนี้ AMP ยังใช้กับร้านค้าออนไลน์ไม่ได้ อย่างไรก็ตามสิ่งนี้ถูกคาดการณ์โดยนักพัฒนา

แหล่งข้อมูลเพิ่มเติม:

• หน้าแรกของโครงการ AMP
• WordPress-AMP-ปลั๊กอิน

24. ลองปรับความเร็วเพจให้เหมาะสมอัตโนมัติ

ในคู่มือนี้ คุณได้เรียนรู้มาตรการหลายอย่างในการปรับปรุงความเร็วของหน้า อย่างไรก็ตาม มาตรการเหล่านี้ส่วนใหญ่ต้องการให้คุณมีความรู้ด้านเทคนิคและเวลาในการดำเนินการ

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

บริการคลาวด์สำหรับการเพิ่มประสิทธิภาพความเร็วเพจแบบอัตโนมัติ wao.io ทำงานดังนี้: เช่นเดียวกับเครือข่ายการจัดส่งเนื้อหา wao.io จะจัดเก็บเว็บไซต์ไว้ชั่วคราว และดำเนินการตามมาตรการที่คุณสามารถกำหนดได้ผ่านเมนู นอกเหนือจากการบีบอัดภาพอัจฉริยะและการลดขนาดโค้ดแล้ว ยังรวมถึงมาตรการขั้นสูง เช่น การโหลดแบบ Lazy Loading

wao.io ยังป้องกันการโจมตีด้านความปลอดภัยและเสนอตัวชี้วัดสำหรับการตรวจสอบเว็บไซต์และหมายเลขผู้ใช้

บทสรุป

เว็บไซต์มีสกรูปรับหลายตัวที่คุณสามารถใช้ปรับปรุงเวลาในการโหลดหน้าได้

ในบทความนี้ คุณได้ค้นพบความเป็นไปได้บางประการ วิธีการบางอย่างก็ง่ายมากสำหรับผู้เริ่มต้นและมือใหม่ในการทำ SEO

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