วิธีเพิ่มประสิทธิภาพเว็บไซต์ของคุณสำหรับผู้ใช้มือถือ

คุณแน่ใจหรือไม่ว่าไซต์ของคุณเหมาะกับมือถือ

คุณรู้หรือไม่ว่า Google ได้เปิดตัวนโยบายใหม่ที่เรียกว่า Mobile-First

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

การออกแบบเว็บที่ตอบสนองได้ทำให้สามารถสร้างเว็บไซต์ที่ทำงานบนทุกแพลตฟอร์มในระดับที่เท่ากันได้ แต่ถึงอย่างนั้น การออกแบบที่ตอบสนองตามอุปกรณ์เป็นเพียงเศษเสี้ยวของกลยุทธ์การเพิ่มประสิทธิภาพ UX สำหรับมือถือ

หากคุณต้องการเพิ่มประสิทธิภาพที่แท้จริง คุณจะต้องพิจารณาทางเลือกอื่นด้วย

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

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

#1: การออกแบบโดยคำนึงถึงอุปกรณ์เคลื่อนที่เป็นหลัก

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

นอกเหนือจากการออกแบบที่ตอบสนองต่อสามัญสำนึกแล้ว องค์ประกอบการออกแบบอื่นใดที่คุณควรใช้ในการออกแบบเว็บเพื่ออุปกรณ์เคลื่อนที่เป็นอันดับแรก

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

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

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

#2: การเพิ่มประสิทธิภาพทรัพยากร; รูปภาพ ไอคอน ฯลฯ

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

องค์ประกอบภาพ เช่น ภาพถ่าย ภาพประกอบ ไอคอน และวิดีโอเป็นผู้ใช้แบนด์วิธที่ใหญ่ที่สุดบนหน้าเว็บ

ขนาดหน้าเว็บโดยเฉลี่ยในปี 2018 เรียงตามอุตสาหกรรมและประเทศต่างๆ

แม้ว่าจะไม่มีการกำหนดขนาดหน้าเว็บที่ทุกคนต้องมี แต่ก็เป็นเรื่องปกติที่ขนาดหน้าเว็บที่เล็กลงจะใช้เวลาในการโหลดที่เร็วขึ้น

ดังนั้น คุณจะตัด KB พิเศษหรือแม้แต่ MB ออกจากเนื้อหาภาพของคุณได้อย่างไร

• ปรับขนาดภาพของคุณ ฟังดูง่ายใช่ไหม? ฉันไม่สามารถนับได้ว่าฉันได้เรียกดูไซต์บนมือถือกี่ครั้งเพื่อให้ภาพขนาด 1980 x 1200 โหลดเป็นพื้นหลัง ควรให้รูปภาพขนาดเต็มเป็นลิงก์ทางเลือกแทนตามความเหมาะสม การปรับขนาดสามารถลดขนาดภาพได้ถึง 80% ขึ้นอยู่กับขนาดที่คุณต้องการ สำหรับอุปกรณ์พกพา ไม่มีเหตุผลใดที่จะต้องไปเกินช่วง 600-700px เป็นส่วนใหญ่
• ลดขนาดไฟล์ด้วยการบีบอัด การบีบอัด/ปรับแต่งรูปภาพเป็นกระบวนการของการใช้ซอฟต์แวร์ของบุคคลที่สามเพื่อลดจำนวนสีที่มีอยู่ในรูปภาพ ซึ่งสามารถทำได้ในระดับที่ภาพถ่ายของคุณไม่สูญเสียคุณภาพโดยกำเนิด แต่สามารถลดขนาดไฟล์ลงได้อย่างมาก หากคุณต้องการความช่วยเหลือในการบีบอัดรูปภาพ ไม่ต้องมองหาที่ไหนนอกจากเครื่องมือบีบอัดรูปภาพที่ครอบคลุมของเรา
• สำรวจรูปแบบไฟล์อื่น ทุกคนเคยได้ยินรูปแบบไฟล์ PNG และ JPEG ท้ายที่สุดแล้วมันเป็นมาตรฐานรูปภาพโดยพฤตินัยบนเว็บ แต่ไม่นาน เทคโนโลยีล่าสุดและยิ่งใหญ่ที่สุดในการจัดส่งภาพดิจิทัลหมุนรอบตัว เว็บพี และรูปแบบไฟล์ SVG ตัวอย่างเช่น SVG ได้โดยอัตโนมัติ ปรับขนาดเป็นขนาดหน้าจอลดจำนวนทรัพยากรที่จำเป็นในการโหลดองค์ประกอบภาพเฉพาะ

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

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

#3: การโหลดล่วงหน้าและการโหลดแบบขี้เกียจ

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

มาดูตัวโหลดล่วงหน้ากันก่อน หรือที่เรียกว่าคำแนะนำเบราว์เซอร์

ตัวโหลดล่วงหน้าเป็นวิธีสำหรับหน้าเว็บในการบอกเบราว์เซอร์เกี่ยวกับโอกาสในการนำทางที่เป็นไปได้ เช่น ผู้ใช้อาจไปที่หน้า B จากหน้า A

ด้วยการโหลดล่วงหน้า ผู้ใช้สามารถแสดงหน้า B ก่อนคลิกลิงก์การนำทางบนหน้า A

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

ตัวโหลดล่วงหน้าประเภทใดที่พบบ่อยที่สุด

• ดึงข้อมูลล่วงหน้า ประเภทนี้แสดงว่า URL หนึ่งๆ มีแนวโน้มที่จะเป็นตัวเลือกการนำทางถัดไปมากที่สุด และหากเบราว์เซอร์อนุญาตคำขอ เบราว์เซอร์จะแคชทรัพยากรที่สำคัญของหน้าโดยอัตโนมัติ ซึ่งจะทำให้หน้าถัดไปโหลดเร็วขึ้นมาก
• พรีเรนเดอร์. ในขณะที่ประเภทด้านบนดึงทรัพยากรบางอย่างเท่านั้น การแสดงผลล่วงหน้าจะแคชทั้งหน้า เนื้อหาที่แสดงผลทั้งหมดจะถูกเก็บไว้ในหน่วยความจำอุปกรณ์ของผู้ใช้
• DNS-Prefetch การดึง DNS ล่วงหน้าจะแก้ไข DNS ที่ระบุและไม่มีอะไรอื่น ผลที่ตามมา หากผู้ใช้ทำการ ‘เปิด’ ไซต์ของคุณอย่างเจาะจง เท่ากับคุณประหยัดเวลาที่ใช้ในการนำทาง
• เชื่อมต่อล่วงหน้า เช่นเดียวกับด้านบน แต่ยังสร้างการเชื่อมต่อและการจับมือด้วยการเชื่อมต่อ TCP และ TLS

ตัวอย่างโค้ดสำหรับพรีโหลดเดอร์มีอะไรบ้าง

<link rel="dns-prefetch" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="preconnect" href="https://wilku.top/how-to-optimize-your-website-for-mobile-users/customURL.com">

<link rel="prefetch" href="folder/script.js" as="script">

<link rel="prerender" href="customURL.com/preview.html">

เนื่องจากตัวโหลดล่วงหน้าใช้แท็ก HTML แบบไดนามิก คุณจึงทำได้ โหลดเนื้อหาล่วงหน้า เช่น Google Fonts หรือสร้างสคริปต์แบบกำหนดเองสำหรับการโหลดเนื้อหา JavaScript ล่วงหน้าใน WordPress

BTW หากคุณใช้ WordPress ดับบลิวพี ร็อคเก็ต สามารถช่วยคุณได้เพื่อเพิ่มไซต์ของคุณ

ตอนนี้คุณรู้เพิ่มเติมเกี่ยวกับตัวโหลดล่วงหน้าแล้ว เรามาพูดถึงหัวข้อยอดนิยมอื่น ๆ กัน: การโหลดแบบขี้เกียจ

Lazy Loading คืออะไร?

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

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

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

คำแนะนำของฉันสำหรับการใช้ห้องสมุดคือ Layzr.js — โหลดภาพแบบ Lazy Loading ที่ง่ายและมีประสิทธิภาพ! มีการเปิดใช้งานสคริปต์ในหน้าแรกของโปรเจ็กต์ด้วย ดังนั้นคุณจึงสามารถดูสคริปต์ได้แบบเรียลไทม์ ผู้ใช้ WordPress สามารถค้นหาปลั๊กอินโหลดขี้เกียจจำนวนมากในที่เก็บปลั๊กอินสาธารณะ

#4: การแคชเว็บ

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

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

ชื่อที่นิยมมากที่สุดในเว็บแคช ได้แก่ Varnish, Squid และ Memcached แต่โปรดวางใจได้ว่ามีโซลูชันอื่นๆ มากมายในตลาด โดยเฉพาะอย่างยิ่งหากคุณเป็นผู้ใช้ WordPress

คุณยังสามารถลองสมัครใช้งาน CDN

CDN (เครือข่ายการจัดส่งเนื้อหา) คืออะไร

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

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

หากคุณไม่มีประสบการณ์เกี่ยวกับ CDN มาก่อน เราขอแนะนำให้ลองใช้ คลาวด์แฟลร์ — พวกเขามีแผนบริการฟรีตลอดไป และเป็นแพลตฟอร์มที่ดีในการเริ่มต้นเรียนรู้ด้วย และหาก Cloudflare ไม่เป็นไปตามความคาดหวังของคุณ ลองดูโพสต์ของเราสำหรับผู้ให้บริการ CDN ฟรีที่ดีที่สุดในตลาด

#5: AMP (เร่งหน้ามือถือ)

ของ Google โครงการ AMP เป็นการเพิ่มประสิทธิภาพมือถือบนสเตียรอยด์! โดยพื้นฐานแล้ว AMP จะแยกหน้าเว็บของคุณออกให้เหลือเพียงส่วนที่จำเป็นเพื่อมอบประสบการณ์การโหลดที่รวดเร็วเป็นพิเศษ แต่ยังให้ความสำคัญกับความสามารถในการอ่านเนื้อหาด้วย ด้วยความเร็วของหน้าเว็บมีความสำคัญเพียงใด คุณจะรวบรวมความกล้าที่จะปฏิเสธเวลาในการโหลดที่แทบจะในทันทีทันใดได้หรือไม่

โอเค คำศัพท์เหล่านี้ฟังดูดีมาก แต่ AMP ทำงานอย่างไร

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

ตัวอย่างเช่น JavaScript ไม่ทำงานกับ AMP เว้นแต่คุณจะใช้ ไลบรารี AMP JS พร้อมใช้งานบน GitHub. การใช้ไลบรารี JS ช่วยให้คุณได้ผลลัพธ์บางอย่าง เช่น การหลีกเลี่ยงตัวบล็อกโฆษณา แต่ถ้าคุณต้องการประสิทธิภาพที่แท้จริง AMP แบบดิบคือหนทางที่จะไป

กรณีศึกษาที่น่าสนใจสำหรับ AMP:

#6: ทดสอบก่อนตัดสินใจ

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

สภาพแวดล้อมการจัดเตรียมคืออะไร

วิธีที่เร็วที่สุดในการอธิบายสิ่งนี้คือการดูที่เว็บไซต์ปัจจุบันของคุณ

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

ฉันมักจะนึกถึงโพสต์ของ Ashley Harpp อย่าเสียเวลา – ทดสอบการเปลี่ยนแปลงก่อนที่จะยอมรับ.

การที่เธอมองว่าเรา ‘หลอก’ ตัวเองเพื่อหลีกเลี่ยงบางสิ่งเป็นตัวอย่างที่สำคัญของการที่เราไม่ต้องการรับผิดชอบเมื่อเราทำผิดพลาด อย่างไรก็ตาม โพสต์ของแอชลีย์ยังมีลิงก์ไปยังเครื่องมือที่มีประโยชน์สำหรับการตั้งค่าสภาพแวดล้อมการแสดงละครในพื้นที่

การทดสอบไม่ได้น่ากลัวอย่างที่คิด แต่แน่นอนว่ามันน่ากลัวเมื่อคุณลบฐานข้อมูลทั้งหมดของคุณบนเซิร์ฟเวอร์ที่ใช้งานจริงโดยไม่ตั้งใจ!

ปิดงบ

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

หวังว่าโพสต์นี้จะให้ความกระจ่างเกี่ยวกับสถานะปัจจุบันของการเพิ่มประสิทธิภาพเว็บไซต์บนมือถือ