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

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

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

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

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

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

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

Изображения, которые выкладываю в постах, всегда оптимизировал сервисом 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, можно вот этим сервисом, у меня получился вот такой результат:

Итог

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

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

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

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

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