Оптимизация 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

  1. Сергей М.:

    Попробуйся еще на http://webo.in – он еще более дотошный до клиентской оптимизации.

  2. @Сергей М.:
    Я бы с радостью, но у них стоит жестокое кеширование результатов – до сих пор показывает кучу старых css файлов, хотя сейчас он один :)
    Пришлось зарегиться, чтобы глянуть на сервис изнутри.
    Там нашел статью интересную, теперь мой файл стилей весит 4.6 килобайт… (а не 26)

  3. Сергей М.:

    Автор еще выпускал книгу, но она доступна и в pdf – там можно почитать еще про gzip (html, правда, в Вордпрессе лучше архивить с помощью того же WP Super Cache), как пожать картинки (если вдруг не знаешь))), как сделать из них спрайты (ну, это старая штука). Ну и там же есть их плагин для Вордпресса, который все это делает на лету, но у меня руки все не доходят до него.

  4. Посжимал только что оставшиеся js файлы, которые загружаются. Теперь по YSlow у меня 80 баллов :)
    Сжатие картинок и спрайты – согласен, но мороки много.
    Сейчас сжимаю и думаю над спрайтами. Завтра/послезавтра попробую объединить и gzip’нуть сформированный один js файл.

  5. Уменьшил сжатием рисунков (точнее их пересохранением в другом формате в меньшем размере). Сайт стал меньше на 24 килобайта :)

  6. Сергей М.:

    Эм, вообще, у зарегистрированных вебоин позволяет то ли до 50, то ли до 100 запросов делать.

    У тебя в CSS сейчас два jpeg’а там, где джпег вообще не нужен (и вреден), все gif’ы также можно с уменьшением палитры цветов перебить в png (я пользуюсь старым добрым ФОтошопом с его Save for Web – png8 – колво цветов) – получится еще плюс. Плюс чанки удалить с командной строки, чтобы не вылезало на ие искажение цветов. Собирание всего добра в два-три спрайта удастся сократить количество запросов (с размером не так чисто – может и увеличиться, из-за нужного пустого пространства, да и палитра цветов будет общая на всех)

    Ну и, собственно, js. Лидер – JQuery (минималку вижу, второй jquery.js не понимаю, зачем). Остальные, в принципе, можно объединить в один, и поотключать в плагинах. Единственое, comments-reply (да и остальные скрипты) не будут сами обновляться с обновлением версии – ну да это мелочь. Ну и инлайновые скрипты тоже убираем туда же (хотя они могут выводиться динамически, это надо смотреть)

    Вот эти линки <link rel=’archives’ title=’Декабрь 2009′ href=’https://cosydale.com/2009/12′ /> из хедера (не помню функция как называется) тоже можно убрать – они никому нахрен не сдались (семантикой тут и не пахнет)). Ну и, конечно, в самом хтмл довольно большой цимес, который можно было бы разгрести ))

    Хотя, в принципе, яро оптимизировать все до тютельки – необязательно. Главное добиться приемлемой скорости )) скажем, на основном у меня пока по минимум+тот же Super Cache, который действительно крут.

  7. @Сергей М.:
    Спасибо за твой обзор моего сайта))) Да, 100 можно сделать. А потом платить надо будет?
    Там где jpg – там он меньше весит, чем gif|png. Хотя я проверял только те файлы, которые весят больше 4 килобайт. И я тоже фотошопом пересохранял с выбором наименьшего размера.

    В head те линки нужны для яшки. (или не нужны и можно действительно их удалить?)

    Про цимес я не понял – слово самого не понял :( И про “чанки удалить с командной строки” тоже. Что ты имеешь в виду под этим?

    И где ты нашел 2 jQuery? Всего один в подвале подключен. Второй custom.js – это меню + табы. Все поключенные js сжаты в два раза через модуль gzip и их браузер уже распаковывает (передается сжатая минималка).
    Инлайновые js – это подключенные плагинами. Я еще не занимался js серьезно, просто сжал. Сегодня меня интересовала основная самая большая графика + css.

    И кстати, ты не знаешь случано, влияет ли количество одинаковых рисунков на сайте на скорость отображения страницы? У меня вот на морде таб Аналитика, к примеру. Там 8 постов с одинаковым рисунком – будет ли лучше, если я сделаю один в самом начале или вообще уберу эти повторяющиеся рисунки? Или раз рисунок загрузился, то уже неважно, сколько раз он будет отображаться?

  8. http://webo.in тоже довольно полезный сервис.

  1. 14.12.2009

    […] загрузки сайта… О некоторых я писал вот тут и тут. И не забываем про WP-Super-Cache и/или Maxsite […]

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *