Скорочення CSS для швидшого завантаження / зменшення пропускної здатності

9

Чи доцільне ущільнення CSS / видалення невикористаних правил для певної сторінки з точки зору пропускної здатності чи ми можемо розраховувати на кешування (заголовки / остання зміна), щоб видалити цю накладну в природі?

Ура

Також удачі з бета-версією всім!

optimization css bandwidth

— Ейден Белл
джерело

8

Зменшення розміру файлів, безумовно, зменшить пропускну здатність і скоротить час завантаження сторінки. Перший раз, коли користувач потрапляє на ваш сайт, у них нічого не буде кешовано, і для більшості сайтів відвідувачі вперше становлять більшість трафіку.

Крім того, переконайтеся, що увімкнено стиснення gzip. Це дозволить суттєво зменшити пропускну здатність.

— Метью Шенлі
джерело

1

Річ у тому, що якщо ви зменшуєте розмір файлу на одній сторінці, завантажуючи його на унікальний або вбудований CSS на інших сторінках, ви просто заперечували переваги кешування. Найкраще скористатися одним натисканням наперед, щоб надати користувачам чудовий досвід на сторінках 2- X. Отже, зробіть ваш css максимально чистим. Об’єднайте кратні в одне ціле. Але не робіть зайвого, унікального коду, щоб (трохи) зменшити разове звернення.

— bpeterson76

2

Я не думаю, що це те чи інше. Зменшення розміру файлу допоможе користувачеві вперше отримати доступ до файлу. Тренування допоможе при їх другому візиті.

— джессегавін
джерело

2

Є набагато більше потенційних місць для оптимізації, які матимуть більший вплив ...

Якщо ви шукаєте суворо підвищення продуктивності, оптимізація джерела CSS у харчовому ланцюжку досить низька.

Надлишок чіткого коду у джерелі CSS спричинить незначне враження під час першого завантаження таблиць стилів. Керінг повинен вирішувати питання з цього моменту.

— Еван Плейс
джерело

1

Будь-який час, коли ви зможете видалити речі, ви покращите швидкість завантаження, хоча б незначно. Крім того, добре вилучати речі, які ви також не використовуєте для ясності коду.

— Джейсон
джерело

Як приклад, головний файл topic.css, де кожна сторінка використовує лише близько 30% правил ..., але суміш зробить розбиття виправлення наближеним.

— Ейден Белл

0

Я б підозрював, що це залежить від динаміки вашого сайту. Якщо у вас багато відвідувачів, які повторюються, і не багато нових відвідувачів, кешування, ймовірно, достатньо. Якщо у вас є багато нових відвідувачів (особливо, якщо ви хочете справити гарне перше враження), я думаю, ви повинні максимально зменшити розмір свого CSS.

— Травіс Норттттт
джерело

0

Видалення деяких невикористаних CSS, очевидно, покращить час завантаження на одній сторінці, але вам також доведеться збалансувати це з ефектом на декількох сторінках. Ви також хочете уникати занадто багато запитів HTTP.

Пам'ятайте, що gzipping CSS - це найефективніший спосіб прискорити завантаження CSS. Різниця між одним файлом із усім, що входить, та іншим із кількома видаленими зайвими блоками, незначна після gzip.

— Невдоволений козак
джерело

0

Навіть якщо продуктивність знижується, видаляючи невикористаний CSS на основі сторінки (і я впевнений, що кешування переважає це, якщо ви не говорите про докорінно різні сторінки), вам потрібно врахувати час технічного обслуговування, необхідний для цього. . Якщо ви не Google, напевно, не варто витрачати кілька днів на життя сайту, щоб зберегти кожного користувача десяту частину секунди.

Багато з цього стосується профілю використання вашого веб-сайту. Якщо ви дійсно клейкі, кешування виграє вниз. Однак, якщо у вас високий показник відмов, вам може бути краще з оптимізованим CSS (або витрачати час, який ви витрачаєте на оптимізацію CSS, зробивши свій сайт жорсткішим!).

Один із підходів, який ви можете застосувати, якщо у вас є розмітка для певної сторінки, - це створення загального CSS-файлу на всьому веб-сайті та вбудовувати правила на кожну сторінку в голову документа HTML.

— ДжейсонБірх
джерело

0

Ви можете отримати найкраще з обох світів, мінімізувати файл під час виконання та gzip вихід.
Вихідний файл все ще читається, коли вам потрібно його відредагувати, але він стискається під час завантаження

по-перше: використовуйте htaccess, щоб сказати apache для обробки всіх файлів css як php-скриптів та для стиснення виводу при введенні text / css

in .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

Третє: прибуток?

— Дезінтегратор
джерело