การปรับปรุงสัญญาณสำคัญและประสบการณ์หน้าเว็บไซต์ของคุณด้วย Semalt

1. หน้าเนื้อหาที่ใหญ่ที่สุด (LIP): กำหนดระยะเวลาในการโหลดหน้าเว็บจากมุมมองของผู้ใช้จริง เป็นเวลาจากการคลิกลิงก์เพื่อดูเนื้อหาส่วนใหญ่บนหน้าจอของอุปกรณ์ (พีซีหรือมือถือ)
2. First Input Delay (FID): กำหนดเป็นเวลาที่ผู้ใช้ใช้ในการโต้ตอบกับเว็บเพจ ด้านล่างนี้เป็นตัวอย่างของการโต้ตอบบางส่วน:
   • เลือกตัวเลือกจากเมนูด้านบนหรือเมนูหลัก
   • คลิกลิงก์ในเมนูการนำทางของไซต์
   • ป้อนที่อยู่อีเมลของผู้ใช้/ผู้ดูลงในช่องแสดงความคิดเห็น
3. Cumulative Layout Shift (CLS): นี่คือความเสถียรของเพจขณะโหลด กล่าวอีกนัยหนึ่งก็คือความเสถียรของภาพ นอกจากนี้ยังหมายความว่าหากองค์ประกอบบนหน้าเว็บเคลื่อนที่ไปมาเมื่อหน้าโหลดแสดงว่าหน้าเว็บนั้นมี CLS สูงซึ่งถือได้ว่าไม่ดี

3. Page Experience Signals คืออะไร?

1. การแคช HTTP: ขอแนะนำให้ผู้ดูแลเว็บตั้งค่าส่วนหัวการแคช HTTP ที่ถูกต้อง จะเป็นข้อดีสองเท่าเพราะเมื่อใดก็ตามที่มีการเข้าชมซ้ำ (เมื่อผู้ดู/ผู้ใช้เข้าชมหน้าเว็บมากกว่าหนึ่งครั้ง) เกิดขึ้นกับหน้าเว็บโหลดได้เร็วขึ้นและมีการโหลดบนเว็บเซิร์ฟเวอร์น้อยลง
   
   
   แคชซึ่งเป็นการรวบรวมสำเนาของทรัพยากรในเครื่องใช้งานได้เนื่องจากทรัพยากรเหล่านี้ไม่ได้เปลี่ยนแปลงบ่อยนัก เมื่อเบราว์เซอร์สามารถใช้สำเนาภายในเครื่องซ้ำได้จะช่วยประหยัดเวลาในการตั้งค่าการเชื่อมต่อและโหลดหน้าเว็บนั้น ๆ
   
   
   เคล็ดลับในการทำให้แคชทำงานได้อย่างมีประสิทธิภาพคือส่วนหัวการแคช HTTP ซึ่งส่งโดยเว็บเซิร์ฟเวอร์เพื่อระบุระยะเวลาที่ทรัพยากรถูกต้องและเมื่อมีการเปลี่ยนแปลงล่าสุด โปรโตคอล HTTP ช่วยให้ทราบระยะเวลาที่ทรัพยากรถูกต้อง หนึ่งในนั้นคือส่วนหัวที่หมดอายุ ส่วนหัวหมดอายุจะระบุวันที่ที่ทรัพยากรไม่ถูกต้องหลังจากนั้น เมื่อมาถึงจุดนี้เบราว์เซอร์จะถามทรัพยากรอีกครั้ง
   
   
   อีกวิธีหนึ่งในการทราบระยะเวลาที่ทรัพยากรถูกต้องคือ Max-Age อายุสูงสุดทำงานในลักษณะเดียวกันกับส่วนหัวที่หมดอายุเพียงแค่ระบุระยะเวลาที่ทรัพยากรจะถูกดาวน์โหลดแทนที่จะระบุวันที่ที่เฉพาะเจาะจง
   
   
   อย่างไรก็ตามการแสดงเนื้อหาที่ต้องใช้การโต้ตอบของผู้ใช้ผ่านการเชื่อมต่อ HTTP ที่ไม่ปลอดภัยทำให้ผู้ใช้เสี่ยงต่อการถูกขโมยข้อมูล สิ่งสำคัญคือต้องทราบว่าผู้ใช้ป้อนข้อมูลส่วนบุคคลใดและเมื่อใดเช่นการชำระเงินที่มีการแบ่งปันข้อมูลการชำระเงิน
   
   
   เพื่อให้ผู้ชมสามารถท่องเว็บได้อย่างปลอดภัยบล็อกเกอร์ต้องตรวจสอบให้แน่ใจว่าเว็บไซต์มีใบรับรอง SSL ที่เป็นปัจจุบันและย้าย URL และทรัพยากรบนหน้าไปยัง HTTPS
   
   
2. การลดการสะท้อนของเบราว์เซอร์: Reflow คือชื่อของขั้นตอนการเรียกดูเว็บสำหรับการคำนวณตำแหน่งและรูปทรงเรขาคณิตขององค์ประกอบในเอกสารสำหรับการแสดงผลบางส่วนหรือทั้งหมดของเอกสาร
   
   
   เป็นสิ่งสำคัญสำหรับนักพัฒนาที่จะต้องทราบวิธีเพิ่มมูลค่าของเวลาในการรีโฟลว์และทำความเข้าใจผลกระทบของคุณสมบัติเอกสารต่างๆ คุณสมบัติของเอกสารประกอบด้วยประสิทธิภาพของกฎ CSS การเปลี่ยนแปลงรูปแบบที่แตกต่างกันและความลึกของ DOM ในเวลาที่จัดเรียงใหม่
   
   
   บ่อยครั้งการปรับองค์ประกอบเดียวในเอกสารอาจต้องมีการปรับแต่งองค์ประกอบหลักและองค์ประกอบใด ๆ ที่ตามมา
   
   
   เทคนิคที่ใช้มากที่สุดแบ่งออกเป็นหกประเภทที่ครอบคลุม
   แง่มุมต่างๆของการเพิ่มประสิทธิภาพการโหลดหน้าเว็บ:
   1. การแสดงผลของเบราว์เซอร์ที่มีประสิทธิภาพสูงสุด: การปรับปรุงรูปแบบหน้าเว็บของเบราว์เซอร์
   2. การแคชที่มีประสิทธิภาพสูงสุด: การเก็บข้อมูลและตรรกะของแอปพลิเคชันไว้จากเครือข่ายโดยสิ้นเชิง
   3. การใช้งานที่เหมาะสมที่สุดสำหรับอุปกรณ์เคลื่อนที่: การปรับแต่งไซต์สำหรับลักษณะของเครือข่ายมือถือและอุปกรณ์เคลื่อนที่
   4. การลดจำนวนการเดินทางไปกลับ: การลดจำนวนการหมุนเวียนการตอบกลับคำขอแบบอนุกรม
   5. การลดคำขอค่าใช้จ่าย: การลดขนาดการอัปโหลด
   
   
3. การลดขนาดไฟล์ของเอกสาร HTML: เทคนิคที่ชัดเจนในการปรับปรุงประสบการณ์หน้าเว็บของเว็บไซต์คือการลดขนาดไฟล์ของเอกสาร HTML มีหลายวิธีในการดำเนินการนี้ ซึ่งรวมถึงการบีบอัดแบบแข็ง ID ที่เหมือนการฝังเข็มและการเปลี่ยนชื่อคลาส
   
   
   HTML เมื่อส่งด้วยข้อความประเภท MIME/HTML - ช่วยให้โปรแกรมเมอร์สามารถข้ามแท็กบางแท็กได้
   ตัวอย่างเช่นหากโปรแกรมเมอร์มีรายการที่ถูกกาเครื่องหมายเป็น <P รายการรายการ </Pbr> โปรแกรมเมอร์คนนั้นสามารถเขียนรายการ หรือแทนที่จะเป็นย่อหน้าที่เขา/เธอมักจะปิดด้วย </q> เขา/เธอสามารถใช้ <q> ย่อหน้าของฉันได้
   
   
   วิธีนี้ได้รับการทดสอบและเชื่อถือได้และใช้ได้กับ HTML, head และ body ซึ่งไม่จำเป็นใน HTML การละเว้นแท็กที่เป็นทางเลือกจะทำให้ HTML ถูกต้องอย่างเป็นทางการในขณะที่ลดขนาดไฟล์และทำให้โค้ดดูเล็กลงมาก ในเอกสารโดยเฉลี่ยหมายความว่าประมาณ 10 ถึง 20 เปอร์เซ็นต์ของพื้นที่ได้รับการบันทึกเรียบร้อยแล้ว
   
   
4. ภาพบีบอัด: ไฟล์ภาพส่วนใหญ่สร้างขึ้นโดยมีข้อมูลเพิ่มเติมฝังอยู่ในไฟล์ ตัวอย่างเช่นไฟล์ประเภท JPEG ถูกเขียนโดยโปรแกรมรูปภาพต่างๆรวมถึงชื่อของโปรแกรมที่เขียนด้วย ในขณะเดียวกันภาพ PNG สามารถทำให้เล็กลงได้โดยการเปลี่ยนวิธีเข้ารหัสภาพ
   
   
   การแปลงเหล่านี้จะไม่ทำให้ข้อมูลสูญหาย ซึ่งหมายความว่ารูปภาพที่บีบอัดจะมีลักษณะเหมือนกับภาพที่ไม่ได้บีบอัด แต่ใช้ไบต์น้อยกว่าและใช้พื้นที่น้อยกว่า