Оптимизация css CD.com: Обновите ваш кеш
Сегодня с утра я решил заняться оптимизацией файлов стилей своего сайта CosyDale.com.
При каждой загрузке любой страницы у меня подгружались 10 (!) файлов стилей – от разных плагинов + 2 собственных файла. Это увеличивало время генерации страницы + добавляло запросы, что отрицательно влияло на скорость загрузки. Согласно YSlow у меня бальный показатель был равен 63.
Я проанализировал все плагины, которые использовал и которые загружали свои стили. Я вынес все стили в один файл. Немного ужал отображение. В коде плагинов убрал их подключение их собственного css.
Итог:
- я набрал 75 баллов;
- всего 1 файл стилей используется;
- согласно tools.pingdom.com – время загрузки страницы уменьшилось почти в два раза.
Поэтому советую всем, особенно пользователя Opera 10, обновить свой кеш – иначе на моем сайте могут быть некрасивости. Для обновления в IE, FF и Chrome – Ctrl+F5, в опере – Ctrl+R или F5. В Safari все и так нормально.
PS Вечером планирую заняться спрайтами и в целом графикой на сайте. Это тоже добрый кусок оптимизации.
Похожие записи:
Понравился пост? Подпишись на
Получай всю интересную информацию первым.
На данный момент: 9 комментариев ↓
RSS лента комментариев на эту запись ↔ TrackBack URL
8 декабря 2009 в 17:27
Попробуйся еще на – он еще более дотошный до клиентской оптимизации.
8 декабря 2009 в 20:02
@Сергей М.:
Я бы с радостью, но у них стоит жестокое кеширование результатов – до сих пор показывает кучу старых css файлов, хотя сейчас он один :)
Пришлось зарегиться, чтобы глянуть на сервис изнутри.
Там нашел статью интересную, теперь мой файл стилей весит 4.6 килобайт… (а не 26)
8 декабря 2009 в 20:27
Автор еще выпускал книгу, но она доступна и в pdf – там можно почитать еще про gzip (html, правда, в Вордпрессе лучше архивить с помощью того же WP Super Cache), как пожать картинки (если вдруг не знаешь))), как сделать из них спрайты (ну, это старая штука). Ну и там же есть их плагин для Вордпресса, который все это делает на лету, но у меня руки все не доходят до него.
8 декабря 2009 в 20:56
Посжимал только что оставшиеся js файлы, которые загружаются. Теперь по YSlow у меня 80 баллов :)
Сжатие картинок и спрайты – согласен, но мороки много.
Сейчас сжимаю и думаю над спрайтами. Завтра/послезавтра попробую объединить и gzip’нуть сформированный один js файл.
8 декабря 2009 в 21:28
Уменьшил сжатием рисунков (точнее их пересохранением в другом формате в меньшем размере). Сайт стал меньше на 24 килобайта :)
8 декабря 2009 в 22:14
Эм, вообще, у зарегистрированных вебоин позволяет то ли до 50, то ли до 100 запросов делать.
У тебя в CSS сейчас два jpeg’а там, где джпег вообще не нужен (и вреден), все gif’ы также можно с уменьшением палитры цветов перебить в png (я пользуюсь старым добрым ФОтошопом с его Save for Web – png8 – колво цветов) – получится еще плюс. Плюс чанки удалить с командной строки, чтобы не вылезало на ие искажение цветов. Собирание всего добра в два-три спрайта удастся сократить количество запросов (с размером не так чисто – может и увеличиться, из-за нужного пустого пространства, да и палитра цветов будет общая на всех)
Ну и, собственно, js. Лидер – JQuery (минималку вижу, второй jquery.js не понимаю, зачем). Остальные, в принципе, можно объединить в один, и поотключать в плагинах. Единственое, comments-reply (да и остальные скрипты) не будут сами обновляться с обновлением версии – ну да это мелочь. Ну и инлайновые скрипты тоже убираем туда же (хотя они могут выводиться динамически, это надо смотреть)
Вот эти линки <link rel=’archives’ title=’Декабрь 2009′ href=’http://cosydale.com/2009/12′ /> из хедера (не помню функция как называется) тоже можно убрать – они никому нахрен не сдались (семантикой тут и не пахнет)). Ну и, конечно, в самом хтмл довольно большой цимес, который можно было бы разгрести ))
Хотя, в принципе, яро оптимизировать все до тютельки – необязательно. Главное добиться приемлемой скорости )) скажем, на основном у меня пока по минимум+тот же Super Cache, который действительно крут.
8 декабря 2009 в 22:39
@Сергей М.:
Спасибо за твой обзор моего сайта))) Да, 100 можно сделать. А потом платить надо будет?
Там где jpg – там он меньше весит, чем gif|png. Хотя я проверял только те файлы, которые весят больше 4 килобайт. И я тоже фотошопом пересохранял с выбором наименьшего размера.
В head те линки нужны для яшки. (или не нужны и можно действительно их удалить?)
Про цимес я не понял – слово самого не понял :( И про “чанки удалить с командной строки” тоже. Что ты имеешь в виду под этим?
И где ты нашел 2 jQuery? Всего один в подвале подключен. Второй custom.js – это меню + табы. Все поключенные js сжаты в два раза через модуль gzip и их браузер уже распаковывает (передается сжатая минималка).
Инлайновые js – это подключенные плагинами. Я еще не занимался js серьезно, просто сжал. Сегодня меня интересовала основная самая большая графика + css.
И кстати, ты не знаешь случано, влияет ли количество одинаковых рисунков на сайте на скорость отображения страницы? У меня вот на морде таб Аналитика, к примеру. Там 8 постов с одинаковым рисунком – будет ли лучше, если я сделаю один в самом начале или вообще уберу эти повторяющиеся рисунки? Или раз рисунок загрузился, то уже неважно, сколько раз он будет отображаться?
14 февраля 2010 в 12:43
тоже довольно полезный сервис.