На днях вдруг решил пооптимизировать свой сайт. Началось все с Google Webmaster Tools. Там есть специальный раздел — Site Performance, который давно мне мозолил глаза, сообщая, что среднее время загрузки Непорядка составляет около 5 секунд, а 74% аналогичных сайтов имеют лучше результаты. И в конце приписочка, мол, установите Page Speed, расширение для Chrome и Firefox, и улучшите свои результаты. Долго я не обращал на это внимание, но в конце концов усовестился. Ведь и верно, 5 секунд для простого бложика — это ж стыдоба. Кроме всего прочего время отклика сайта влияет на его Page Rank, что в свою очередь отражается на количестве посетителей из поисковиков.
В общем, поставил я этот Page Speed, прогнал. Он выдал пару критичных замечаний, несколько некритичных и с десяток мелких. Основная претензия была к большому количеству мелких иконок, которые следовало объединить в CSS спрайты. Про CSS спрайты я до сего момента ничего не слышал, пришлось бегло изучить вопрос. CSS спрайты представляют собой картинки, объединенные в один графический файл. Каждая маленькая картинка затем «вырезается» из большой средствами CSS. Таким образом, вместо 10 запросов к веб-серверу делается один. Забавно, но, помнится, раньше было все наоборот, крупные картинки для ускорения загрузки резали на части и потом совмещали их на странице.
К счастью, существует немало онлайн-сервисов, облегчающих создание спрайтов. Я воспользовался вот этим. В целом, все оказалось несложно, даже с моими скудными знаниями в HTML/CSS. Правда, в паре мест слегка поехала верстка, но это поправимо.
Затем я добавил в конфиг nginx мантру про кэширование статики браузером:
location ~* \.(js|css|jpg|jpeg|gif|png)$ {
expires 2w;
}
И установил плагин WP Super Cache, чтобы не запускать каждый раз мощные PHP коды для рендеринга статичных по своей сути страниц. На этом основная оптимизация закончилась. После этого я сделал еще несколько мелких исправлений, в частности уменьшил количество постов на одной странице.
Попутно с Page Speed я замерял время загрузки сайта с помощью этого сервиса. Он в удобной графической форме отображает все стадии загрузки страницы. В итоге время загрузки было уменьшено с 3 секунд до 0.8.