Получил задание оптимизировать сайт на 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 пунктов. Кейс закрыт.
You need to login to create comments.
Comments ()