Месяц: Декабрь 2014

За последние 3 месяца у клиентского интернет магазина, значительно вырос трафик с контекста и органической выдачи поисковиков. Выросло и потребление ресурсов хостинга. Мой любимый timeweb не долго это терпел, прислал предупреждение (за что их люблю — заботятся о клиентах).

После исследования проблемы и оптимизации ресурсов, сэкономил для клиента 6т.р. в год на переходе на новый тарифный план.
Оптимизировал скорость загрузки интернет магазина.

Тут, куда не посмотри, кругом одни плюсы:
+ Лишних денег за дорогой тариф платить не надо;
+ Сайт начал грузиться быстрее — хорошо для посетителей — комфортнее пользоваться сайтом — удобнее покупать;
+ Быстрее грузится — лучше поведенческие факторы — seo работает эффективней — больше посетителей.

Основной принцип оптимизации — убить то, что можно убить (JS, CSS, картинки, лишний код). То, что убить нельзя — подрезать по максимуму.

CSS — оптимизировать, минимизировать, сократить число файлов стилей (читай обращений к серверу). Часть CSS, отвечающую за отрисовку первого экрана, вытащить из подгружаемых файлов и вставить в шаблон.

JS — минимизировать и оптимизировать способ подгрузки.

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

Грузим JS асинхронно. Есть готовый халявный плагин: смотреть-качать. В настройках прописываем относительные урлы js (можно скопировать из кода страницы), которые надо грузить асинхронно.

Если какие-то библиотеки вовсе не нужны для работы, их можно отрубить через шаблон:

перед:
<jdoc:include type=»head» />


вставляем:
<?php
unset($this->scripts[$this->baseurl.’ОТНОСИТЕЛЬНЫЙПУТЬ_ДО_JS’]);
?>

Например:
<?php
unset($this->_scripts[$this->baseurl.’/media/system/js/mootools-more.js’],
$this->_scripts[$this->baseurl.’/media/system/js/modal.js’]);
?>

Оптимизируем css http://habrahabr.ru/post/244815/

Как оптимизировать картинки — вагон мануалов, софта и онлайн-сервисов.

Для оценки проделанной работы, 2 основных инструмента:
webpagetest.org
developers.google.com/speed/pagespeed/insights

Очень рекомендую: Видео с доклада Виталия Фридмана «Responsive Web-дизайн: Трюки и уловки»