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

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

สิ่งที่เป็นคำถามต่อมาก็คือ แล้วเราจะต้องแคร์เรื่อง Page speed ทำไม?

PageSpeed Insights จำเป็นหรือไม่?

ตอบตามตรงว่า “จำเป็น” เพราะว่าเว็บไซต์ของคุณสร้างขึ้นมามีจุดประสงค์เพื่อให้ผู้ใช้งานสามารถเข้ามาใช้งานเว็บไซต์ได้ ดังนั้นคุณก็ต้องให้ความสำคัญกับผู้ใช้งาน การที่ผู้ใช้งานเหล่านั้นจะสามารถเข้าชมเว็บไซต์ของคุณได้ก็ต้องมาจากการค้นหา ซึ่งก็หนีไม่พ้นการค้นหาจาก Search Engine หลักๆอย่างเช่น Google.com นั่นเอง เพราะฉะนั้นหากคุณยังต้องพึ่งพาทราฟฟิคจาก Google การปรับแต่งหน้าเว็บไซต์ให้เป็นไปตามมาตรฐานของ Google ก็เป็นสิ่งที่หลีกเลี่ยงไม่ได้เช่นกัน

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

เริ่มต้นใช้งาน PageSpeed Insights

การใช้งาน PageSpeed Insights นั้นค่อนข้างง่ายครับ เพียงแค่เข้าไปยังเว็บไซต์ developers.google.com/speed/pagespeed/insights จากนั้นกรอกเว็บไซต์ที่คุณต้องการตรวจสอบเข้าไป กดปุ่ม Analyze รอเพียงไม่กี่วินาที ผลลัพธ์และรายละเอียดต่างๆจะแสดงด้านล่างดังภาพ ในที่นี้ผมใช้เว็บไซต์ khunnaem.com เป็นเหยื่อทดลองให้กับบทความนี้ครับ

PageSpeed Insights จะแสดงคะแนนสำหรับ Mobile และ Desktop ซึ่งถูกแบ่งเป็นเมนูให้เห็นได้อย่างชัดเจน เนื่องจากว่าในปัจจุบันโลกอินเตอร์เน็ตได้เปลี่ยนไปมาก จากที่เคยให้ความสำคัญกับ Desktop PC เป็นอันดับต้นๆ แต่ในทุกวันนี้ Mobile Devices กลับมามีบทบาทอย่างมาก ทาง Google จึงให้ความสำคัญทั้งสองอุปกรณ์เท่ากันนั่นเอง

ปัญหาเบื้องต้นจาก PageSpeed Insights

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

Leverage browser caching

Leverage browser caching เป็นการสร้างแคชบน Web Browser ของฝั่งผู้ใช้งาน จุดประสงค์หลักก็เพื่อลดภาระงานที่ต้องทำการ Download ไฟล์ต่างๆทุกครั้งที่มีการเข้าชมเว็บไซต์เช่น html, css, javascript เป็นต้น

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

เว็บไซต์ที่มีการจัดเก็บแคชไปในฝั่งของ Web Browser ด้วยการทำ Leverage browser caching แล้ว หากผู้ใช้งานกลับมาเยี่ยมชมเว็บไซต์นั้นๆอีกครั้ง ก็สามารถเรียกไฟล์แคชขึ้นมาแสดงผลได้ทันที ไม่ต้องดาวน์โหลดอีกครั้งให้สิ้นเปลืองเวลา แต่ก็ต้องอย่าลืมว่าหน้าเว็บไซต์นั้นมีการอัพเดทอยู่เสมอซึ่งอาจไม่เกิดขึ้นบ่อย ยกตัวอย่างเช่น header, logo, menu อาจส่งผลกระทบกับผู้ใช้งานที่ไม่ได้อัพเดทแคชเหล่านั้น จึงจำเป็นต้องกำหนดระยะเวลาที่เหมาะสมเพื่อให้แคชเหล่านั้นหมดอายุตามเวลาที่สมควรและมีการจัดทำแคชใหม่ให้ทันสมัยกับหน้าเว็บไซต์ปัจจุบัน

วิธีการแก้ไขให้เว็บไซต์ของคุณผ่านเกณฑ์ Leverage browser caching ก็สามารถทำได้โดย เชื่อมต่อ FTP ไปยังเว็บไซต์ของคุณ จากนั้น edit ไฟล์ .htaccess แล้วใส่ code ด้านล่างนี้ลงไปครับ

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg “access plus 1 year”
ExpiresByType image/jpeg “access plus 1 year”
ExpiresByType image/gif “access plus 1 year”
ExpiresByType image/png “access plus 1 year”
ExpiresByType text/css “access plus 1 month”
ExpiresByType application/pdf “access plus 1 month”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
ExpiresByType image/x-icon “access plus 1 year”
ExpiresDefault “access plus 2 days”
</IfModule>
## EXPIRES CACHING ##

คำอธิบายเพิ่มเติม คุณสามารถเปลี่ยนแปลงข้อมูลด้านบนได้ตามความเหมาะสม ให้สังเกตที่ ExpiresByType image/jpg “access plus 1 year” คือการกำหนดการหมดอายุของของไฟล์ประเภท .jpg (รูปภาพ) โดยให้มีระยะเวลาหมดอายุอัตโนมัติ 1 ปีหลังจากการจัดเก็บข้อมูลครั้งแรก หากเว็บไซต์ของคุณมีการอัพเดทรูปภาพเป็นประจำก็สามารถลดค่านี้ลงให้เหลือ  1 week หรือ 1 month ก็ได้ครับ แต่โดยส่วนตัวแล้วแนะนำให้ใช้ค่ามาตรฐานตามด้านบนเลยครับ

Eliminate render-blocking JavaScript and CSS in above-the-fold content

จริงๆหัวข้อนี้จะประกอบไปด้วย 2 ส่วนคือ Eliminate render-blocking JavaScript และ CSS in above-the-fold content ผมขอเริ่มด้วยสิ่งที่คุณควรเข้าใจเสียก่อนใน 2 หัวข้อนี้

เมื่อคุณเข้าชมเว็บไซต์ สิ่งแรกที่ปรากฎให้คุณเห็นก็คือ Content โดยเนื้อหาที่ปรากฏต่อหน้าคุณโดยที่คุณไม่ได้ Scrolling เรียกว่า Above-the-fold Content (The ‘fold’ is where the bottom of the screen is on page load. When you land on a website, any content you immediately see without scrolling is ‘above the fold’. Anything you have to scroll down to see it ‘below the fold’. Coop)

Above-the-fold content นี่เองจึงเป็นสิ่งสำคัญนับตั้งแต่ Google ให้ลำดับความสำคัญของ Mobile Devices เพิ่มมากขึ้น เพราะผู้ใช้งานส่วนใหญ่มักให้ความสนใจกับเนื้อหาช่วงแรกที่ปรากฎบนเว็บไซต์มากที่สุด หากเว็บไซต์ของคุณใช้เวลาในการโหลดหน้าเว็บไซต์นานเกินไป ย่อมส่งผลโดยตรงทำให้ผู้ใช้งานอาจไม่กลับมายังเว็บไซต์คุณอีกเลย

หัวใจสำคัญของการปรับแต่ง Above-the-fold Content ก็คือ ทำอย่างไรก็ได้ให้เนื้อหาในส่วนนี้ปรากฎต่อหน้าผู้เข้าชมให้เร็วที่สุด ใช้เวลาน้อยที่สุด เพราะฉะนั้นหากคุณตรวจสอบเว็บไซต์กับ PageSpeed Insights แล้วพบกับปัญหาดังกล่าว ก็สามารถแก้ไขได้ตามวิธีที่จะอธิบายต่อจากนี้ครับ

Eliminate render-blocking JavaScript

หากเนื้อหาในส่วนของ Above-the-fold นั้นไม่จำเป็นต้องดึง JavaScript เข้ามาใช้งาน คุณก็ไม่จำเป็นต้องเสียเวลาในการดาวน์โหลดทรัพยากรดังกล่าว ยกตัวอย่างเช่น มีการเรียกใช้งาน JavaScript ในส่วนของ Post Content ซึ่งไม่ได้ปรากฏอยู่ในหน้า homepage แต่โดยส่วนใหญ่ JavaScript มักถูกเรียกใช้ในส่วนของ <head> …JavaScript Here… </head> เสมอ จึงทำให้ผู้ใช้งานต้องแบกรับภาระในการดาวน์โหลดทรัพยากรดังกล่าวโดยใช่เหตุอันควร

คุณสามารถติดตั้ง plugin ที่มีชื่อว่า Autoptimize จากนั้นก็สามารถตั้งค่าได้ตามภาพเลยครับ

ภาพด้านล่างคือคะแนนก่อนการติดตั้ง plugin โดยไฟล์ที่มีปัญหาคือ jquery.js ตามที่ PageSpeed Insights ได้แจ้งไว้

หลักจากปรับแต่ง Eliminate render-blocking JavaScript ผลปรากฏดังภาพ คะแนนจาก 81 ปรับขึ้นมาอยู่ที่ 93/100 ครับ

CSS in above-the-fold

หน้าตาเป็นประตูสู่หัวใจ หน้าตาของเว็บไซต์ก็เช่นกัน… หากคุณเข้าเว็บไซต์มาแล้วปรากฏเพียงหน้าขาวโล่งโจ้ง ไม่มีเนื้อหาอะไรให้คุณได้อ่าน ผมทำนายได้ทันทีว่าไม่เกิน 10 วินาทีคุณก็จะปิดเว็บไซต์ดังกล่าวแล้วอาจจะไม่หวนกลับมาอีกเลย หลักการของ CSS in above-the-fold คือ ทำอย่างไรก็ได้ให้ผู้เข้าชมเห็นเนื้อหาบางส่วนไม่ว่าจะเป็นข้อความหรืออาจเป็นส่วนใดส่วนหนึ่งของเว็บไซต์ มิใช่ปล่อยให้หน้าเว็บไซต์ว่างเปล่า

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

คำแนะนำเพิ่มเติมสำคัญ** จากการตั้งค่าด้านบนพบว่า ในหัวข้อ Inline and Defer CSS จะมีช่องสำหรับกรอก Code บางอย่างปรากฏขึ้นมา วิธีการทำ CSS in above-the-fold ให้ถูกต้องหลักการก็คือ คุณต้องนำ CSS ที่คุณใช้กับเว็บไซต์ของคุณไปทำ Critical Path ซึ่งสามารถใช้งานได้ฟรีตามเว็บไซต์ Critical Path CSS Generator ขั้นตอนประกอบไปด้วย

• เมื่อคุณเข้าไปยังเว็บไซต์ Critical Path CSS Generator มี 2 สิ่งที่คุณต้องกรอก ได้แก่ 1. เว็บไซต์ของคุณ 2. CSS หลักที่เว็บไซต์ของคุณใช้ 

ในส่วนที่ 2 ที่ระบุว่า FULL CSS ให้คุณนำโค้ดของคุณจากไฟล์ .css หลักของเว็บไซต์มาใส่ในช่องดังกล่าว ซึ่งสามารถสังเกตได้โดยไฟล์ .css ดังกล่าวจะมีขนาดใหญ่กว่าไฟล์ .css อื่นๆ  หลังจากกรอกทั้งสองช่องเสร็จแล้วก็กดที่ Create Critical Path CSS ได้ทันที CSS Critical Path Generator จะนำ CSS ทั้งหน้าเว็บไซต์มาวิเคราะห์ว่ามี CSS ในส่วนใดบ้างที่จำเป็นสำหรับ Above-the-fold Content

จากนั้นนำโค้ด CSS ใหม่ที่ได้รับ มาใส่ในช่อง Inline and Defer CSS ของ Autoptimize เป็นอันเรียบร้อย

Optimize images

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

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

เนื่องจากการปรับแต่งเกี่ยวกับรูปภาพจะมี 2 สิ่งที่เกี่ยวข้องกันคือ

• Size – ขนาดไฟล์ของรูปภาพ โดยส่วนใหญ่ไม่ควรให้เกิน 100KB ต่อรูปภาพ จะถือว่าอยู่ในเกณฑ์มาตรฐาน
• Resolution – ขนาดความกว้าง x ยาวของรูปภาพ สามารถใช้ Photon (ใน Jetpack) ช่วยปรับขนาดภาพให้เหมาะสมกับพื้นที่แสดงผล

สำหรับการปรับ Size ของภาพให้อยู่ในขนาดที่เหมาะสม คุณสามารถใช้เว็บไซต์ Optimizilla ได้เลยครับ เพียงแค่อัพโหลดภาพต้นฉบับแล้วทำการเลือก Quality ที่คุณดูแล้วว่ายังอยู่ในเกณฑ์ที่ดี โดยเว็บไซต์จะมีภาพต้นฉบับและภาพหลังการปรับแต่งเทียบกันเพื่อให้เห็นความแตกต่างอย่างชัดเจน กด Apply เมื่อคุณได้ภาพที่ต้องการ จากนั้นสามารถกด Download (ใต้ภาพต้นฉบับ) เพื่อดาวน์โหลดภาพนั้นๆ หรือในกรณีที่คุณปรับแต่งรูปภาพจำนวนมาก เพียงแค่กด Download All ก็จะได้รับภาพทุกภาพที่เสร็จสิ้นแล้ว สามารถดูได้จากรูปภาพด้านล่าง

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

Reduce server response time

ในหัวข้อ Reduce Server Response Time เป็นเรื่องของการตอบสนองของเซิฟเวอร์  ซึ่งต่อให้คุณปรับแต่งเว็บไซต์ดีมากแค่ไหน แต่ถ้าเซิฟเวอร์ของคุณตอบสนองได้ช้า ผลลัพธ์ก็คือการแสดงผลเว็บไซต์ที่ช้าตามไปนั่นเอง

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

ติดตั้ง Caching Plugins

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

• ในแทบ Easy ให้ tick ในช่อง Caching On

 

• สำหรับแทบ Advance แนะนำให้ tick ตามภาพครับ โดยส่วนใหญ่ให้เลือกเฉพาะหัวข้อที่มี (Recommended) ด้านหลัง เสร็จแล้วก็กด Update Status ปุ่มสีฟ้าด้วยครับ

 

• หลังจากนั้นต้องทดสอบด้วยครับว่า Caching นั้นทำงานเป็นปกติหรือไม่ โดยกลับมาที่แทบ Easy จากนั้นกดที่ Test Cache

 

• ผลลัพธ์จะแสดงขึ้นตามภาพ (The Timestamps on both pages match!)

การใช้งาน DNS ของ Cloudflare

Cloudflare มีบริการ DNS สำหรับเพิ่มประสิทธิภาพและความเร็วให้กับเว็บไซต์ แต่จากการที่ผมลองทดสอบ สาเหตุที่เว็บไซต์ไม่ผ่านเกณฑ์ในหัวข้อ Reduce server response time ก็เพราะการใช้งาน DNS ของ Cloudflare นี่ล่ะ

คำถามคือ แล้วคุณควรทำอย่างไรต่อไป? สำหรับผม ผมคิดว่าคุณสามารถใช้ DNS ของ Cloudflare ต่อไปเรื่อยๆได้ครับ เพราะจากที่ทดสอบมา จะถูกหักคะแนนในส่วนนี้ไม่มาก ฉะนั้นไม่ต้องกังวล

แล้วถ้าจะยกเลิก DNS ของ Cloudflare ต้องทำอย่างไร? คำตอบก็คือ คุณก็ไปเปลี่ยน Nameserver จากที่เคยใช้เป็นของ Cloudflare มาเป็นค่าเริ่มต้นที่ทาง Web Hosting ได้ให้กับคุณ

ตัวอย่าง DNS ของ Cloudflare

• sarah.ns.cloudflare.com
• john.ns.cloudflare.com

Minify CSS และ Minify JavaScript

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

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

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

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

เพียงแค่ติดตั้ง plugin (อย่าลืม activate) จากนั้นก็ tick ในช่อง Optimize JavaScript Code? และ Optimize CSS Code? จากนั้นกด Save Changes and Empty Cache เป็นอันเรียบร้อย

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

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

• Varvy
• GTmetrix
• Pingdom

ท้ายที่สุด

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