• 364034, г.Грозный, ул.Кадырова 201
  • +7 928 087 80 00
  • abuhasub

Оптимизация сайта

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

Сайт с большим количеством графики, скриптов и красивым, дизайном, однако главная страница сайта формировалась за 72 запроса, данные о районах подтягиваются дополнительными запросами , загружается все добро почти 10 секунд и весит больше 1,8 МБ, что многовато для сайта-визитки.

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

Также отсутствовали некоторые файлы изображений, лог консоли javascript был в ошибках. Неправильно работал компонент слайдшоу.  YSlow выдал оценку  сайту в 88 пунктов, с минимальной оценкой - F по количеству http запросов.

This page has 7 external Javascript scripts.

This page has 4 external stylesheets

This page has 45 external background images.

 

Для оптимизации загрузки таким образом в первую очередь необходимо уменьшить количество запросов и объем загружаемой информации.

Видно, что большое число запросов пришлось на css images т.е. изображения оформления страницы. На них же приходится и основной объем страницы. Значит это первые претенденты на оптимизацию, самым очевидным решением, является создание спрайтов изображений и оптимизация существующих.

Замечу, что спрайты на сайте были, однако качество и количество их оставляло желать лучшего..

 

Для быстрого поиска возможных спрайтов, воспользуемся букмаркетом – Sprite.me , который сразу же определит нам основных претендентов.  

 

В нашем случае пришлось вносить существенные правки, из-за неточных стилей, букмаркет не смог автоматически создать спрайт для всех изображений. Подправив файлы стилей, добавив необходимые   background-repeat: no-repeat;  сгенерируем спрайт. Получилось неплохо, хотя из-за особенностей верстки не все изображения удалось передать в спрайтах, но наш спрайт убрал  свыше 30 запросов к изображениям стилей.

            Cоздавая спрайт вручную, при верстке (или например полу-автоматом с помощью Glue.) можно получить более оптимизированную страницу. Но в нашем случае верстка стилей с нуля в наши планы не входит и поэтому будем довольствуемся такой оптимизацией.

            Также необходимо сжать крупные изображения без потери качества. Воспользуемся простыми веб-сервисами: для JPG файлов JpegMini, для PNG файлов TinyPng.

            Здесь мы можем получить значительное сжатие файлов – например у нас получилось без потери качества сжать самый большой jpg в 2 раза (с 600кб => 300кб) и в несколько раз сократить размеры png. С остальной мелочевкой не будем возиться, все-таки у нас не высоконагруженный проект, где каждый байт на счету.

            Самые маленькие изображения (у нас вроде popupploshad и т.п.), оптимальнее привести в  base64, еще раз экономя запросы к серверу, что и было сделано;

Скорость загрузки сайта также сильно зависит и от количества и размеров скриптов и стилей загружаемых в начале страницы. Дело в том, что браузер загружает все стили и скрипты в один поток и скорость отдачи страницы сильно страдает – возникает эффект бутылочного горлышка именно это мы можем наблюдать в консоли firebug.

 

 

Поэтому рекомендуется тяжелые скрипты располагать в конце страницы и подгружать их уже после загрузки DOM страницы.

Кроме всего прочего, Joomla по умолчанию загружает javascript библиотеки mootools и связанные с ней модули. Вместе с тем, при верстке mootools не использована вообще, а использована аналогичная библиотека Jquery и она также загружается в самом начале страницы. Mootools зашит в системе управления контентом, но можно хаками отключить в шаблоне, что мы и сделаем. Заодно придется избавиться и от модуля JCaption, единственно требующего mootools, впрочем, сам он нигде не используется.

Подключена также еще одна тяжелая библиотека Twitter Bootstrap и скрипт bootstrap.js – верстальщик был в ударе – избавимся и от нее полностью.  Без потерь можем перенести в конец страницы и остальные скрипты, библиотека jquery же необходимая при загрузке будет вызвана асинхронно, через cdn google  - в таком случае загрузка страницы будет идти в несколько потоков (есть и другие плюсы в виде оптимального кэширования), но главное избавились от горлышка.  Вместе с этим, избавимся и от ошибок, обновив jquery до последней версии и исправив зависимые  функции.

Объединяем также стили css, избавляемся от 2-х bootstrap.css и tango/style.css . Вместо того, чтобы использовать всю библиотеку bootstrap ради одного таба – оставим более щадящий наши ресурсы boostrap-tab.js

После всех манипуляций получили оптимизированную страницу.

 оптим

 

оптим

 

Страница сформировалась из 42 запросов и весит чуть больше 1 мб. Количество javascript файлов уменьшилось с 7 до 4, стилей с 4 до 2, 45 изображений до 13. Сайт стал грузиться в 2 раза быстрее, почти в 2 раза меньше обращаясь к серверу. При этом мы на 40% сэкономили трафик клиенту. Увеличение скорости загрузки, должно положительно сказаться и на рейтингах в поиске и будет удобным для пользователя.

Yslow рекомендует нам избавляться от запросов и дальше, но тут уже без глубоких изменений в верстке страницы не обойтись. Изображения для стилизации страницы должны загружаться с использованием css, а не в теле html, не везде это правило соблюдено. Впрочем, результат для страницы с большим количеством графики, допустимый -  оценка A и эффективность YSlow в 97 пунктов. Кейс закрыт.


03 october 2013, 22:10    Rasul Блог разработчика 0    0 0

Comments ()

    You need to login to create comments.