Этим постом я хотел бы начать небольшую серию статей об ускорении времени загрузки web-сайта.
Всем известно, что очень большое значение имеет содержание сайта (блога), но не стоит забывать и скорости работы. Потому как, какой бы не был интересный контент, если он загружается очень медленно, то скорее всего Вы потеряете потенциального, а возможно и постоянного посетителя.
Как правило приемлемым временем загрузки любого сайта (блога) является время в пределах от 1 до 5 секунд. Возможно в некоторых случаях это окажется нереально, но к этому надо стремится.
Очевидно, что чем меньше размер содержимого Вашего блога тем меньшее время понадобится на его загрузку. В этом посте я хотел бы обратить особое внимание именно CSS.
- Вот 7 основных моментов оптимизации CSS:
Уменьшаем количество загружаемых CSS-файлов.
Объединяем, если это возможно, css-файлы в один или в меньшее количество файлов. Этим мы добъемся уменьшения http запросов. Один файл большего размера будет загружаться быстрее чем 10 меньшего размера.
Выносим стили в отдельный файл(ы).
Если у вас на странице есть объявления стилей с помощью тега
style type="text\css", то их лучше вынести в отдельный файл. За счет этого файлы будут кэшироваться и соответственно при последующих открытиях страниц будут браться из кэша, а не загружаться снова.Перемещаем описание стилей CSS в head.
Все дело в том, что браузер блокирует отрисовку страницы пока не загружены все стили, потому что стили могут изменить отображение страницы и браузеру придется перерисовывать её снова.
Избегаем использования CSS expressions.
Internet Explorer позволяет задать css ехpressions. Например,
Проблема в том, что этот expression может вычисляться огромное количество раз и соответственно производительность загрузки страницы будет страдать.p { width:expression(400 + "px");}Удаляем неиспользуемые css-классы.
За время жизни блога css файлы могут меняться, оптимизироваться и т.д. В итоге появляются классы, которые уже нигде не используются, но приводят к увеличению размера файла.
Удаляем бесполезные css-правила.
В ccs-стилях могут присутствовать идентичные правила. Например,
Это взаимозаменяемые правила и соответственно одно из них может быть без проблем удалено.p div {width:30px} и div {width:30px}Минимизируем CSS.
Описание стилей могут включать в себя большое количество различных пробелов, комментариев и т.д., что соответственно увеличивает размер файла. Существует множество online утилит, которые помогают минимизировать css. Например, я нашел cледующую неплохую утилиту - CSS compressor. С помощью настроек Вы сможете задать степень сжатия и другие параметры.
Набор этих простых шагов положительно повлияет на время загрузки Вашего блога и соответственно улучшит впечатления от посещения. В последующих постах я попытаюсь глубже раскрыть тему оптимизации производительности.
Время - деньги. Оптимизируйте Ваш сайт. Ваши пользователи будут Вам благодарны.
