ฉันใช้การทดสอบความเร็วสูงในบล็อกและฉันมักจะได้รับการร้องเรียนเกี่ยวกับ CSS ที่ไม่ได้ใช้ แต่นี่ไม่ใช่ CSS ที่ฉันไม่เคยใช้มันไม่ได้ใช้ในหน้านั้น
ตอนนี้ฉันทำงานในรูปแบบที่มีโครงสร้าง แต่ยังคงต้องมี CSS บางอย่างในไฟล์ที่จะไม่ใช้เพราะคุณต้องการมันในหน้าอื่น
ฉันไม่คิดว่าการใช้ไฟล์ CSS ที่แตกต่างกันในหน้าเว็บที่แตกต่างกันเป็นวิธีที่จะไปฉันคิดว่าคุณดีกว่ามากเพียงแค่สร้างไฟล์ขนาดใหญ่หนึ่งไฟล์ที่สามารถแคชได้
ตอนนี้มีวิธีจัดการกับสิ่งนี้อย่างสง่างามหรือคุณแค่ติดกับมัน
คำตอบ:
การยืนยันว่าคุณดีกว่าด้วยไฟล์ CSS ที่ใหญ่กว่านั้นถูกต้อง มีแนวโน้มว่าจะมีเพียงไม่กี่ KB เมื่อ gzipped และควรเก็บไว้ในแคชดังนั้นจึงไม่มีค่าใช้จ่ายมาก มีบางสิ่งที่ควรค่าแก่การตรวจสอบ
หากมีการใช้ CSS บางรายการในหน้าเดียวอาจเป็นการดีกว่าที่จะวาง CSS บนหน้าเว็บในบางแท็กสไตล์ (หมายเหตุ: สิ่งนี้อาจทำให้ยากต่อการบำรุงรักษาโดยเฉพาะเมื่อคุณตัดสินใจใช้สไตล์ที่คล้ายคลึงกันในภายหลัง)
หากคุณใช้หน้าเว็บที่ได้รับความนิยมมากที่สุด (ตัวอย่างเช่นหน้าเว็บที่สร้างขึ้น 50% + จากการดูหน้าเว็บของคุณ) และพบว่ามีการใช้ CSS จำนวนเล็กน้อยในหน้าเหล่านั้นมันอาจเร็วกว่าที่ผู้ใช้จะแยกออกเป็น ไฟล์ CSS สองไฟล์ ขณะนี้ผู้ใช้ใหม่ที่เข้าชมหน้าเว็บที่ได้รับความนิยมสูงสุดของคุณมีน้อยกว่าการดาวน์โหลด ในหน้าอื่น ๆ มีคำขอ HTTP พิเศษหนึ่งรายการ แต่นั่นไม่ใช่เรื่องใหญ่
ตรวจสอบให้แน่ใจว่า CSS ของคุณได้รับการปรับให้เหมาะสม หลีกเลี่ยงตัวเลือกสืบทอดที่เป็นไปได้ หากทางด้านขวาของตัวเลือกกว้างเกินไปก็อาจทำให้เวลาในการเรนเดอร์ช้าลง ตัวอย่างเช่น.class div {}จะช้าหน่อยเพราะเบราว์เซอร์จะต้องตรวจสอบทุก<div>องค์ประกอบในหน้าจากนั้นค้นหาต้นไม้ DOM ขึ้นไปด้านบนสุดเพื่อค้นหา (หรือไม่) องค์ประกอบที่มีคลาส
ฉันคิดว่านี่เป็นข้อบกพร่องของเครื่องมือ speedtest ที่คุณใช้ซึ่งไม่ได้ดูทั่วทั้งไซต์และดูว่า CSS ใดที่ไม่เคยใช้เลย หากคุณสามารถหาเครื่องมือที่ใช้งานได้โปรดแจ้งให้เราทราบ!
ฉันคิดว่าคุณเก่งกว่าการสร้างไฟล์ขนาดใหญ่เพียงไฟล์เดียวที่สามารถแคชได้
ใช่มันสมเหตุสมผลแล้วหากมีชุดของหน้าเว็บที่ต้องการ CSS เพิ่มอีกเล็กน้อยซึ่งในกรณีนี้คุณสามารถรวมไว้ในหน้าเหล่านั้นได้
media="print"- เบราว์เซอร์บางตัวจะไม่ออกคำขอนั้นจนกว่าคุณจะพยายามพิมพ์ / ดูตัวอย่างหน้าจริง ๆ
มีปลั๊กอิน Firefox ตัวเล็ก ๆ ที่เรียกว่าDust-Me Selectorsซึ่งจะตรวจสอบ CSS ของคุณและรายงานกฎที่ไม่ได้ใช้ อย่างไรก็ตามมันใช้ไม่ได้กับ Firefox เวอร์ชั่นล่าสุด (v8.0) ซึ่งน่าละอาย
PS: ถ้าฉันเป็นคุณฉันจะเอา CSS Lint ใส่เกลือนิดหน่อย - มีโรงเรียนแห่งความคิดที่บอกว่า "คำแนะนำ" ของมันนั้นเชื่องช้าและเต็มไปด้วยทักษะมากเกินไป (สำหรับรายละเอียดเพิ่มเติมดูบทความการโน้มน้าวใจของ Matt Wilcox “ ผ้าสำลี CSS เป็นอันตราย ” ) ที่ดีที่สุดก็คือไม่เป็นทางการอย่างสมบูรณ์ ... และขอหน้ามันทำเราจริงๆต้องอีกหนึ่งเครื่องมือ / หลอกมาตรฐานเพื่อตอบสนอง?
วิธีที่ปรับให้เหมาะสมที่สุดและปรับขนาดได้ที่สุดที่ฉันสามารถจินตนาการถึงการจัดการกับนี้ประกอบด้วย:
การสร้างไฟล์ CSS หลักสำหรับทุกสิ่งที่เกี่ยวข้องกับ "ขอบเขตทั่วโลก" (เช่นการออกแบบของไซต์คลาสโกลบอลไลบรารีปลั๊กอิน ฯลฯ ... )
การสร้างระบบที่เกี่ยวข้องกับโฟลเดอร์ที่มีไฟล์ CSS ที่ไม่ซ้ำกันหนึ่งไฟล์ต่อหน้า (ถ้าจำเป็น) ไฟล์เหล่านี้อาจมีชื่อไฟล์เหมือนกันกับหน้าที่เชื่อมโยงอยู่เพื่อให้คุณสามารถเรียกใช้สคริปต์ฝั่งเซิร์ฟเวอร์ในแต่ละหน้าที่ค้นหาไฟล์ CSS ในโฟลเดอร์นั้นและเพิ่มหน้านั้นหากมี
อาจทำให้ไฟล์ CSS ที่แตกต่างกันสำหรับสิ่งที่เฉพาะเบราว์เซอร์ที่คุณโหลดเฉพาะเมื่อผู้เข้าชมมีเบราว์เซอร์ที่เกี่ยวข้อง
ด้วยการทำเช่นนี้คุณจะพบกับวิธีที่มั่นคงและเหมาะสมในการแยก CSS ของคุณ ใช่ยังจะมีกฎที่ไม่ได้ใช้ในไฟล์หลัก แต่จะเป็นที่ที่ควรจะอยู่ในมุมมองแบบลอจิคัล
โปรดทราบว่า CSS "3 เลเยอร์" ของไฟล์เหล่านั้นจะถูกแคชเหมือนกับไฟล์ CSS ไฟล์เดียว