lazy-load-score-featured-image

Lazy Load กับคะแนน page speed insight

SEO ( Search Engine Optimize ) ในยุคนี้ใครๆก็รู้จัก โดยการจะทำให้ดี “ความเร็ว” แทบจะเป็นสิ่งแรกๆในยุคนี้ ที่ทำให้คนเข้าเว็บของเรานั้นจะมีคนเข้าหรือไม่เข้าได้เลยทีเดียว การทำให้ติดหน้าแรกของ google นั้นเป็นเรื่องยากและ ความเร็วเป็นหนึ่งในปัจจัยนั้น

Page Speed Insight

page speed lazy load

page speed insight หรือคะแนนความเร็วของเว็บไซต์จริงแล้ว google เองวัดอีกหลายอย่างแต่อย่างแรกๆคือเรื่องนี้ การทำให้คะแนนนี้ขึ้นนั้นเป็นเรื่องที่ทำให้หลายคนปวดหัว แต่ออกตัวไว้ก่อนเลยว่า มันไม่ใช่ปัจจัยหลักทั้งหมดทีเดียวยกตัวอย่าง

thairath ( เว็บไทยรัฐ )

จะเห็นว่าขนาดเว็บอันดับหนึ่งของไทย ก็ไม่ได้คะแนนสูงแต่เขาก็ยังมีคนเข้าตลอดเวลาและเยอะที่สุดอันนี้เอาจาก truehit ( ณ วันที่เขียนบทความนี้ ) คือไม่ได้บอกว่าต้องทำให้ได้ 100 คะแนนแต่ถ้าทำได้ก็ดี เพราะถ้าสมมติว่าเว็บคู่แข่งเราอันดับน้อยกว่าในขณะที่เราทำเท่าๆกัน google จะจัดอับดับเรามากกว่า

ใครอยากรู้รายละเอียดผมเคยมีเขียนเกี่ยวกับวิธีการทำคะแนนให้ดีแล้ว สามารถอ่านที่นี่ได้เลยครับ

ทำเว็บเร็วขึ้น ยากตรงไหน

ปัญหาอยู่ตรงนี้ครับ ผมได้ปรับปรุงเว็บใหม่ที่คุณกำลังอ่านอยู่เนี้ยแหละครับ ก่อนปรับผมได้คะแนน มือถืออยู่ประมาณ 95 – 99 ซึ่งค่อนข้างน่าภูมิใจแล้ว แต่พอปรับเป็นรูปแบบใหม่ปรากฎว่าเหลืออยู่ 75 – 80 เท่านั้น เราจะไม่พูดถึงหน้าจอ Desktop นะครับเพราะว่าถ้าเราปรับในหน้ามือถือได้ดีหน้า Desktop แทบจะ 100 อยู่แล้ว

โดยผมปรับทั้งหมดเท่าที่จะนึกออกแล้วตามที่บทความเก่ากำหนดแต่คะแนนไม่เต็มติดเรื่องหนึ่งคือ

largest contentful paint image was lazily loaded

ถ้าแปลง่ายๆคือ ภาพอะไรก็ตามที่แสดงอยู่ตอนแรกสุดที่ยังไม่ scroll mouse ต้อง “ห้าม” lazy load เหตุผลเพราะภาพที่จะแสดงครั้งแรกควรจะแสดงเลย ถ้าไปติด lazyload ก็แปลว่าตัววัดค่าต้องรอการ load นั้นอีกทำให้เสียเวลาครับโดยส่วนใหญ่แล้วนั้น พวก plugin ทั้งหลายตอนนี้ปรับตัวแล้วแต่คิดว่าหลายคนไม่รู้ว่ามันมี คือการ ข้ามการ lazy load ภาพยกตัวอย่างเช่น autoptimize แล้วกัน มันจะมี input ให้ข้ามไม่ใส่ lazy load โดยใส่ 1 จะใส่ lazyload ทุกภาพแต่ถ้าใส่เลขอื่นก็จะข้ามตามจำนวนภาพ ให้คุณลองสังเกตุว่าในเว็บมีภาพตรงไหนแสดงในตอนแรกบ้าง ตัวอย่างเช่น มี logo มีภาพแสดงของบทความกี่อัน ก็นับไปครับ

จริงๆผมควรใส่ 7 เหตุผลเพราะว่ามันมีภาพสำหรับหน้าจอ Desktop กับ mobile อย่างละ 3 ภาพแยกกันรวม logo ก็เป็น 7 ครับ วิธีการสังเกตุคือ ให้เราเปิด inspect element แล้วเช็คดูว่ามี class lazyloaded หรือเปล่าถ้ามีแปลว่าคุณอาจจะต้องนับจำนวนภาพดีๆครับ ถ้าเช็คไม่มีก็แปลว่าทำถูกแล้วครับ

แต่ปัญหาคือโดยมันฟ้อนตลอดเวลาโดยภาพแรกที่โผล่ขึ้นในหน้าจอ แต่ยังเป็น lazyload อยู่ถ้าสังเกตุคือมันจะมี attribute ชื่อว่า loading=”lazy” สาเหตุคือ function the_post_thumbnail ของ WordPress นั้นมันทำการ auto ใส่ให้เราทุกครั้งที่เราเรียกใช้ภาพจาก function นี้แต่เราไม่ใช้ก็ไม่ได้ถูกต้องไหมครับ เพราะมันเป็น function หลักในการทำพวก template เรียกใช้ภาพ

วิธีแก้ไข loading=”lazy”

ให้คุณทำการเขียนเพิ่มเติมเข้าไปให้รองรับ การปรับค่ายกตัวอย่างดูจาก code ด้านล่างนะครับ

<?php
  // สมมติมีการเรียกใช้ template part ก็จะส่งค่าเป็นแบบนี้ครับ
  get_template_part(
                'template-parts/loop-caption',
                'banner',
                ['loading' => ''] // ถ้าจะให้ lazy ก็ใส่คำว่า lazy ครับ
  );
?>

<?php
$loading = 'lazy';
// ถ้าเป็น template part สามารถส่งค่าเข้ามาได้ครับ
if(isset($args['loading'])) {
  $loading = $args['loading'];
}

the_post_thumbnail('large', ['loading' => $loading]);
?>

แค่นี้ก็สามารถเอา loading=”lary” ออกแล้วครับ แล้วลอง check page speed insight อีกครั้งก็น่าจะหายแล้วครับ จริงๆแล้วในปีก่อนนั้น google ยังไม่ได้เอาค่านี้มาพิจารณาครับ แต่คิดว่าล่าสุดมีนำมาใช้แล้วครับ

อ่านเพิ่มเติมเกี่ยวกับการทำเว็บเร็วได้ที่นี่ครับ

https://www.designil.com/wordpress-core-web-vitals/

Loading

เป็นโปรแกรมเมอร์ที่ตามหาคุณค่าของชีวิตและความฝันในวัยเด็ก ชอบเล่นเกม เรียนรู้ทุกอย่าง ชอบเจอคนใหม่ๆ งานสังคมทุกชนิด ออกกำลังกายในวันว่าง อ่านหนังสือ มีเว็บรีวิวหนังสือด้วย www.readraide.in.th