ปรับเว็บให้ผ่านเกณฑ์ Core Web Vitals และให้ได้คะแนน Page speed 90+

นอกจากต้องทำเว็บให้มีคะแนน Page speed สูงๆ เราต้องคำนึงถึงประสบการณ์การใช้งานหน้าเว็บ เพื่อให้ผ่านเกณฑ์ Core Web Vitals ด้วย

Core Web Vitals คือ เมตริกที่ใช้วัด Page Experience (ประสบการณ์การใช้งานหน้าเว็บ) โดยทาง Google จะประกาศใช้หลักเกณฑ์นี้อย่างเป็นทางการในเดือนมิถุนายน 2021 นี้ครับ แน่นอนย่อมส่งผลกระทบต่ออันดับในหน้าผลการค้นหา (SERP) สำหรับเว็บที่ยังไม่ผ่านเกณฑ์นี้ด้วย

อ่านเพิ่มเติม: Core Web Vitals คืออะไร?

ดังนั้นพวกเราจึงมีโจทย์ยากเพิ่มขึ้น ว่าเราจะปรับแต่งเว็บของเรายังไง ให้เปิดเว็บแล้วเร็วในความรู้สึกจริงๆ (ไม่เกิน 2 วินาที) คะแนน Pagespeed สูงๆ (80 คะแนนขึ้นไป) และผ่านเกณฑ์ Web Vitals

ปัญหาที่หลายๆ คงเคยเจอ บางเว็บคะแนน Pagespeed สูง แต่หน้าเว็บดูไม่สวยเลย เพราะเขาต้องเอาบางอย่างออกไป โดยเน้นแต่เรื่อง Page speed อย่างเดียว แบบนี้ก็ยังไม่ถูกต้องนัก เพราะเป้าหมายของการทำ seo ยังเป็นเหมือนเดิม ไม่ว่า Google จะอัปเดทอัลกอลิทึ่มอะไรก็ตาม คือ การทำเว็บเพื่อให้ User ชอบ มากกว่าที่จะทำเว็บเพื่อ Google Bot ชอบเพียงอย่างเดียว

สารบัญเนื้อหา

• เงื่อนไขการปรับแต่ง
• องค์ประกอบการทำเว็บให้โหลดเร็ว
• เครื่องมือที่ต้องใช้
• เปลี่ยนฟอนต์ด้วย Use Any Font
• ตั้งค่าปลั๊กอิน Autoptimize
• ตั้งค่าปลั๊กอิน Wp-Rocket
• ตั้งค่าปลั๊กอิน Perfmatters
• เชื่อมต่อกับ Cloudflare
• หลักการวาง Element ให้ผ่านเกณฑ์ Web Vitals
• สรุป

เงื่อนไขการปรับแต่ง

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

ฟังชั่นต่างๆ ก็อยากได้ เว็บโหลดเร็ว เราก็อยากได้ ดังนั้นแนวทางการปรับแต่งเว็บตามบทความนี้ เราจะโฟกัสไปที่เว็บไซต์ที่ใช้งานจริง มีฟังชั่นครบทุกอย่าง

 โดยเราได้วางเงื่อนไขเอาไว้ก่อน ตามนี้ครับ

• เว็บนั้นต้องมีการใช้ Page Builder
  (สำหรับเว็บตัวอย่างในบทความนี้เราจะใช้ธีม Flatsome เป็นตัวหลัก)
• Woocommerce ต้องใช้งานได้ ไม่พัง
• มีการเปลี่ยนฟอนต์ เพื่อให้เว็บดูสวย
• ต้องมี Social share
• ติดตั้ง Google Analytic และ Facebook Pixel
• มีฟอร์มเก็บข้อมูล
• ลงปลั๊กอิน SEO
• ติดตั้ง Recaptcha
• ใส่ effect มีสไลเดอร์ สวยๆ
• ใส่คลิป YouTube
• ใส่ google map
• ต้องไม่มีอาการกระตุก ตอนเปิดใช้งานจริง
• ต้องเปิดคอมเมนต์ได้
• ใช้ปลั๊กอิน เกิน 15 ตัว
• ต้องผ่านเกณฑ์ Core Web Vitals ทุกหน้าหลัก
  ได้แก่ Page, Post, Product Category และหน้า Single Product
• ต้องไม่มีการแก้โค้ด ปรับแต่งในรูปแบบที่คนทั่วไปทำได้

ตัวอย่างผลลัพธ์ที่เราต้องการ มีดังนี้

เว็บไซต์ต้องใช้งานได้จริง ใช้ปลั๊กอิน 15 ตัวขึ้นไป

สัญญาณของประสบการณ์ใช้งานหน้าเว็บ (Page experience signals)

จุดนี้เราต้องไปเปิดดูที่ Google search Console นะ

คะแนน Page Speed หมวด Mobile หน้า Page ต้องได้ 80+ และผ่านเกณฑ์ Web Vitals

คะแนน Page Speed หมวด Mobile หน้า Post ต้องได้ 80+ และผ่านเกณฑ์ Web Vitals

คะแนน Page Speed หมวด Mobile หน้า Product Category ต้องได้ 80+ และผ่านเกณฑ์ Web Vitals

คะแนน Page Speed หมวด Mobile หน้า Single Product ต้องได้ 80+ และผ่านเกณฑ์ Web Vitals

 

องค์ประกอบการทำเว็บให้โหลดเร็ว

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

1. เลือกโฮสที่มีคุณภาพ
2. เลือกธีมที่ดี
3. ใช้ปลั๊กอินเท่าที่จำเป็น
4. องค์ประกอบการปรับความเร็วเว็บ
5. แก้ปัญหาทางเทคนิคด้วย Wp Rocket
6. บีบอัดรูปภาพด้วย Imagify
7. ใช้ฟอนต์ฝังลงบนเว็บตรงๆ
8. ไม่ใช้ script ที่เป็น third party
9. ติด tracking code เท่าที่จำเป็น
10. ทำ Cloudflare

ซึ่งทำ 10 หัวข้อ ผมได้เขียนอธิบายไว้แบบละเอียดไว้แล้ว ผมแนะนำว่าพวกเราควรกลับไปทำความเข้าใจจุดนี้ก่อนได้ที่บทความนี้: ทำเว็บ WordPress ให้โหลดเร็ว

เครื่องมือที่ต้องใช้

หากเราไม่สนใจเกณฑ์ Web Vitals เราใช้เพียงปลั๊กอิน Wp-Rocket เพียงตัวเดียว เว็บของเราก็เปิดเร็วขึ้นได้แล้ว แต่เมื่อ Google แจ้งว่าจะยกระดับประสบการณ์ใช้งานเว็บไซต์ด้วย Web Vitals มาเป็นปัจจัยสำคัญการการจัดอันดับเว็บ เราก็ควรปรับตัวตามด้วย เพื่อให้เว็บเราได้รับผลกระทบด้าน SEO น้อยที่สุด

การใช้งานธีม+Page Builder ข้อดี คือ มันใช้งานง่าย แต่ข้อเสีย มันมีการโหลด Script ต่างๆ มากเกินไป ทำให้คะแนน Google page speed ไม่ค่อยดี ดังนั้นเราจึงใช้ปลั๊กอิน Wp-Rocket ตัวเดียว แม้ว่าเว็บเราจะเปิดเร็วในด้านความรู้สึกแล้วก็จริง แต่ตัวเลขคะแนนนั้นยังดีไม่พอ เราจำเป็นต้องใช้เครื่องมืออื่นๆ มาแก้ปัญหาจุดนี้เพิ่มด้วย

เครื่องมือที่เราต้องใช้ มีดังนี้

1) ปลั๊กอิน Use Any Font

การเปลี่ยนฟอนต์บนเว็บให้ดูสวยงาน เราทำได้ 2 วิธีคือเรียกใช้ฟอนตืจาก Google Font กับเอาฟอนต์ฝั่งลงบนเว็บตรงๆ จริงแล้วผลลัพธ์ด้านความรู้สึกเว็บเปิดช้าเร็วแถมไม่แตกต่างกัน แต่มันจะติดปัญหา Eliminate render-blocking resources แจ้งเตือนบน Google pagespeed ทำให้คะแนน speed ได้น้อย

จะแก้ปัญหานี้ได้ อาจต้องใช้วิธีฝั่งฟอนต์ลงไปที่ server แทน ปลั๊กอินที่เราจะใช้ฝั่งฟอนต์ลงเว็บก็คือ Use Any Font นั้นเอง แต่ว่าตัวฟรีเราใช้เปลี่ยนฟอนต์ได้แค่ตัวเดียว หากเว็บคุณมีหลายฟอนต์คุณอาจต้องใช้ตัวเสียเงินจะมีค่าใช้จ่ายประมาณ 9.99us ต่อ 1 เว็บไซต์ครับ

2) ปลั๊กอิน Autoptimize

องค์ประกอบหลักของการทำเว็บให้โหลดเร็ว คือ ลดขนาดของ CSS, JavaScript และ  HTML คือการลบโค้ดที่ไม่จำเป็น เช่นลบอักขระตัวอักษรของโค้ด ลบช่องไฟ การเว้นบรรทัด (Minification / Concatenation) ซึ่งการทำแบบนี้เราทำด้วยตนเองไม่ได้ จากการทำสอบปลั๊กอิน Autoptimize ทำหน้าที่จุดนี้ได้ดีกว่าตัว Wp-rocket และตัวปลั๊กอิน Autoptimize ใช้ตัวฟรีก็เพียงพอแล้วครับ

3) Wp Rocket

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

ความสามารถหลักๆ ที่เราจำเป็นต้องใช้จาก Wp-rocket ก็คือ การทำ Cache, เคลียร์ Database, ทำ Minification, GZIP Compression, Lazy Load

แต่ปลั๊กอิน Wp Rocket ไม่ใช่ปลั๊กอินฟรี ถ้าคุณอยากใช้ คุณจำเป็นต้องซื้ออย่างเดียวครับ โดยราคาแพคเกจเริ่มต้นคือ 49 us และต้องเสียเงินต่ออายุทุกปีนะ

4) ปลั๊กอิน Perfmatters

Perfmatters ทำหน้าที่ เอาไว้ปิด JavaScript และ ปิด CSS ที่ไม่ได้ใช้บนหน้าเว็บนั้นออก หมายความว่า ทุกครั้งที่มีการโหลดหน้าเว็บ มันจะโหลดข้อมูลทุกอย่างที่มากจากธีม และปลั๊กอินที่เราใส่มาเพิ่ม แต่บางหน้าฟังชั่นของปลั๊กอิน บนหน้าเว็บนั้นบางทีเราก็ไม่จำเป็นต้องใช้ เราต้องใช้ Perfmatters ช่วยปิดนั้นเอง

เมื่อเราสามารถปิด JavaScript และ ปิด CSS ที่ไม่ได้ใช้ออกไปได้ จะช่วยให้หน้าเว็บเราโหลดเร็วขึ้น และคะแนน Pagespeed เร็วขึ้นด้วย

ตัวอย่างการโหลด JavaScript และ CSS ที่เยอะเกินไป มันจะไปแจ้งเตือนบนหน้า Google Pagespeed insight แบบนี้

เราต้องปิดสคริปพวกนี้ให้เหลือน้อยที่สุด และเว็บเราต้องไม่พังด้วย

ปลั๊กอิน Perfmatters ตัวนี้ไม่ฟรี มีค่าใช้จ่าย ราคาเริ่มต้นคือ 24.95us ครับเป็นแบบเสียรายปีนะ

5) CloudFlare (CDN)

CloudFlare คือ ผู้ให้บริการ CDN (Content Delivery Network) ตัว CDN จtทำหน้าที่กระจายเนื้อหาของเราออกไปตามเซิฟเวอร์ต่างๆ ทั่วโลก และเมื่อมีผู้เข้าชมจากจุดไหน ระบบก็จะส่งข้อมูลให้ชมจากเซิฟเวอร์จุดที่อยู่ใกล้ที่สุด ดังนั้นจึงทำให้เว็บของเราเปิดเข้าชมได้เร็วขึ้นจากสถานที่ต่างๆ ทั่วโลก เพราะมันโหลดจากที่ที่ใกล้ที่สุดนั่นเอง

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

จุดเด่นของการทำ CDN บน CloudFlare คือ เขาให้เราใช้บริการฟรีได้เลย

เปลี่ยนฟอนต์ด้วย Use Any Font

สำหรับการปรับแต่งจุดแรก หากต้องการให้เว็บของเรามีคะแนน Pagespeed สูงๆ คือ เราต้องฝั่งฟอนต์ลงบนเว็บของเราเลย ซึ่งมีแนวทางการทำดังนี้

1) ไปโหลดฟอนต์ที่ต้องการมาเก็บไว้ เข้าไปเว็บ Google Font เลือกฟอนต์ที่เราต้องการ

คลิกดาวน์โหลดฟอนต์ได้เลย มันจะเป็นไฟล์ zip ฟอนต์ต่างๆ จะอยู่ด้านไหน ในที่นี่ผมขอเลือก 2 ฟอนต์ คือ ฟอนต์ Kanit กับ ฟอนต์ Sarabun

แตกไฟล์ zip ออกมาให้เรียบร้อย เราจะเห็นรายชื่อนฟอนต์แบบนี้ครับ

2) ติดตั้งปลั๊กอิน Use Any Font

แนะนำว่าให้ซื้อแบบเสียเงินนะ ให้ไปซื่อบนเว็บนี้ครับ  Use Any Font

ไปที่ตัวตั้งค่าปลั๊กอินบนเว็บ ใส่ license ให้เรียบร้อย

อัพโหลดฟอนต์ที่เราโหลดมาเข้าไป ไปที่ Upload Font > Choose File เราก็ไปเอาไฟล์ฟอนต์ที่เราโหลดมาใส่ > ที่ Font Name เราก็ตั้งชื่อฟอนต์ลงไปให้เรียบร้อยด้วย

อัพโหลดไปทั้ง 2 ฟอนต์ ผลลัพธ์ก็จะเป็นแบบนี้ครับ

ตรงหัวข้อ setting เลือก Font Display Property ให้เลือกเป็น swap ด้วยนะ

3) การเรียกใช้งานฟอนต์ที่เราใส่เข้าไป

ถ้าคุณใช้ธีมและ Page Builder ดังต่อไปนี้ ตัวปลั๊กอินเขาจะ integrate รวมเข้าไปที่ตัวระบบเลย เราเคยเปลี่ยนฟอนต์ตรงไหน ก็เปลี่ยนตรงจุดเดิมของ Theme option ที่เราเคยใช้เปลี่ยนฟอนต์ได้เลย

ตัวอย่างการเรียกใช้ฟอนต์ สำหรับเว็บที่ใช้ธีม Flatsome

ให้เราไปที่ Theme option > Style > Typography

เลือกชื่อฟอนต์ที่เราได้ตั้งเอาไว้ตอนอัพโหลดฟอนต์ (จะมีคำว่า Use Any Font) จากนั้นให้กด Publish เพื่อ Save ให้เรียบร้อย

หลักจากที่เรากด Publish เรียบร้อยแล้ว ให้ดูด้านบนสุดของหน้าเปลี่ยนฟอนต์ จะมีคำว่า Disable Google Fonts. No fonts will be loaded from Google ให้ติ๊กเลือกช่องนี้ แล้วกด Publish ให้เรียบร้อย

การเปลี่ยนฟอนต์ ด้วยปลั๊กอิน Use Any Font เป็นอันเรียบร้อยครับ

สำหรับใครต้องการดูเป็นคลิปวีดีโอ ก็ดูวิธีการเปลี่ยนฟอนต์ตามคลิปนี้ได้เลยครับ

ตั้งค่าปลั๊กอิน Autoptimize

เราต้องใช้ปลั๊กอิน Autoptimize ลดขนาดของ CSS, JavaScript และ  HTML ปลั๊กอินนี้เป็นตัวฟรี ทุกคนสามารถเข้าหลังบ้าน WordPress แล้วไปเพิ่มปลั๊กอินมาใส่ได้เลย

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

การตั้งค่าเบื้องต้นที่ผมทดสอนบนธีม Flatsome และปลั๊กอินต่างๆ ที่ใส่บนเว็บผม ที่ปรับแล้วไม่พัง จะมีการตั้งค่าดังนี้

เข้าไปที่เมนูตั้งค่าปลั๊กอิน  Autoptimize พวกเราสามารถเลือกติ๊กตามผมได้เลย

ที่หัวข้อ JS, CSS & HTML ติ๊กตามนี้

หัวข้อ Image ผมไม่ได้ติ๊ก เพราะผมใช้ปลั๊กอิน Imagify ในการบีบรูปภาพ และทำภาพ Webp ไว้แล้ว

Critical css จุดนี้เราก็ไม่ใช้ เพราะเราจะทำ Critical css ผ่นาปลั๊กอิน Wp-Roket แทนครับ

ที่หัวข้อ Extra เราติ๊กตามนี้

จุดสำคัญของหัวข้อ Extra ก็คือการทำ Preload specific requests ดูช่องที่ลูกศรชี้นะ จุดนี้แหละ เราจะเอาไว้แก้ปัญหา แจ้งเตือนโหลดฟอนต์ บน Google pagespeed insight

ให้เราไปที่หน้าเว็บ Google pagespeed insight วาง url เว็บตัวเองลงไป แล้วกดวิเคราะห์ จากนั้นให้ดูที่ผลลัพธ์

ถ้าเจอแจ้งเตือนเรื่องการโหลดฟอนต์ตามรูป ให้เราเอาเมาส์ไปชี้แต่ละบรรทัด แล้วคลิกขวา คลิก copy link

แล้วเอาลิงค์นั้นไปวางในช่อง Preload specific requests

ถ้าใครเจอหลายอันก็ไปไปวางต่อกันในช่องนั้น แล้วใช่เครืองหมาย , (comma) ในการแยกระหว่าง url ดูตามรูปนะ

สำหรับการตั้งค่าบน Autoptimize ก็จะมีอยู่เท่านี้

ตั้งค่าปลั๊กอิน Wp-Rocket

ไปซื้อปลั๊กอิน แล้วติดตั้งบนเว็บให้เรียบร้อยก่อนนะ สำหรับการตั้งค่ามีดังนี้

ตั้งค่าโหมด Cache

ตั้งค่าโหมด File optimization

ตั้งค่าโหมด Media

ตั้งค่าโหมด Preload

ตรงช่อง Prefetch DNS Requests ใส่ข้อมูลนี้ไปเลย

//fonts.googleapis.com

//fonts.gstatic.com

//www.google-analytics.com

//ajax.googleapis.com

//connect.facebook.net

//www.googletagmanager.com

//maps.google.com

//secure.gravatar.com

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

ส่วนช่อง Preload Fonts

เราก็เอา url จากที่เราใส่บน ช่อง Preload specific requests ของปลั๊กอิน Autoptimize มาวางที่ช่องนี้ด้วย บางที่มันใส่ช่องเดียวมันไม่ทำงาน อาจต้องทดสอบด้วยการใส่คู่กันไปเลย

ตั้งค่าโหมด Advanced Rules

ตรงช่อง Never Cache URL(s)

ให้เราใส่หน้าประเภท ที่ต้องให้ลูกค้ากรอกข้อมูล เช่นหน้า แจ้งชำระเงิน หน้า checkout หน้า cart เป็นต้น หน้าพวกนี้เราจะไม่ทำ Cache เพื่อความสเถียรตอนใช้งานจริงนั้นเอง

ตั้งค่าโหมด Database

ในส่วนของ Databases เราสามารถกดเคลียร์บ่อยๆ หรือตั้งเวลา เคลียร์ Database อัตโนมัติไว้ได้เลย สัก 1 สัปดาห์ เคลียร์ครั้งนึง

ตั้งค่าโหมด Heartbeat

ตั้งค่าโหมด Add-ons

ให้เปิดใช้งาน ตรงคำสั่ง Google Analytic กับ Facebook Pixel

สำหรับการตั้งค่า Wp-Rocket ก็จะมีประมาณนี้

ตั้งค่าปลั๊กอิน Perfmatters

ไปซื้อปลั๊กอิน Perfmatters แล้วมาติดตั้งบนเว็บให้เรียบร้อย หน้าที่ของ Perfmatters เอาไว้ปิด JavaScript และ ปิด CSS ที่ไม่ได้ใช้บนหน้าเว็บนั้นออก

สำหรับการตั้งค่าต่างๆ มีดังนี้

ที่โหมด option general

จุดที่ต้องระวังคือ Remove jQuery Migrate แต่ละคนใช้ Pagebuilder ไม่เหมือนกัน ถ้าใครปิดใช้งานจุดนี้ แล้วพวก page builder ไม่ทำงาน เราก็ต้องปิดจุดนี้ไม่ต้องเปิดใช้ แต่ถ้าใครใช้งานธีม Flatsome คลิกปิดใช้งานตามผมได้เลยครับ

โหมด option > lazy loading

โหมดนี้เราไม่ต้องเปิดใช้งาน เพราะใช้ความสามารถทำ lazy load จากตัว Wp-rocket ไปแล้วนั้นเอง

ตั้งค่าโหมด options > Woocommerce

ถ้าเว็บใครไม่มี Woocommere ก็ง่ายเลยคือไม่ต้องสนใจจุดนี้ แต่ถ้าเว็บใครมี Woocommerce จุดที่เราสามารถปิดได้แล้วเว็บไม่พังจะมี 1 จุด ตามรูปเลย ปิดแค่ตัวนี้พอนะ

ส่วนที่ Extras > General จุดนี้ปล่อยว่างไว้ ไม่ต้องทำอะไร

ที่ Extras > Assets ติกปิด 2 จุดตามรูปได้เลย

ที่ Extras > Preloading เลือกเปิดตามรูปได้เลย

ที่ Extras > Database เราไม่ได้ใช่ ไม่ต้องไปตั้งค่าอะไร

ที่ Extras > Tools เลือกเปิดใช้งานแค่อันเดียว

วิธีการปิด JavaScript และ ปิด CSS ที่ไม่ได้ใช้ออกจากแต่ละหน้า

จุดนี้ถือว่าเป็นจุดสำคัญ ที่จะช่วยให้คะแนน Page speed เราสูงขึ้นได้นั้นเอง

ขั้นตอนแรกให้เราเปิดหน้าเว็บที่เราต้องการปิด ปิด JavaScript และ ปิด CSS ที่ไม่ได้ใช้แล้วดูที่ admin bar ด้านบน คลิกคำว่า script manager

เราจะเจอหน้าตา option แบบนี้

จากรูปภาพด้านบนพวกเราพอจะเริ่มเห็นไอเดียการใช้งานมั้ย

เช่นหน้าเว็บนี้ของเรา ไม่ได้มีฟอร์มเก็บข้อมูลจากปลั๊กอิน contact form7 แสดงว่า JavaScript และ CSS ของปลั๊กอินนี้ ไม่จำเป็นต้องทำงานบนหน้าเว็บนี้ เราก็เลือกที่จะปิดมันได้เลย

ส่วนการปิด เขาก็จะมี option ให้เลือก ว่าเราจะปิดมันทุกหน้า หรือเลือกปิดเฉพาะหน้าเว็บนี้หน้าเดียว

ถ้าเว็บเราหน้า contact form มีการเรียกใช้งานไว้แค่หน้าเดียว เราเลือกปิดแบบ Everywhere ได้เลย

แล้วให้กลับไปหน้า Contact ที่มี form ที่เราสร้าง แต่ตรง Script Manager ของหน้าที่มีฟอร์ม เราก็จะตั้งค่า ยกเว้นการปิด Script ได้ แบบตัวอย่างด้านล่าง

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

ถ้าปิดแล้วทุกอย่างทำงานปกติ เราปิด script หรือ css นี้ได้ แต่ถ้าเราปิดแล้ว หน้าเว็บมีอาการผิดปกติ เราก็แค่ไม่ต้องปิด script นี้ แล้วไล่ปิดตัวอื่นๆ แทน แต่เราต้องทดสอบ แล้วเทสไปเรื่อยๆ นะ

ตัวอย่างการปิด script บนเว็บของผม

**สำหรับคนที่ใช้ธีม Flatsome จะมี script ที่ห้ามปิดดังนี้ (เพราะถ้าปิดแล้วมันเว็บจะพังหรือเพี้ยนได้)

หัวข้อทั่วไป

• wc-cart-fragments: ตัวเลขสินค้าในตะกร้าไม่ขึ้น ในโหมดมือถือ
• flatsome-js: เมนูในมือถือไม่ทำงาน
• flatsome-main css: หน้าเว็บพัง
• flatsome-shop: หยิบใส่ตะกร้า layout จะพัง
• flatsome-icon: ไอคอนที่เมนูจะไม่แสดง

หัวข้อ misc       

• jquery-core: สไลเดอร์พัง
• hoverintent-js: เมนูแอดมินพัง เครียแคชไม่ได้
• hoverIntent: สไลเดอร์พัง
• admin-bar: แถบแอดมินบาร์จะพัง

บทความนี้ยังไม่เสร็จเรียบร้อย กำลังอัพเดทให้เสร็จในเร็วๆ นี้ครับ

ยังเหลือหัวข้อการวาง layout หรือการใช้งาน Element ของ Page Builder ต่างๆ ผมจะไกด์ไลน์ หลักการว่างเอาไว้ให้ครับ ว่าอะไรควรทำ อะไรไม่ควรทำ ที่จะทำให้คะแนน Page Speed เราสูงขึ้นได้

• แชร์
• ส่งไลน์