8 เคล็ดลับในการเพิ่มประสิทธิภาพความเร็วเว็บไซต์ของคุณ

เว็บไซต์ของคุณเร็วแค่ไหน?

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

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

ขอต้อนรับอย่างอบอุ่นสู่พอดคาสต์ In Search SEO Jono Alderson

แปดขั้นตอนคือ:

1. Core Web Vitals
2. คลาวด์แฟลร์
3. เครื่องมือสำหรับนักพัฒนา Chrome
4. เทคนิคการเพิ่มประสิทธิภาพภาพขั้นสูง
5. เทคนิคการเพิ่มประสิทธิภาพแบบอักษรขั้นสูง
6. เคล็ดลับ CSS และ JavaScript
7. การแคชและการกำหนดเวอร์ชัน
8. ชุดบุคคลที่สามที่ชาญฉลาด

องค์ประกอบสำคัญแปดประการของเว็บไซต์ที่รวดเร็ว

J: เฮ้ ยินดีที่ได้มาที่นี่ ขอบคุณที่มีฉัน นี่เป็นเรื่องที่น่าตื่นเต้นมาก

D: เยี่ยมมาก โจโน่ ดีที่มีคุณอยู่ คุณสามารถหา Jono ได้ที่ jonoalderson.com Jono คุณคิดว่าจุดยืนในปัจจุบันที่ว่าไซต์ที่ช้ามีผลกระทบต่อพฤติกรรมของผู้ใช้อย่างไร

J: มีงานวิจัยมากมาย และฉันคิดว่าไม่มีอะไรเป็นข่าว มีการวิจัยย้อนหลังไปหลายทศวรรษแล้ว และทั้งหมดนี้บอกว่ามีความสัมพันธ์โดยตรงอย่างน่าประหลาดใจระหว่างจำนวนมิลลิวินาทีที่คุณทำให้ผู้คนรอ และนั่นส่งผลต่อแนวโน้มที่จะซื้อบางอย่างมากเพียงใด อาจไม่ใช่กรณีที่คนพูดอย่างมีสติว่า "โอ้ นั่นใช้เวลานานเกินไป 200 มิลลิวินาที และฉันจะไปซื้อของกับคู่แข่งของคุณ" แต่มันเป็นช่วงเวลาที่พวกเขาอาจจะมองออกไปนอกหน้าต่างหรือเปิดแท็บอื่นหรือสงสัยว่าจะทานอะไรเป็นมื้อเที่ยงและทั้งหมดนั้นก็บั่นทอนโอกาสที่พวกเขาจะอยู่ในช่วงเวลานั้นและเปลี่ยนใจหรือดำเนินการใดๆ

เมื่อเร็ว ๆ นี้ฉันเห็นงานวิจัยที่น่าสนใจจริงๆ จาก Deloitte บริษัทที่ปรึกษาขนาดใหญ่ และพวกเขาดูบางอย่างเช่นส่วนย่อยของไซต์ต่างๆ ที่ใหญ่ที่สุด 50 ไซต์ทั่วทั้งอีคอมเมิร์ซและการสร้างลูกค้าเป้าหมาย และภาคส่วนต่างๆ ในสหราชอาณาจักรและสหรัฐอเมริกา และพวกเขาพบบางอย่างเช่นการหน่วงเวลา 200 มิลลิวินาที ซึ่งเป็นเวลาที่คุณต้องกะพริบตา ซึ่งลดความเร็วของไซต์ด้วยรายได้ที่เพิ่มขึ้นประมาณ 10% และนี่เป็นเพียงหนึ่งการศึกษาดังกล่าว มีมากมายเช่นนี้ และทุกคนบอกว่าเร็วกว่า เพรียวบางกว่า เข้าถึงได้มากขึ้น และใช้งานได้มากขึ้น นั่นหมายถึงเงินที่มากขึ้นเท่านั้น ใช่ ไม่ใช่เรื่องง่ายสำหรับเราที่จะดูเรื่องนี้

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

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

D: ดังนั้น วันนี้ คุณกำลังแบ่งปันองค์ประกอบที่สำคัญของเว็บไซต์ที่รวดเร็ว โดยเริ่มจาก Core Web Vitals อันดับหนึ่ง

1. Core Web Vitals

J: ฉันคิดว่าอาจมีมากกว่านี้ แต่นี่เป็นรายการที่ฉันต้องไปแน่นอน ฉันแน่ใจว่าทุกคนคงเคยได้ยินเกี่ยวกับ Core Web Vitals แล้วในตอนนี้ แต่ถ้าคุณยังไม่ได้ Google เปิดตัวสิ่งนี้ ฉันคิดว่าในช่วงกลางปี ​​2020 และนี่คือความพยายามของพวกเขาในการสร้างเมตริกที่เป็นมาตรฐานและเป็นสากลสำหรับการวัดว่า PageSpeed ​​คืออะไร เพราะในทางเทคนิคและเชิงแนวคิด มันค่อนข้างซับซ้อน การโหลดหน้า มีขั้นตอนต่าง ๆ มากมายและสิ่งต่าง ๆ ที่ส่งผลต่อมัน ดังนั้นพวกเขาจึงลดความซับซ้อนลงในชุดเมตริกที่คุณสามารถตรวจสอบและแนวโน้มและวิเคราะห์เมื่อเวลาผ่านไป

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

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

2. คลาวด์แฟลร์

J: ถ้าฉันมีเวลาและทรัพยากรเพียงพอที่จะทำสิ่งหนึ่งเพื่อให้หน้าเว็บไซต์ของฉันเร็วขึ้น มันจะเข้าสู่ Cloudflare Cloudflare มีขนาดใหญ่มาก พวกเขาเป็นหนึ่งในบริษัทเทคโนโลยีด้านเทคนิคที่ใหญ่ที่สุดในพื้นที่ ยังมีทีมพัฒนาและธุรกิจมากมายที่เข้าใจไม่เคยได้ยินชื่อเหล่านี้มาก่อน เพราะมันค่อนข้างเนิร์ดไปหน่อย Cloudflare เป็นเครือข่ายการจัดส่งเนื้อหา เป็นโครงสร้างพื้นฐานที่อยู่ด้านหน้าเว็บไซต์ของคุณ พวกเขามีเวอร์ชันฟรี ใช้เวลาประมาณ 10 นาทีในการตั้งค่า และพวกเขาเพียงแค่ใช้เวทย์มนตร์เพื่อเร่งความเร็วไซต์ของคุณ พวกมันย่อขนาดรูปภาพของคุณโดยอัตโนมัติ ลดขนาด JavaScript ของคุณ เปลี่ยนวิธีการโหลด ทำให้แน่ใจว่าการเชื่อมต่อจะกำหนดเส้นทางไปทั่วโลกอย่างมีประสิทธิภาพมากขึ้นสำหรับการใช้งานที่แตกต่างกันในสถานที่ต่างๆ และอีก 1,000 อย่าง และนี่คือทุกสิ่งที่คุณสามารถทำได้ในทางทฤษฎี ถ้าคุณมีทีมผู้พัฒนาที่ฉลาดมากและมีทรัพยากรที่ดี แต่ทำไมคุณถึงทำในเมื่อผลิตภัณฑ์ฟรีของ Cloudflare ใช้งานได้เกือบหมด และสินค้าราคา $20 ต่อเดือนทำส่วนที่เหลือทั้งหมด

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

D: และข้อที่สาม ใช้เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome เพื่อค้นหาปัญหาคอขวดของประสิทธิภาพ

3. เครื่องมือสำหรับนักพัฒนา Chrome

ตอบ: ใช่ ดังนั้นการเรียกใช้เครื่องมือ Core Web Vitals เช่น PageSpeed ​​Insights และการทดสอบหน้าเว็บจะให้คะแนนระดับบนสุดและคำแนะนำทั่วไปบางอย่างแก่คุณ และปัญหาของคำแนะนำทั่วไปอย่างการใช้ JavaScript น้อยลงก็คือ มันไม่ง่ายเลยที่จะนำไปใช้กับเว็บไซต์ของคุณและความท้าทายของคุณ เว็บไซต์ของคุณมีเอกลักษณ์เฉพาะตัว สร้างขึ้นในวิธีที่เจาะจงมาก หากคุณต้องการก้าวไปอีกระดับของการค้นหาว่าโอกาสนั้นอยู่ที่ใด คุณต้องดูว่าเว็บไซต์ของคุณโหลดอย่างไร และหนึ่งในเครื่องมือที่ดีที่สุดที่คุณสามารถใช้ได้คือเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome

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

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

D: และข้อที่สี่ ใช้เทคนิคการเพิ่มประสิทธิภาพภาพขั้นสูง

4. เทคนิคการบีบอัดภาพขั้นสูง

J: ใช่ ฉันพูดถึง JPEG ขนาดใหญ่เป็นตัวอย่าง และนี่ยังคงเป็นเรื่องธรรมดาที่น่าอาย สาเหตุใหญ่ประการหนึ่งที่ทำให้เว็บไซต์จำนวนมากทำงานช้าก็คือมีคนอัปโหลด GIF ขนาด 10 เมกะไบต์ไปยังหน้าแรกของพวกเขา หรือพวกเขาได้ถ่ายรูปด้วยโทรศัพท์มือถือหรือกล้องของพวกเขา และพวกเขาเพิ่งพังลงใน CMS และไม่มีตรรกะใดที่บอกว่า บางทีเราควรย่อให้เล็กลงหน่อย บางทีเราควรใส่ให้พอดีกับขนาด หลายครั้งที่คุณดูเครื่องมือสำหรับนักพัฒนา Chrome และ Cloudflare คุณจะเห็นว่าคอขวดใช้เวลานานในการโหลดภาพนี้เพราะมันใหญ่ มีเครื่องมือทุกประเภทที่คุณสามารถใช้เพื่อแก้ไขปัญหานั้นได้ สิ่งที่สำคัญที่สุดคือกระบวนการใดก็ตามที่คุณใช้เพื่อสร้างภาพเหล่านั้น อาจมีเวิร์กโฟลว์ หากคุณกำลังสร้างสิ่งต่าง ๆ ใน Photoshop เมื่อส่งออกสิ่งต่าง ๆ ตรวจสอบให้แน่ใจว่าคุณกำลังส่งออกไปยังเว็บ ลองนึกดูว่า JPEG นี้ต้องการคุณภาพพิกเซลที่สมบูรณ์แบบจริง ๆ หรือเราสามารถลดคุณภาพลงเล็กน้อยและอาจประหยัดขนาดไฟล์ได้ หากเป็นเพียงเทคนิคเล็กน้อย ให้ไปที่ squoosh.app Squoosh เป็นเครื่องมือที่สร้างขึ้นโดยทีมพัฒนาของ Google พวกเขาดูเนิร์ดสุดๆ พวกเขากำลังเข้าสู่พื้นที่ของภาพจริงๆ คุณลากและวางรูปภาพของคุณ และมีตัวเลือกที่คุณสามารถคลิกเพื่อเปลี่ยน PNG เป็น JPEG ได้ คุณลากและวาง และในขณะที่คุณทำ คุณจะเห็นการเปลี่ยนแปลงคุณภาพในภาพ ฉันพอใจกับการประนีประนอมหรือไม่? และมีช่องทำเครื่องหมายขั้นสูงมากมายที่ฉันสามารถคลิกและดูว่าเกิดอะไรขึ้นและกำจัดอีกสองสามกิโลไบต์ที่นี่และที่นั่น และคุณสามารถดึงรูปภาพที่มีขนาด 2 เมกะไบต์เหลือ 200 กิโลไบต์ได้อย่างง่ายดายด้วยการลากและวางและเล่นกับการตั้งค่า มันไม่ได้หลอมรวมเข้ากับเวิร์กโฟลว์ของคุณมากนัก แต่เนื่องจากการแก้ไขอย่างรวดเร็วเพื่อลดขนาดรูปภาพที่มีปัญหาคอขวดใหญ่ๆ เหล่านั้น มันจึงยอดเยี่ยมมาก

D: ใช่ ฉันต้องเพิ่มประสิทธิภาพของภาพเพราะฉันไม่อยากยอมรับ แต่จริงๆ แล้ว ฉันยังคงใช้ Macromedia Fireworks ในการผลิตซอฟต์แวร์อยู่

J: โอ้ ฉันคิดถึงดอกไม้ไฟ มีทศวรรษที่ดีหรือว่านั่นคือของเล่นของฉัน

ด: ฉันรู้ และฉันสร้างภาพแล้วส่งออกเป็น JPEG ที่คุณภาพประมาณ 80% แล้วพูดว่า "ไม่เป็นไรสำหรับเว็บ" อาจเป็นสิ่งที่ห่างไกลเมื่อ 10 ปีที่แล้ว

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

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

5. เทคนิคการเพิ่มประสิทธิภาพแบบอักษรขั้นสูง

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

ดังนั้นหนึ่งในชัยชนะที่ง่ายที่สุดคือการโลคัลไลซ์ฟอนต์เหล่านั้น อย่าโหลดจาก Google Fonts ละเว้นคำแนะนำที่ Google Fonts ให้ไว้ในการคัดลอกและวาง CSS ใช้ Google สักเล็กน้อยและค้นหาคำแนะนำเกี่ยวกับวิธีการโฮสต์แบบอักษรเหล่านั้นด้วยตนเอง และจะแตกต่างกันไปตามการตั้งค่าและ CMS ของคุณ โดยทั่วไปแล้วจะมีปลั๊กอินและกระบวนการต่างๆ ที่จะทำให้สิ่งนี้ตรงไปตรงมา ที่โกนออกทั้งหมดนั้น แล้วอีกอย่างที่คุณต้องการทำคือดูว่าฉันกำลังโหลดแบบอักษรนี้จริง ๆ และฉันโหลดมันอย่างไร

ใน CSS การโหลดแบบอักษรสมัยใหม่ คุณสามารถกำหนดชุดอักขระเฉพาะได้ ดังนั้น ถ้าคุณรู้ว่าเว็บไซต์ของคุณเป็น เช่น ส่วนใหญ่เป็นภาษาอังกฤษ คุณอาจไม่จำเป็นต้องโหลดอักขระแบบอักษรสำหรับร่ายมนตร์ละตินแบบขยายทั้งหมด ซึ่งเกิดขึ้นจริงตามค่าเริ่มต้น ดังนั้น แบบอักษรที่คุณกำลังโหลด คุณใช้ AZ เท่านั้น หนึ่งถึงเก้า แต่จริงๆ แล้ว คุณกำลังโหลดอักขระแปลก ๆ 200 ตัวที่ไม่เคยปรากฏบนหน้าเว็บของคุณ ดังนั้นหากคุณสามารถแกะสลักมันได้ มันก็จะเร็วกว่ามาก และคุณยังสามารถพูดได้ว่า "ฉันต้องการให้แบบอักษรนี้โหลดอย่างรวดเร็ว แต่อาจไม่ถูกแคชหรือไม่ หรือไม่ว่าจะอยู่ที่ใด ฉันต้องรอให้โหลดนานเท่าใด และฉันจะกลับไปทำอย่างอื่นอีกไหม หรือฉันแค่แสดงพื้นที่ว่างในที่ที่ควรจะเป็น?” มีการตั้งค่าต่างๆ ที่คุณสามารถปรับแต่งได้และเครื่องมือต่างๆ ที่คุณสามารถ Google ใช้เพื่อเพิ่มประสิทธิภาพได้ ในทำนองเดียวกัน ในขณะที่รูปภาพที่คุณต้องการดูทุกบิต ให้ซักถามจริงๆ ว่าคุณโหลดแบบอักษรเหล่านั้นอย่างไร csstricks.com มีคำแนะนำที่ดีบางประการ สำหรับหลากหลายวิธีที่คุณสามารถเลือกได้และเลือกสิ่งนี้ แต่ดู CMS และสแต็กของคุณอีกครั้งจะมีปลั๊กอินและการซื้อเพื่อให้สิ่งนี้ง่ายขึ้น

D: และข้อที่หก ใช้เทคนิค CSS และ JavaScript

6. CSS และ JavaScript Tricks

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

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

D: และข้อที่เจ็ดคือการใช้ประโยชน์สูงสุดจากการแคชและการกำหนดเวอร์ชัน

7. การแคชและการกำหนดเวอร์ชัน

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

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

หากคุณมีการตั้งค่าเว็บไซต์ที่ซับซ้อนมากขึ้น คุณสามารถทำได้ด้วย Cloudflare กับผลิตภัณฑ์ Workers ซึ่งภายใต้ผลิตภัณฑ์ Page Rules จะช่วยให้คุณกำหนดตรรกะของคุณเองได้ แต่โดยพื้นฐานแล้ว หลักการคือ คุณไม่ต้องการให้เว็บไซต์ของคุณทำอะไร หากมีคนเปิดหน้าเว็บของคุณ คุณต้องการให้หน้านั้น ทุกบิตของ JavaScript และทุกบิตของสไตล์ให้บริการจากทุกที่ที่ศูนย์ข้อมูลที่ใกล้ที่สุดมาจากคุณ เซิร์ฟเวอร์ของฉันอยู่ในนอร์เวย์ ฉันคิดว่า แต่ถ้าคุณเปิดเว็บไซต์ของฉัน ตอนนี้ ทุกอย่างในนั้นมาจากแมนเชสเตอร์ เพราะนั่นเป็นที่ที่ใกล้ที่สุดที่ Cloudflare มีศูนย์ข้อมูล และคุณสามารถแก้ไขสิ่งนี้ได้ คุณสามารถดูสิ่งนี้ได้ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome คุณสามารถเพิ่มคอลัมน์พิเศษในมุมมองที่ระบุว่านี่เป็นการแคช Cloudflare หรือไม่ และคุณสามารถเริ่มเลือกเชอร์รี่และปรับแต่งการตั้งค่าเหล่านั้นได้ เพื่อให้แน่ใจว่าจะไม่มีสิ่งใดมากระทบกับส่วนหลัง

D: และนั่นนำเราไปสู่สิ่งสุดท้าย ข้อที่แปด ใช้ชุดอุปกรณ์ของบุคคลที่สามที่ชาญฉลาด

8. ชุดบุคคลที่สามที่ชาญฉลาด

J: มีเยอะแยะไปหมด คุณก็แค่หลอกล่อด้วยของพวกนี้ ฉันมีสองรายการโปรดที่แท้จริงในขณะนี้ หนึ่งคือ Instant Page ซึ่งอยู่ที่ instant.page ซึ่งมีโดเมนที่น่าสนใจ นี่มันเจ๋งจริงๆ จึงไม่ทำให้เว็บไซต์ของคุณเร็วขึ้นในทันที แต่ทำให้การนำทางในภายหลังเร็วขึ้น ดังนั้นเมื่อผู้ใช้เลื่อนเมาส์ไปที่ลิงก์บนหน้าเว็บ จะมีการโหลดล่วงหน้าในพื้นหลังของเบราว์เซอร์ของคุณ ดังนั้นเมื่อผู้ใช้คลิก ลิงก์จะพร้อมใช้งานแล้ว และพวกเขาก็มีงานวิจัยมากมายที่บอกว่าคนทั่วไปเลื่อนเมาส์ไปที่ลิงก์เป็นเวลา 16 มิลลิวินาทีก่อนจะคลิกจริงๆ จึงมีเวลาบัฟเฟอร์เล็กน้อยที่นั่น และใน 16 มิลลิวินาทีนั้น ก็เพียงพอแล้วที่จะเริ่มโหลดหน้าในเบื้องหลัง จึงรู้สึกได้ทันที

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

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

D: ฉันพยายามค้นหา URL ของ Party Town เพราะถ้าคุณค้นหาใน Google ว่ามันค่อนข้างหายาก แต่มันอยู่ใน GitHub

เจ: ครับ ฉันเพิ่งส่งลิงก์ที่คุณสามารถแชร์ได้ มันเป็นเบต้ามาก มันเป็น GitHub มาก มันช่างโง่เขลาและนักพัฒนามากในขณะนี้

Pareto Pickle - ทำการเปลี่ยนแปลงเล็กน้อย 100 ครั้ง

D: มาปิดท้ายด้วย Pareto Pickle กันเถอะ Pareto กล่าวว่าคุณสามารถได้ผลลัพธ์ 80% จาก 20% ของความพยายามของคุณ กิจกรรม SEO ใดที่คุณอยากแนะนำที่ให้ผลลัพธ์ที่น่าทึ่งสำหรับความพยายามเพียงเล็กน้อย

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

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

D: คุณไม่จำเป็นต้องจัดลำดับความสำคัญของสิ่งต่างๆ แต่แน่นอนว่าบางสิ่งมีผลกระทบมากกว่าสิ่งอื่น

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

รู้อะไรไหม ฉันเปลี่ยนใจ สิ่งที่ 80% ที่คุณสามารถทำได้คือไปหา Cloudflare

D: ฉันเป็น David Bain โฮสต์ของคุณ Jono ขอบคุณมากสำหรับการอยู่ในพอดคาสต์ In Search SEO

J: ขอบคุณที่มีฉัน นี้เป็นที่น่ายินดี

D: และขอขอบคุณสำหรับการฟัง