Тормозит сайт? начать стоит с проверки производительности серверной части, для этого в файл index.php добавим две строчки
одну в начало файла:
$sysstart = microtime(true);
и одну в конец
echo '<!--time_gen- '.round(( microtime(true) - $sysstart), 5). 's -/time_gen-->';
В результате просматривая HTML код любой страницы сайта вы будете видеть время выполнения скрипта:
Хорошо если полученное время измеряется в сотых, если в десятых тоже пойдёт, но не более 0.3, если больше начать оптимизацию надо с серверной части.
Вся суть клиентской оптимизации сводится к уменьшению объема загружаемых данных и количества запросов, делаемых к серверу.
И так руководство к действию и результаты измерений (кол-во запросов/ объем загружаемых данных/ время загрузки страницы):
0. Начальный замер производительности на
Apache
без
Gzip
(34/496,6/1.4)
1. Использование
Apache + Nginx
для отдачи статики
2. Использование
Gzip
сжатия
(34/216,2/1.18)
3.
jQuery и jQuery UI грузим с
CDN
, например,
Google
или с
официального сайта jQuery
(25/164,3/1.05)
4. Изображения используемые в шаблоне, объединяем в спрайт
(23/
164,3
/0.92)
5. Объединение и минимизация JS скриптов и CSS
6. Загрузку изображений можно разбить на различные субдомены (тем самым обходим ограничение одновременных загрузок для одного хоста у браузеров)
(18/129,2/0.8)
Обратите внимание на временную линию загрузки изображений, теперь в диаграмме отсутствует серый цвет, который означает блокирование (ожидание) выполнения запроса, из-за ограничения числа одновременных подключений в браузере.
7. Перемещение JS файлов в конец страницы (перед закрывающим ), не забываем что необходимо будет весь JS код в тексте страницы вынести в отдельный файл и грузить после jQuery, иначе работать не будет. Это ускоряет отображение страницы, т.к. рендеринг страницы блокируется на время загрузки и выполнения скрипта. Если всё правильно сделаете в диаграмме должна исчезнуть ступенька, которая наблюдается на скринах выше после .js файлов
Эксперимент проводился над OpenCart 1.5.5.1 используемые инструменты Firefox + FireBug, на локальной машине Denwer, хостинг - ukraine.com.ua [← осторожно реферальная обычная ссылка]).
Для базовой клиентской оптимизации достаточно правильно выбрать хостера или настроит сервер + без особых трудозатрат можно выполнить пункт 3. Можно безболезненно отключить jQuery UI, если не используются специальные поля в атрибутах товаров.
Правки в п. 4, 5, 7 будут зависеть от используемого шаблона и дополнений.
Подробнее остановлюсь на реализации п.6:
- нужно внести изменения в файл \catalog\model\tool\image.php (прикрепляю к топику), смысл заключается в изменении хоста загрузки изображений, добавляется поддомен с индексом (i, i1, i2, i3, ....), индекс увеличивается после вывода 6 изображений
- на сервере настроить переадресацию с несуществующих доменов на основной (на хостинге ukraine [← осторожно реферальная обычная ссылка] это делается установкой одной галочки)
Выводы:
Для тех у кого состояние сайт соответствует п.0 есть потенциал для двойного увеличения производительности клиентской части, если сервер настроен согласно п.2 можно говорить об 1/3. И надо понимать что клиентской оптимизацией стоит заниматься, когда уже бизнес настроен, есть конкуренция и желание выделиться. На начальном этапе это будут неоправданные трудозтраты.
P.S.
кто проделает работу по оптимизации, делитесь результатами
image.zip