การลด CSS เพื่อการโหลดที่เร็วขึ้น / แบนด์วิดธ์น้อยลง

การบีบอัด CSS / การลบกฎที่ไม่ได้ใช้สำหรับหน้าเฉพาะที่คุ้มค่าในแง่ของแบนด์วิดธ์หรือเราสามารถพึ่งพาแคช (ส่วนหัว / แก้ไขครั้งสุดท้าย) เพื่อลบค่าใช้จ่ายนี้ในป่า?

ไชโย

โชคดีกับทุกคนที่เป็นเบต้า!

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

นอกจากนี้ตรวจสอบให้แน่ใจว่าคุณเปิดใช้งานการบีบอัด gzip สิ่งนี้จะทำการลดจำนวนแบนด์วิดท์ลงอย่างมาก

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

มีสถานที่ที่เป็นไปได้มากมายสำหรับการเพิ่มประสิทธิภาพที่จะมีผลกระทบมากกว่า ...

หากคุณกำลังมองหาการเพิ่มประสิทธิภาพอย่างเคร่งครัดการเพิ่มประสิทธิภาพแหล่ง CSS นั้นค่อนข้างต่ำในห่วงโซ่อาหาร

Cruft ที่มากเกินไปในแหล่ง CSS จะใช้เวลาเล็กน้อยในครั้งแรกที่โหลดสไตล์ชีต การแคชควรดูแลปัญหาต่อจากนี้ไป

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

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

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

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

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

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

วิธีการหนึ่งที่คุณสามารถทำได้หากคุณมีมาร์กอัปเฉพาะเพจคือการมีไฟล์ CSS ทั่วทั้งไซต์และฝังกฎต่อหน้าไว้ในส่วนหัวของเอกสาร HTML

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

แรก: ใช้ htaccess เพื่อบอก apache เพื่อจัดการกับไฟล์ css ทั้งหมดเป็นสคริปต์ php และบีบอัดเอาต์พุตเมื่อพิมพ์ text / css

ใน. htaccess AddHandler php5-cgi .css AddType text / css .css AddOutputFilterByType DEFLATE text / css

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

ในไฟล์ css ของคุณ

<?php
ob_start("trima");
header("Content-type: text/css; charset=utf-8");
ob_start();
date_default_timezone_set('GMT');
$lasmod = "Last-Modified: " . strftime ("%a, %d %b %Y %T GMT", filemtime (__FILE__));
Header($lastmod);
$offset = 3600*24*30*12;
$expire = "Expires: " . date("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($expire);
function trima($str) {
    $str = str_replace(array("\n", "\r", "\t", "\o", "\xOB"), '', $str); // remueve enter tabs y demas
    $str = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $str); // remueve comentarioa
    $str = ereg_replace("[ ]+", " ", $str);                         //remueve espacios multiples
    $rep = array( '{ '=>'{', ' }'=>'}', '; '=>';', ', '=>',', ' {'=>'{', '} '=>'}', ': '=>':', ' ,'=>',', ' ;'=>';' ); // remueve espacios inecesarios
    $str = strtr($str, $rep);
    return $str;
}
?>
css content here

ที่สาม: กำไร