ทำ page speed คะแนน 90 up

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

นอกจากเรื่องประสบการณ์การใช้งาน ( User Experience ) ด้านเว็บ ความเร็วนั้นมีผลกับ SEO ( Search Engine Optimization ) ทำให้อันดับในหน้าแรกๆของ google search หรือพวกเว็บ search ต่างๆ แต่ๆ ไม่ใช่ว่าเว็บคุณไม่เร็วแล้วอันดับจะตก ให้เทียบว่าเหมือนรถยนต์ ยางแบนความเร็วไม่เยอะ แต่ก็ยังขับไปต่อได้อยู่ดี

ยาวไปไม่อ่าน ? เลือกอ่านตามหัวข้อ

รู้จักมาตราฐานความเร็ว page speed

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

https://developers.google.com/speed/pagespeed/insights/

เมื่อเราเข้าไปใน link ด้านบนแล้วเราจะเจอช่องให้กรอกเว็บของเรา ก็ลองเอาเว็บของเราใส่ดูครับแล้วรอซักพักเครื่องมือเช็ค page speed มันก็จะทำการบอกว่าความเร็วเว็บของเราเป็นคะแนนจาก 0 – 100 ว่าเว็บเราแต่ละ url มันอยู่เท่าไร อันนี้ของเว็บผมก่อนจะเริ่มทำการปรับ

page speed insight oxygenyoyo.com
page speed insight oxygenyoyo.com

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

เริ่มจากโครงสร้าง HTML ที่ดี

ในการเขียนเว็บภาษาเริ่มแรกนั้นในการ render เว็บเราคงหนีไม่พ้นภาษา HTML ใครยังไม่รู้ว่าคืออะไร อ่านทางนี้ได้นะครับ

Layout ต้องซ้ำซ้อนน้อยที่สุด

โดยการจะทำความเร็วอย่างแรกที่เราต้องกังวลเลยคือ การทำให้ โครงสร้างของ DOM ( Document Object Model ) หรือลำดับชั้นต่างๆให้น้อยที่สุดเท่าที่จะเป็นไปได้ หากอ่านแล้วงงว่า DOM ก็คือถึงหน้าตาของ Code ประมาณนี้ก็ได้ครับ ในเวลาปกตินั้นเวลาเราเขียน HTML เราจะสร้าง wrapper row column หน้าตามันจะเป็นแบบนี้

<div class="wrapper">
  <div class="row">
    <!-- 1 column -->
    <div class="column"></div>
  </div>
  <div class="row">
    <!-- 2 columns -->
    <div class="column"></div>
    <div class="column"></div>
  </div>
</div>

แปลว่าเราต้องเสียชั้นของ code ไปอย่างน้อยๆคือ 3 ชั้นอันนี้คือแบบ layout อย่างนี้นะ ในเว็บจริงๆ ซึ่งเว็บส่วนใหญ่ยังคงเป็นโครงสร้างแบบนี้อยู่ ซึ่งอาจจะมีบางเว็บนั้นอาการหนักกว่านี้อีกโดยมีการซ้อนของลำดับชั้นเยอะกว่านี้มากๆ ซึ่งอันนี้เป็นสิ่งแรกที่ควรจะแก้ไขเลย ซึ่งบอกได้เลยว่า ยาก !!

เหตุผลเป็นเพราะส่วนใหญ่เว็บที่รันใน production จริงๆแล้วก็เปิดมานานระดับหนึ่ง แล้วพวก framework ในตลาดส่วนใหญ่ยังคงใช้รูปแบบการจัด layout dom แบบที่บอกด้านบนอยู่ดี ดังนั้นการจะปรับโครงสร้างที่ควรจะเป็นก็อย่างน้อยๆ ลดการระดับของ DOM หรือการซ้อนกันของ tag ให้น้อยลงครับ ถ้าหากคุณกำลังจะสร้างเว็บวินาทีที่อ่านบทความอยู่ผมแนะนำว่าเว็บของคุณควรใช้ css display grid ครับ ใครไม่เคยเรียนก็เรียนรู้นะครับ เพราะมันลดความซับซ้อนของ div และแก้ไขปัญหาโลกแตกของโลก css นั่นคือการ จัดกลาง

สำหรับใครเรียนรู้แล้วร้อนวิชาไปลองได้ที่เว็บนี้ครับ

https://cssgridgarden.com/

ข้อดีของ display grid คือลดความซ้ำซ้อนลงได้เยอะมาก เพราะแทนที่เราจะต้องทำเป็น แถวก่อนแล้วค่อยเป็นคอลัมส์ เราสามารถจัดทั้งแถวและคอลัมส์ได้ทันที

font เป็นไปได้ควรอยู่ใน host ตัวเอง

ปัจจุบัน google ได้ให้ความสะดวกสบายกับเราโดยการให้ font ใช้งานแบบ CDN แต่หลายๆครั้งการโหลด font เป็นปัญหาทำให้เว็บช้าซะเอง เอ้า !! จริงหรอ !!? ใช่ครับ เพราะการโหลด font นั้นทำให้เว็บช้าได้ระดับหนึ่งเหมือนกัน เพราะฉะนั้นการปรับอาจจะทำการใช้ preload และใส่ display swap เพื่อให้เว็บพยายาม render font default ก่อนแล้วค่อยสลับกับ font ที่เราเขียนไว้ใน css อีกที โดยปัจจุบันถ้าคุณเรียกผ่าน cdn ใน google font มันจะทำการ gen ออกมาให้แล้ว แต่บางครั้ง code ของ plugin หรือ code เก่าของคุณก็อาจจะไม่ได้ update และทำให้ช้าลง

เรามาดูโค้ดที่ google gen ให้เวลาเราเลือก font ณ ตอนนี้

<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Kanit:wght@100&display=swap" rel="stylesheet">

โอเคหลายๆคนอาจจะยังไม่เคยเห็น attribute ตัว rel=”preconnect” สิ่งนี้มันคือการที่เราจะ โหลดของล่วงหน้าเพื่อให้มันทำงานได้รวดเร็วยิ่งขึ้น สังเกตุอีกอย่างใน tag ตัวล่างสุดในตัวอย่างนะครับมีตัวแปร display=swap อันนี้ มันทำงานอย่างที่ผมบอกครับคือ การใช้ font render ก่อนจะได้คะแนนดีแล้วค่อยสลับกับ font เมื่อโหลดเสร็จ

Attribute ref Preload Prefetch

อย่างแรกผมแนะนำอ่านที่นี่ก่อนครับ https://www.themevilles.com/speed-web-html/ หลายคนอาจจะงงกับ preload กับ prefetch ผมจะอธิบายง่ายๆคือ เราใช้ preload เมื่อต้องการใช้สิ่งนั้นๆ แต่ prefetch คือแอบโหลดเก็บไว้แบบ background process ครับ

ยกตัวอย่าง อย่าง font เราสามารถใช้ preload เพราะเราต้องการให้มันโหลดเพื่อใช้งาน และเราจะใช้ prefetch เวลาเราจะกด a tag โดย preload สามารถใช้กับ tag link พวก css ได้อีกด้วยครับ

ตรงจุดนี้การแก้ไขทำให้ความเร็วของคะแนนอาจจะพุ่งได้เลยเพราะว่ามันมีเรื่องการถูก block การ load บางอย่างเช่น ตัว css ต้องการเรียกใช้ font แต่ต้องรอโหลด font จาก google ก่อนทำนองนี้ ทำให้ต้องรอ load font ให้เสร็จซึ่งทำให้เสียเวลาอีกการใส่ attribute preload จะช่วยแก้ปัญหาตรงนี้ครับ

โหลดแค่สิ่งที่ต้องใช้ในแต่ละหน้า

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

  • css สำหรับโครงสร้างเว็บ ( อันนี้จำเป็นทุกหน้า )
  • css สำหรับ slider ( อันนี้ใช้แค่หน้าแรก )
  • javascript สำหรับ slider ( อันนี้ใช้หน้าแรก )

เอาตัวอย่างแค่นี้ก่อน ปกติเวลาคนเขียนเว็บเขาก็จะทำการเรียกไฟล์ css ไว้ที่ส่วนของ head tag และส่วนของ javascript ไว้ใน body ส่วนล่างๆ และเอาทุกไฟล์มาเรียกในหน้ารวมซึ่งหมายความว่าในทุกๆหน้าจะโหลด css กับ javascript ของ slider ด้วยซึ่งบางหน้านั้นอาจจะไม่ได้ใช้งาน แต่มันง่ายในการจัดการ ตรงจุดนี้ผู้พัฒนาต้องคิดดูว่าจะยอมแลกความเร็วกับความสะดวกในการจัดการไหม แต่ไม่ต้องห่วงเพราะใน WordPress นั้นมี plugin ที่ทำหน้าที่นี้อยู่ครับ อันนี้บอกสำหรับคนที่ไม่ได้ใช้ WordPress นะครับ

โดยถ้าเราทำตามหัวข้อนี้เราต้องแยกว่า หน้าแรกหรือหน้า home นั้นเราจะโหลดทั้งหมดเพราะว่ามี slider แต่สมมติถ้า user คลิกไปหน้าบทความ ( single page ) เราก็ไม่ต้องโหลด css กับ javascript ของ slider เข้ามาในหน้านั้นครับ นักพัฒนาได้อ่านถึงจุดนี้น่าจะเข้าใจนะครับว่ามันยุ่งยากขนาดไหน ถ้าหน้าในเว็บไม่เยอะมากผมคิดว่ามันก็ไม่หนักเกินไปครับ

เลือกรูปที่เหมาะสมและเล็กที่สุด

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

ขนาดของรูปภาพต้องเหมาะสมกับพื้นที่แสดง สมมติว่าคุณหารูปภาพประกอบบทความส่วนใหญ่แล้วนั้นพื้นที่แสดงรูปภาพในบทความจะไม่ค่อยใหญ่เกินกว่า 600px คุณก็ทำการ resize รูปก่อนครับ ใช้โปรแกรมทำให้หรือหาเอาใน internet ก็ได้พวก https://tinypng.com/ มีหลายเว็บมากให้คุณได้ทดลองครับ ความชัดของรูปในการบีบอัดเพื่อลดขนาดลง เพราะบางครั้งเราต้องการรูปประกอบแต่ไม่ต้องชัดเอาแค่มองออกว่ามันเป็นภาพอะไรก็พอครับ ถ้าคุณใช้ WordPress ก็อาจจะต้องดูว่าภาพนี้มีแสดงแบบ slider ด้วยหรือเปล่า แล้วให้ developer สามารถตัดภาพเพิ่มเติมตอนที่คุณ upload ภาพเพื่อสามารถนำไปใช้ในหน้าต่างๆที่มีการแสดงผลหลายขนาดได้ครับ

webp extension นอกจากภาพที่ใช้ประกอบรูป google มีมาตราฐานที่เป็น webp ครับ โดยสามารถลดขนาดรูปลงไปได้อีกจากข้อข้างบนสามารถทำเป็นแบบทั้ง lossless ( ไม่สูญเสียความชัด ) และ lossy (สูญเสียความชัดแต่ลดขนาดได้เยอะกว่า ) โดยถ้าหากผู้อ่านไม่ใช่ผู้พัฒนาก็สามารถบอก developer ให้จัดการได้ครับ แต่ถ้าคุณใช้พวก WordPress นั้นจะมี Plugin จัดการตั้งแต่คุณ upload ภาพเข้าในเว็บของคุณเลย ส่วนใหญ่จะฟรีก่อนเป็นจำนวนหนึ่งแล้วก็เสียเงิน เพราะฉะนั้นก็ต้องดูดีๆว่าเราจะใช้ภาพเยอะน้อยแค่ไหนครับ ถ้าอยากทำความเข้าใจกับ webp มากกขึ้นผมแนะนำบทความนี้ครับ

https://www.rainmaker.in.th/introducing-webp-standard-image-file-form-google/

จัดการกับพวก 3rd Party ด้วย defer

ในบางครั้งเว็บเราอ่ะโครตเร็วแต่ดันคะแนนไม่ดีเหตุผลเพราะพวก thrid party ที่เราใช้งานมันครับ ยกตัวอย่างที่ทุกคนน่าจะใช้คือ google analytic ซึ่งการโหลด script จาก google นั้นอาจจะทำให้เกิดการรอ ทำให้เว็บเราช้าลงอีก อย่างกรณีเว็บผมที่เคยเจอคือผมติด google tag manager แล้วมันโหลดไป 1 วินิดๆ ซึ่งมันทำให้ภาพรวมช้าลง

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

<script type='text/javascript' defer='defer' src='//oxygenyoyo.com/wp-content/themes/plant/js/scripts.js?ver=2.3.6' id='s-scripts-js'></script>

ตัว defer เหมาะสมกับพวก script ที่โหลดแล้วไม่มีผลกระทบอะไรกับหน้าเว็บ

WordPress Theme

เป็นไปได้อย่าใช้พวก Theme อเนกประสงค์หรือพวกใช้ Page builder ในการสร้างเหตุผลเพราะว่ามันจะทำให้เว็บช้าครับ ความสะดวกต่างๆที่ตัว page builder มอบให้คุณ นั่นนำมาซึ่งต้องแลกกับความเร็วของเว็บด้วยครับ ส่วนตัวใช้ seed theme ซึ่งค่อนข้างดีและเร็วที่สุดเท่าที่จะเป็นไปได้แล้วครับแนะนำข้างล่างเลย

WordPress Plugin ไหนบ้างช่วยแก้ไขเรื่องพวกนี้

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

ตัวนี้มีข้อดีเรื่องเบาและปรับง่ายครับแต่ ความง่ายก็จะมากับเรื่องมันไม่สุด แต่มีการปรับเรื่องโค้ดให้มีการ minify ( รวมโค้ดให้เป็นไฟล์เดียว ) และทำรูปเป็น webp

ตัวต่อมาคือ asset clean up

ตัวนี้จะช่วยเกี่ยวเรื่องจัดการพวก หน้าไหนเราจะโหลดไม่โหลด css javascript และให้อยากให้โหลดหลัง page load เสร็จโดยแยกเป็นแต่ละ plugin ให้เราเลือกได้ว่าหน้านี้ไม่เอาพวก slider นะ และสามารถเลือกได้อีกว่าในตัว core ของ WordPress เองมีไฟล์ที่เราไม่ใช้งานจะให้เราไม่ต้องโหลด เพื่อให้เว็บเราเร็วยิ่งขึ้นไปอีก

ตัวสุดท้ายอันนี้น่าจะเทพสุดแล้วคือ wp-rocket

ตัวนี้จะทำงานร่วมกับ Plugin asset clean up ด้วยะครับแต่ต้องไม่ลืมทดสอบใน local ก่อนนะครับ โดยความสามารถที่โดดเด่นสุดคือ สามารถควบคุมพวก javascript ที่เราต้องการให้โหลดไปทีหลังสุดได้ ในไม่กี่คลิกไม่ต้องแก้ไขโค้ดเอง และทำการ cache ต่างๆ แต่ต้องแลกมากับการศึกษาเรียนรู้ด้วยครับ

หลังจากปรับแล้วผลเป็นยังไง ?

หลังจากแก้ไขหลายๆอย่างทั้ง theme และตัว Plugin ในการปรับจูนผลออกมาได้เท่านี้ครับ

อันนี้คะแนนในหน้ามือถือ mobile
หน้า desktop

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

อยากเรียนรู้เพิ่มเติมเกี่ยวกับเรื่องนี้หาได้ที่ไหน ?

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

ถ้าคุณเป็น developer

ผมแนะนำคอร์สนี้ครับ โดยเนื้อหาในคอร์สจะพูดถึง สิ่งที่ต้องปรับแก้ใน google page speed ทั้งหมด โดยคุณติดปัญหาเรื่องอะไรก็กดไปดูตรงหัวข้อนั้นๆได้เลยครับ แล้วคนสอนเป็นใคร ? ผู้สอนเป็นกูรูด้านเว็บโดยมี google รองรับเรียกกันว่า GDE ( Google Developer Experts ) เพราะฉะนั้นไม่ต้องห่วงว่าจะเป็นกูรูปลอมแต่อย่างใดครับ ผมซื้อแล้วคุณซื้อหรือยัง

ถ้าคุณไม่ใช้ developer เป็นเจ้าของเว็บหรือสนใจด้านนี้

ผมแนะนำเว็บของคุณตังเมครับ

ผู้เขียนและสอนเป็นใครเอาคราวๆประมาณนี้ครับ

โดยเนื้อหาในเว็บนั้นคุณสามารถอ่านให้เข้าใจได้ง่ายและมีเครื่องมือหลายๆอย่างที่ทำให้คุณเข้าใจโลกของก SEO มากขึ้นครับ ผมก็อ่านและติดตามอยู่เหมือนกัน แต่ถ้าหากคุณต้องดูแลธุรกิจไม่มีเวลาอยากส่งคนมาเรียนกับทางคุณตังเม เขาก็มีคอร์สสอนเช่นกันครับสามารถดูรายละเอียดได้ที่นี่เลยครับ https://chalakornberg.com/seo-courses/

อยากใช้เงินแก้ปัญหา ?

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

https://www.livingsoft.co.th/

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

อยากอ่านบทความแนวนี้ลองอ่านอันนี้ครับ

https://oxygenyoyo.com/general/largest-contentful-paint-image-was-lazily-loaded/

https://oxygenyoyo.com/event/event-wordpress-meetup-optimize-fast/

Loading

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