การแก้ปัญหา Above-The-Fold Content

Google ได้ประกาศเมื่อไม่กี่วันมานี้ว่า ในเดือนกรกฏาคมนี้จะมีการเปลี่ยนแปลงการแสดงผลในระบบการค้นหา (Google Search) โดยนำปัจจัยเกี่ยวกับความเร็วมาประกอบการพิจารณาด้วย โดยการเปลี่ยนแปลงนี้จะเกิดขึ้นกับผลการค้นหาทางโทรศัพท์มือถือ ดังนั้นจึงเป็นการดีที่เราจะลองมาทำการปรับแต่งเว็บของเราให้สามารถแสดงผลได้เร็วขึ้นเพื่อตอบสนองนโยบายนี้

ปัญหายอดฮิตเมื่อแต่ละท่านนำเว็บไซต์ไปทดสอบกับ Google PageSpeed Insights มักจะเจอ นั่นก็คือ Eliminate render blocking JavaScript and CSS in above-the-fold content ซึ่งหมายถึงเขาต้องการให้เรากำจัด JavaScript และ CSS ที่ปิดกั้นการแสดงเนื้อหาในส่วนของ Above the fold เพื่อให้ผู้ชมเข้าถึงข้อมูลได้เร็วที่สุด โดยเฉพาะบนมือถือ

Above the fold คืออะไร?

Above the fold คือ เนื้อหาที่แสดงอยู่บนหน้าจอแรกสุดก่อนที่ผู้ชมจำเป็นจะต้องเลื่อนหน้าจอลงไป พูดง่ายๆ ก็คือสิ่งที่มันต้องปรากฏเต็มหน้าจอเป็นลำดับแรกนั่นเอง

ในรูปด้านบนจะเห็นว่า Google จะแนะนำให้เราทำการโหลด JavaScript และ CSS แบบ Defer หรือ Asgynchonose หรือให้ทำการ Inline ลงไปใน HTML โดยตรง ซึ่งวิธีหลังอาจจะไม่ถือว่าเป็นเรื่องที่ดีนักสำหรับ CSS
ปัญหาเรื่อง above the fold นี้จะส่งผลต่อคะแนนในส่วของ Mobile มากที่สุด เพราะเราพบว่า ด้วยข้อหาเดียวกันนี้ ทำให้คะแนนทางฝั่ง Mobile นั้นลดลงเหลือเพียง 67/100 เท่านั้น ในขณะที่ถ้าเป็น Desktop จะยังได้อยู่ที่ 91/100 นั่นเป็นเพราะว่า ถ้าคิดตามหลักความจริงหน้าจอมือถือย่อมมีความเร็วอินเตอร์เน็ตที่ช้ากว่า Desktop Google จึงตัดคะแนนในมือถือมากกว่าหากหน้ามีการปิดกั้นหรือต้องรอโหลดสคริปต์ก่อนทำการแสดงเนื้อหาขึ้นมา

เราใช้ธีม Total และทำการปรับแต่งเว็บด้วยปลั๊กอินอื่นๆ อีกหลายตัว เช่น Gonzales, Ewww Image Optimizer, ShortPixel, WP Fastest Cache เป็นต้น และได้เขียนบทความเกี่ยวกับการทำ Google PageSpeed Insights ทำยังไงให้ได้ 100 ไว้ด้วย เว็บนี้ใช้ปลั๊กอินทั้งสิ้นประมาณ 20 ตัวค่ะ

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

การแก้ไขปัญหา Above-the-fold content ด้วย Autoptimize

เราสามารถแก้ไขปัญหานี้ได้ด้วยการใช้ปลั๊กอิน Autoptimize ซึ่งเป็นปลั๊กอินสำหรับการปรับแต่ง HTML,CSS และ JavaScript โดยเฉพาะ โดยปลั๊กอินนี้สามารถที่จะติดตั้งได้ฟรีผ่านทางเมนู Plugins > Add New ได้เลย การทำงานของปลั๊กอินนั้นจะทำการแยกไฟล์ CSS และ JavaScript ออกมาเป็นไฟล์แคช 2 ไฟล์ที่ผ่านการบีบอัดและทำเป็นแคชไว้เรียบร้อยแล้วและทำการโหลดแบบ defer

โดยก่อนทำการตั้งค่าเราต้องคลิก Show advanced settins ก่อนนะคะ

JavaScript

ให้ติ๊กการตั้งค่าตามรูปโดยการติ๊กที่ Optmize JavaScriopt Code ก็พอนะคะ อย่างอื่นไม่ต้องติ๊ก หากติ๊ก Also aggregate inline JS จะทำให้แคชเต็มเร็วค่ะ ส่วนช่อง Exclude scripts from Autoptimize ใช้สำหรับใส่ชื่อไฟล์ js ที่เราต้องการจะ exclude หรือยกเว้นการ optimize นะคะ อันนี้อยู่ที่ธีมและปลั๊กอินของแต่ละคน หากธีมหรือปลั๊กอินของใครเมื่อทำการ Optimize JavaScriopt Code แล้ว หน้าเว็บพัง ก็ต้องหาว่าเกิดจาก js ตัวไหน แล้วมาใส่ใน exclude นี้นะคะ ซึ่งก็อาจจะทำให้ปรับแต่งได้ไม่เต็มที่ตามใจ Google แต่ก็ต้องเอาให้เว็บเราไม่พังก่อนใช่มั๊ยล่ะคะ

CSS

ให้ทำการติ๊ก Optimize CSS Code แล้วติ๊กที่ช่อง inline all CSS อย่างที่ Google บอกนะคะ ซึ่งวิธีนี้จริงๆ แล้วตามหลักการแล้วจะไม่ค่อยดีเท่าไหร่ค่ะ อย่างด้านล่างตัวปลั๊กอินเขาก็บอกว่าอาจจะช่วยในเว็บที่มีการเข้าชมไม่เยอะมาก และอาจทำให้เว็บช้าแทน มันจะมีวิธีที่ดีกว่านั้นซึ่งเราจะสาธยายให้อ่านกันต่อไป

จากขั้นตอนเล็กน้อยเพียงเท่านี้ จะเห็นว่าผลการทดสอบ Google PageSpeed Insights ในส่วนของ mobile ของเราได้นั้น ได้คะแนนเป็น 100/100 แล้วค่ะ ส่วน Desktop นั้น ปรับขึ้นเป็น 97/100

เรามาดูปัญหาในส่วนของ Desktop กันค่ะ จากรูปด้านล่าง จะเห็นว่าเรายังโดนข้อหาที่วนเวียนอยู่กับ above-the-fold อยู่ แต่เปลี่ยนมาเป็น Prioritize visible content หรือเขาแนะนำให้จัดลำดับการแสดงเนื้อหา

หมายความว่า เราควรแสดงเนื้อหาที่ต้องแสดงขึ้นมาก่อน ซึ่งหากเราคลิกที่ลิงค์ see screenshop show original เขาก็จะแสดงรูปให้เราดูว่า Google มองเห็นเป็นแบบไหนอยู่ และเขาก็ได้ให้คำแนะนำในลิงค์ Prioritize the above-the-fold content ไว้ด้วย ว่าควรจะทำยังไง

• Structure your HTML to load the critical, above-the-fold content first
• Reduce the amount of data used by your resources

ในส่วนของข้อ 2 คือ Reduce the amount of data นั้น ปลั๊กอิน Autoptimize ได้ทำอยู่แล้วก็คือการทำ minify CSS/JS นั่นเอง แต่ในส่วนที่เราควรจะทำอีกอย่างนั่นก็คือข้อแรกที่ว่าด้วยการ Load critical, above-the-fold-first

Critical CSS

ปกติแล้วเป็นการนำเอา CSS ที่จำเป็นต่อการแสดงเนื้อหาในส่วนของ Above the fold มาแสดงก่อน แต่มักจะเป็นการยากที่เราจะทราบว่าเป็นตัวไหน เราจึงต้องใช้เครื่องมือช่วยในการสแกนและสร้าง CriticalCSS โดยมันจะรวมเอา External CSS ทั้งหลายจากทั้งธีมและปลั๊กอินที่ใช้แสดงผลในหน้านั้นมารวมเป็นไฟล์เดียวกันและทำการบีบให้มีขนาดเล็กลง โดยใช้เว็บ criticalcss.com แต่เป็นแบบ Premium เสียเงินและมีปลั๊กอินให้ใช้ร่วมกับ Autoptimize โดยเราต้องลงทะเบียนกับ criticalcss.com ก่อน แล้วติดตั้งปลั๊กอิน Autoptimize criticalcss.com power-up แล้วที่ตั้งค่าของปลั๊กอิน Autoptimize จะมีแท็บ CriticalCSS ให้เราใช้งาน

โดยเราต้องทำการตั้งค่า Autoptimize โดยเปลี่ยนจากแบบ Inline all CSS เป็น Inline and defer CSS แทน โดยปลั๊กอินจะทำการ Inline CSS เฉพาะตัวที่จำเป็นสำหรับ Above the fold แล้วทำการโหลดที่เหลือผ่านไฟล์ CSS ที่สร้างแยกไว้ต่างหากภายหลัง ซึ่งจะทำให้เว็บไซต์ของเราโหลดได้เร็วขึ้น (หากมีการแก้ไข CSS ในเว็บเราจึงจำเป็นต้องทำการเคลียร์แคชของปลั๊กอินนี้ด้วย)

หากเว็บเราไม่ได้มีหน้าที่ต่างกันมาก หรือใครจะเน้นทำหน้าสำหรับบทความอย่างเดียว ก็สามารถ Generate Critical CSS มาใส่ในช่อง Paste the above the fold CSS here ได้เลย (เตยแนะนำเว็บ generate ฟรี อีกตัวด้านล่างนะคะ) โดยไม่ต้องเสียเงินเพื่อใช้งาน criticalcss.com และตัวปลั๊กอินเสริม Critical CSS Power UP

สำหรับคนที่อยากจะทำให้สมบูรณ์แบบทั้งเว็บ เนื่องจาก CSS ของแต่ละหน้าอาจจะต่างกันเยอะ ให้ไปต่อที่ Criticalcss.com ทำการใส่ url ที่ต้องการ แล้วคลิกที่ปุ่ม Generate ระบบก็จะทำการสร้างไฟล์ CSS ใหม่ให้เราโหลดหรือคัดลอกมาใช้ในเว็บเราได้

ที่เว็บของเรา แท็บ Critical CSS ของปลั๊กอิน Autoptimize (ต้องลง CriticalCSS Power UP ก่อนถึงจะเห็น) หลังจากนำ License key มา Activate แล้ว ก็จะมีให้เราตั้ง rule สำหรับสร้างเงื่อนไขเพื่อกรอง Critical CSS ที่ได้จากการ generate ในเว็บมาใส่ โดยสามารถใส่เป็นจำเพาะเจาะจงไปเป็นหน้าๆ หรือกรองตามลักษณะเทมเพลตที่ต้องการก็ได้

วิธีการเพิ่มตัวกรองนี้ก็ทำได้ด้วยการคลิกที่ปุ่ม Add new critical CSS rule

จากนั้นสร้างเงื่อนไขด้วยการกรอก ULR ที่ต้องการ หรือหากต้องการใช้สำหรับเทมเพลตทั้งเว็บ ก็ให้เลือกจากเทมเพลตจาก Conditional tag ในช่อง Type of selector เช่น เราอาจจะ Generate Critical CSS จากหน้าบทความหน้าหนึ่ง เพื่อใช้สำหรับเป็นมาตฐานของบทความทั้งเว็บ เราก็จะเลือกเป็น is_single ซึ่งหมายถึงหน้า single post นั่นเองค่ะ

จากนั้นคัดลอก Critical CSS ที่ได้มาวางในช่องด้านล่าง แล้วคลิก Submit

เมื่อทำจนพอใจแล้ว คลิก Save Changes แล้วอย่าลืม Delete Cache ของ Autoptimize ด้วย และของปลั๊กอินแคชด้วย (WP Fastest Cache)

ตอนนี้ทั้ง Mobile และ Desktop เราก็จะได้รับการแก้ปัญหา Above-the-fold content แล้ว

อีกเว็บไซต์ที่ใช้ Generate Critical CSS ง่ายๆ และฟรี https://www.sitelocity.com/critical-path-css-generator

อีกปลั๊กอินที่เตยเคยลองใช้และสามารถนำมาทำเป็นตัวกรองกำหนด Critical CSS สำหรับแต่ละเทมเพลตหรือเพจได้เหมือนกัน  ก็คือปลั๊กอิน Page Speed Optimization for SEO ยังไงก็ลองเล่นดูนะคะ ตัวที่นำมาเขียนบทความนี้ชอบตรงที่มันใช้งานง่ายตรงไปตรงมา เรียบๆ ไม่มีอะไรมาก แต่เสียอย่างที่อาจจะไม่ฟรีนะคะ

ปัจจุบันมีหลายปลั๊กอินที่สามารถทำ CriticalCSS ได้ เช่น

• WP Rocket ตัวนี้เป็นปลั๊กอินแคช premium และมีฟังชั่นสร้าง CriticalCSS มาอัตโนมัติด้วย แต่จะอ้างอิงจากเทมเพลต ไม่สามารถสร้างทีละหน้าหรือเงื่อนไขได้ยืดหยุ่นเท่าปลั๊กอินด้านบน
• Swift Performance Lite ปลั๊กอินแคชเวอร์ชั่นฟรีก็สามารถแก้สามารถแก้ปัญหานี้ได้เช่นกัน

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