“ เนื้อหาครึ่งหน้าบน” ใน Google Pagespeed คืออะไร

ก่อนหน้านี้ไซต์ของฉัน (www.heatexchangers.ca) ได้คะแนน 98% ใน Google Page Speed มีสองสิ่งที่ฉันไม่สามารถทำอะไรได้เลยเช่นสตริงการสืบค้นจากแบบอักษรของเว็บ ฉันมีความสุขมากกับสิ่งนี้เพราะสิ่งนี้แสดงถึงทุกสิ่งที่ฉันทำได้

เมื่อเร็ว ๆ นี้ Google ได้เพิ่มสิ่งอื่นที่มีผลต่อคะแนนความเร็วของหน้าและตอนนี้ฉันได้รับเพียง 89% สำหรับ Page Speed ​​และรับคำแนะนำนี้:

• กำจัด JavaScript และ CSS ที่ปิดกั้นการแสดงผลภายนอกในเนื้อหาครึ่งหน้าบน

คำแนะนำในการแก้ไขปัญหานี้ดูเหมือนว่าจะเกี่ยวข้องกับการหลอกล่อไฟล์. css และ. js ของฉันทั้งหมดและแยกบางส่วนออกจากกันและเพิ่มแบบอินไลน์ใน html ของฉัน สิ่งนี้ทำให้ฉันสับสนเนื่องจากฉันอยู่ภายใต้การแสดงผลที่เราต้องเก็บ JS และ CSS ออกจาก HTML ให้มากที่สุด

เนื้อหา "ครึ่งหน้าบน" คืออะไรกันแน่? หากเป็นลักษณะไม่กี่แบบเช่นแบบอักษรสีพื้นหลังเป็นต้น ฉันเห็นว่ามันอาจไม่ใช่เรื่องใหญ่เกินกว่าที่จะรวมไว้ในบรรทัด ฉันไม่พบรายการว่านี่คืออะไร

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

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

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

นี่คือการนำเสนอวิดีโอจาก Google ในหัวข้อนี้:

http://www.youtube.com/watch?v=YV1nKLWoARQ

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

นอกจากนี้ยังมีลิงก์ไปยังเครื่องมือที่อาจทำให้บางส่วนทำงานโดยอัตโนมัติ ฉันไม่ได้ลองพวกเขาและ YMMV

ข้อมูลเชิงลึกของหน้า Google จะบอกคุณอย่างชัดเจนว่ากี่% ของ css ที่อ้างถึงเนื้อหาครึ่งหน้าบนถูกโหลดช้าเกินไปและหน้าอาจแสดงผลก่อนหน้านี้ กว่าที่คุณจะย้ายส่วนต่างๆของ css เพื่อให้ได้ผลลัพธ์สีเขียว ฉันทำได้เพื่อคุณ: goo.gl/GsRxNc

ลิงก์จาก Google ที่อธิบาย "ครึ่งหน้าบน" https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery

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

แหล่งที่มา - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,first%20to%20be%20loaded%20first

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