Путь к статье: Главная » Для сайта

Добрый день, сегодня в современных алгоритмах ранжирования сайтов, фактор "скорость загрузки сайта" или pagespeed, является одним из приоритетных. Поэтому помимо технической оптимизации сайта, повышения релевантности страницы, продвижения сайта и.т.п. Надо заниматься размером сайта и увеличивать page speed :).

Ниже я опишу свои действии в ускорении сайта и какой они дали эффект.

Сжал все файлы CSS

Помог мне сервис - CleanCSS. Выбрал максимальное сжатие с минимальной читаемостью кода.

Вы спросите: "А как же в будущем пользоваться этими файлами, если они не читаемые?" Легко, когда нам понадобиться редактировать допустим style.css, то мы берём не читаемый код и вставляем его опять в cleancss, выбираем Компрессию LOW (higher readability) и у нас файл преобразуется опять в читаемый вид.

cleencss

После всех настроек и изменений опять сжимаем по максимальному и загружаем на сайт.

Оптимизировал все изображения

Изображения, которые выкладываю в постах, всегда оптимизировал сервисом PunyPNG. Пробовал много разных программ и сервисов, этот самый лучший. Изображения остаются в том же качестве, что и оригинал, хотя теряют от 15 до 30% веса.

Оптимизировал графику шаблона

Что-то вроде сжатия графики, только делал я с помощью сервиса Gtmetrix.com. После анализа сайта, внизу появляется табличка с проблемными местами у сайта, в категории Optimize images вы увидите графику, которую можно оптимизировать и тут же сервис приводит оптимизированную версию (See optimized version) изображений.

Оптимизируем графику

Сохраняем оптимизированные изображения и меняем оригиналы на них, тем самым мы экономим 50- 100 килобайт.

Создал спрайты

Есть такой замечательный сервис - Spriteme.org. С помощью него, можно объединять много картинок в одно изображение. То есть получается, что браузер будет закачивать одно изображение и подставлять его с разным позиционированием на сайт. Тем самым мы уменьшим количество http запросов, например у меня в одном спрайте 7 изображений и теперь браузер посылает не 7 запросов к каждому изображению, а один к спрайту.
Процедура настройки:
Этот сервис всё делает автоматически, вам надо сохранить его ссылку в закладки:

спрайты

Потом на своём сайте нажать на ссылку и появиться окно с вариантами спрайтов (я для примера взял социалку webice, потому что мой сайт уже со спрайтами):

спрайты

Нажимаете make sprite и вы получаете свой спрайт, его загружаем на сайт. Потом нажимаем export CSS и мы увидим подробную инструкцию, что надо заменить в файле style.css:

спрайты

Что зачёркнуто, то удаляем с файла style.css и адрес к спрайту меняйте на свой.

Включил nginx на сервере

В администрировании я не спец, поэтому утверждать ничего не буду на счёт этого проксирующего сервера. Получается что благодаря ему, пользователю отдается сжатая html страничка, проверить эффективность работы nginx, можно вот этим сервисом, у меня получился вот такой результат:

nginx

Итог

Почти половину времени загрузки Главной страница, занимает кнопочка ретвита у каждой записи. Для интереса, скорость загрузки без кнопок ретвита:

кнопки retweet

А теперь с ними:

кнопки retweet

Как видно, скорость загрузки главной увеличилась почти в два раза. Но красота требует жертв, поэтому кнопки оставил.

После всех этих мероприятий, у меня получилось уменьшить размер главной страницы с 800 килобайт до 346KB. Скорость загрузки сайта с 8,27 секунд снизилась до 5.88 секунд. Количество http запросов упало с 75 до 67.

кнопки retweet

Конечно, это ещё не всё и до идеальной скорости загрузки надо ещё работать, но лиха беда начала. Продолжение следует.


Поделитесь записью:


Комментарии
  1. mindwork

    Отличная статья, спасибо за ссылку Spriteme.org Сам вот занялся серверной и клиентской оптимизацией сайта, пока мучаю серверную часть, хочу минимизировать отклик сервера, что бы страницы быстрее отдавалась. Так увлекся ускорением, что уже не могу оторваться. 🙂

  2. webpavilion

    то что вы сделали лишь малая часть процесса ускорения сайта. хвастаться конечно не хорошо, но когда очень хочется — можно. мой блог быстрее вашего раз в 5 как минимум. предлагаю померится на loadimpact.com

  3. Cospi

    А никто не говорит что у меня идеал скорости и я написал что надо ещё работать. Например у меня не получилось включить браузерный кеш Leverage browser caching, решаю проблему с саппортом. И так же надо учесть, что красота требует жертв, у вас на главной ни одной картинки в постах, ни посторонних скриптов в виде кнопок ретвита и.т.п. Это одно и то же что сравнивать скорость загрузки портал с пустой html страничкой. Хоть у вашего сайта нету грубых ошибок, но загрузка сайта довольно высокая, аж 7.3 секунды.

    В пять раз что-то не получаеться, тем более учитывая очень маленький вес вашей главной страницы.

  4. webpavilion

    Я не хотел обидеть, вас. Сакральный смысл оптимизации скорости загрузки сайта, для меня лично, 100% гарантия того что после публикации интересного поста блог не упадет от наплыва посетителей. Если переводить абстрактные цифры в реальных посетителей получается что 50 клиентов от loadimpact это примерно 6-8К реальных посетителей в час. При такой нагрузке страницы моего блога в среднем отдаются посетителю за 0.7 секунды. У вас же уже при 20 клиентах страница отдается более чем за 2 секунды, при большем количестве клиентов тестировать в вашем случаи смысла нет. Не гонитесь за синтетическими тестами вроде webo или YSlow они иногда советуют откровенную глупость.

  5. Cospi

    А кто обижается, просто сравните ваш сайт и мой. У меня сам сайт по себе тяжелее вашего, плюс скрипты.

  6. Param

    Пользуюсь wp-minify. Скорость загрузки проверяю плагином для FF — Firebug. А так же использую кэширование и предполагаю может еще включу zip….

  7. Cospi

    Напишите ещё раз, может быть Акисмет его выловил как спам. Я спам не читаю, сразу одним SQL запросом все удаляю.

  8. Mari

    Не могли бы Вы подробнее написать что за спрайты такие и где на сайте это устанавливается? о_О

  9. Cospi

    Суть такая — из множества картинок, сервис создаёт один спрайт, закачиваем спрайт на сайт и прописываем в файле стилей позиционирование этого спрайта, и теперь когда грузиться сайт, вместе с ним грузиться одна картинка (спрайт) .

  10. Сергей Медведев

    В комментарии, который видимо Akismet отфильтровал, я предлагал вам написать о каждом пункте, что вы перечислили отдельный пост. Меня трудно уже причислить к новичкам, но мне многое непонятно:) Например, у меня хорошо получилось только оптимизировать графику шаблона. Но ее то совсем немного. Кстати, спасибо за сервис. С ним бы разобраться… У меня блог и так «летает», но это благодаря плагину. А хотелось бы его вручную ускорить, вашими способами. Спасибо за статью!

  11. Cospi

    Спасибо за предложение, летом попробую описать более подробно. Это ещё не все действия, которые можно сделать по ускорению, сам ещё разбираюсь в некоторых вещах.

  12. Andrew

    Хорошие советы по оптимизации загрузки сайта А вы слышали про способы, которые предлагал Шакин поэтому поводу?

  13. Слава

    Единственное что я делал на своем сайте из всего выше перечисленного, это сжал CSS. Легкости сайта особо не замечаю

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

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