SEO ( Search Engine Optimize ) ในยุคนี้ใครๆก็รู้จัก โดยการจะทำให้ดี “ความเร็ว” แทบจะเป็นสิ่งแรกๆในยุคนี้ ที่ทำให้คนเข้าเว็บของเรานั้นจะมีคนเข้าหรือไม่เข้าได้เลยทีเดียว การทำให้ติดหน้าแรกของ google นั้นเป็นเรื่องยากและ ความเร็วเป็นหนึ่งในปัจจัยนั้น
Page Speed Insight
page speed insight หรือคะแนนความเร็วของเว็บไซต์จริงแล้ว google เองวัดอีกหลายอย่างแต่อย่างแรกๆคือเรื่องนี้ การทำให้คะแนนนี้ขึ้นนั้นเป็นเรื่องที่ทำให้หลายคนปวดหัว แต่ออกตัวไว้ก่อนเลยว่า มันไม่ใช่ปัจจัยหลักทั้งหมดทีเดียวยกตัวอย่าง
จะเห็นว่าขนาดเว็บอันดับหนึ่งของไทย ก็ไม่ได้คะแนนสูงแต่เขาก็ยังมีคนเข้าตลอดเวลาและเยอะที่สุดอันนี้เอาจาก 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/
