Клиентская оптимизация OpenCart

[kikasso]

Тормозит сайт? начать стоит с проверки производительности серверной части, для этого в файл 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

Змінено 18 березня 2013 користувачем afwollis
no referral

[Yoda]

- на сервере настроить переадресацию с несуществующих доменов на основной (на хостинге ukraine это делается установкой одной галочки)

Вы бы убрали реферальные ссылочки то...

[EVMedvedev]

Да и вообще эти рекомендации лучше письмом разработчикам OC отправить. Может наконец сделают так, чтобы за ними подчищать меньше приходилось.

[kikasso]

Объективно оценить результаты проделанной работы вы сможете в отчете Google Analytics "Скорость загрузки сайта" с разбивкой по браузерам, странам и страницам

[kikasso]

Вы бы убрали реферальные ссылочки то...

Если напишите что нибудь стоящее в топик, удалю :)

[Yoda]

Может вам денег прислать, девочек. станцевать?

Что за бред, есть правила форума, вы пишите какие то рерайты статей с сео блогов, тулите реферальные ссылки. пиарите свои сайты, и это под соусом "посмотрите какой я полезный".

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

[kikasso]

Я читал правила форума перед размещением реферальной ссылки, она не является рекламой и в правилах не запрещена, как и не запрещено писать как кто то умеет делать сайты:)

О моей компетенции, говорит моё портфолио!

[Гість brk]

Я читал правила форума перед размещением реферальной ссылки, она не является рекламой и в правилах не запрещена, как и не запрещено писать как кто то умеет делать сайты :)

О моей компетенции, говорит моё портфолио!

Присмотрелся к автопрайду, ну Вы и садист однако :)

Нет ПОИСКА и фильтров ... во всяком случае я этого не нашел...

.

[Yoda]

Знатный тролль - это портфолио говорит реально по полной некомпетенции. поржал!

Для энергодара видимо уровень, но у нас студенты третьего курса тех вуза лучше делают.

[kikasso]

Присмотрелся к автопрайду, ну Вы и садист однако :)

Нет ПОИСКА и фильтров ... во всяком случае я этого не нашел...

.

Поиск, есть на главной и страницах карточки товаров, в листинге его место занимают "хлебные крошки", так было задумано вначале.

В аналитике отслеживается использование внутреннего поиска по сайту и если отобрать этих пользователей то их коэффициент конверсий составляет 2% без одной сотой - это более чем в два раза больше среднего значения по сайту, что говорит о рентабельности инвестирования средств в улучшение поиска.

Спасибо за наводку!

Фильтры, тоже присутствую для категорий в которых определены атрибуты http://avtopride.zp.ua/amortizator

Пишите не по теме!

Вам ребята учиться надо, а не огрызаться и офтопить!

[Гість brk]

Знатный тролль - это портфолио говорит реально по полной некомпетенции. поржал!

Для энергодара видимо уровень, но у нас студенты третьего курса тех вуза лучше делают.

Да при чем тут студенты ,портфолио итп...

Нет ПОИСКА в магазине !!!

И это главная примета дилетанта!

Никогда не поверю, что ПОИСК ради оптимизации убран :)

[Гість brk]

Поиск, есть на главной, на других страницах его место занимают "хлебные крошки", так было задумано вначале.

Пишите не по теме!

Вам ребята учиться надо, а не огрызаться и офтопить!

Вам просто указывают о Ваших некомпетентных постах.

Раз взялись за это, то должны были подготовиться к своему пиару тщательно, а торопыг нигде не любят.

А это fail PR

[Yoda]

Нет ПОИСКА в магазине !!!

И это главная примета дилетанта!

Никогда не поверю, что ПОИСК ради оптимизации убран :)

я никому не собираюсь тыкать в ошибки. Я просто высказываю мнение. Человек похвастал портфолио - не впечталило, твой автосайт был зачетный. Вот и все.

И мне не нравится эта тенденция с рерайтами постов продвигаторских блогов.

Половина народу сео про нормально не может. Когда человек дорастает до серьезной оптимизации спрайты, сжатие скриптов и оптимизация картинок будет осуществлена как правило или специалистом, или человек сам дорастет до подобных процессов. ИМХО инфа ни о чем и это чистый пиар + реферальные ссылки....

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

[Yoda]

И непосредственно по теме топика...

Все семь тезисов - вываливаются в половине сайтов в топ 50 гугла по запросу "оптимизация файла"

И как обычно - картинки пиар и ни одного описания метода...

Т.е. я выглядит это так.. я такой умный.. я знаю как это делать, а вы гуглите дальше...

Если мы говорим о помощи и опыте, то

Как сделать спрайты тыц

CDN Yandex для библиотеки jQuery тыц

CDN Google для библиотеки jQuery тыц

Как минимизировать JavaScript тыц

Перенос файлов на сторонний сервер CDN или поддомен - это танцы с бубном. Проще использовать Lazy Load - в платных дополнениях модуль, который подгружает изображения по мере появления их в видимой части браузера.

Ну и великий гуру разработки из энергодара забыл о том что правильно настроеное кеширование для клиента дает еще джазу и +100500 к скорости загрузки.

как настроить htaccess для нормального хранения файлов на стороне клиента и еще кое какие полезные фичи тыц

[pashast]

Эта вся оптимизация убивается клиентом за 2 секунды, установкой одной картинки, весом 100кб, на слайдшоу ))

[Yoda]

Эта вся оптимизация убивается клиентом за 2 секунды, установкой одной картинки, весом 100кб, на слайдшоу ))

ну не всегда)))

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

Я как то заморачивался на 0,2,0 с собиранием и укорачиванием а также прописыванием таймингов кеша для всех MIME типов, реально был прирост. загрузки до 70%

[pashast]

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

Вот портфолио одной студии :ugeek:

http://www.artlebedev.ru/everything/soglasie/

Перейдите на сайт что они сдали клиенту, посмотрите количество скриптов и css

[Yoda]

ыыыыыыыыыыыыы

порадовало.. одной студии)

[vikingshop]

Если включен gzip то на это можно смело положить если сервак сам по себе не тупит... к стате гугл один раз уже лежал :)

3. jQuery и jQuery UI грузим с CDN, например, Google или с официального сайта jQuery (25/164,3/1.05)

5. Объединение и минимизация JS скриптов и CSS

6. Загрузку изображений можно разбить на различные субдомены (тем самым обходим ограничение одновременных загрузок для одного хоста у браузеров) (18/129,2/0.8)

По поводу этого пункта так же можно добавить что тогда уж выносите и JS/CSS JQuery, опять же можно сильно не морочится а вынести графику на один субдомен... правда вы в резолве первоначально проиграете... тогда уже правильнее (быстрее) было бы на IP но не у всех они выделенные... Это все хиляет когда у вас на странице от 50 изображений и тупой инет у юзера...

Ах да тут еще советовали длину куков уменьшить, почему вы про это не написали?

[vikingshop]

Еще совет если на то пошло :)

location ~ ^.+\.(png|PNG|jpg|JPG|jpeg|JPEG|gif|GIF|ico|wmv|avi|flv|mpg|mpeg|mp4|zip|rar|gz|css|js|txt)$ {

expires 1m;

}

[kikasso]

Ну и великий гуру разработки из энергодара забыл о том что правильно настроеное кеширование для клиента дает еще джазу и +100500 к скорости загрузки.

как настроить htaccess для нормального хранения файлов на стороне клиента и еще кое какие полезные фичи тыц

В моём варианте предложен вариант использования Apache + Nginx. Ngnix ,берёт на себя всю статику и её кэширование, статика до апачи не доходит, так что речи о кеше в htaccess не может быть.

Напишите свой результат оптимизации, тогда будет предметный разговор, а так воздух сотрясаете!

Клевета, озлобленность это удел слабых людей и трусов!

[kikasso]

6. Загрузку изображений можно разбить на различные субдомены (тем самым обходим ограничение одновременных загрузок для одного хоста у браузеров) (18/129,2/0.8)

По поводу этого пункта так же можно добавить что тогда уж выносите и JS/CSS JQuery, опять же можно сильно не морочится а вынести графику на один субдомен... правда вы в резолве первоначально проиграете... тогда уже правильнее (быстрее) было бы на IP но не у всех они выделенные... Это все хиляет когда у вас на странице от 50 изображений и тупой инет у юзера...

суть заключается в обходе ограничения кол-ва, одновременных загрузок браузером с одного хоста (браузеры именно на них ориентируются а не на IP). Результат хорошо виден на скринах. Такой подход используют многие популярные интернет магазины

http://www.ozon.ru/

http://rozetka.com.ua/

[Yoda]

У всех тут стоит nginx да да. И у каждого второго своя розетка.

[vikingshop]

суть заключается в обходе ограничения кол-ва, одновременных загрузок браузером с одного хоста (браузеры именно на них ориентируются а не на IP). Результат хорошо виден на скринах. Такой подход используют многие популярные интернет магазины

http://www.ozon.ru/

http://rozetka.com.ua/

Да знаю я на что он ориентируется... я вам говорю что в случае IP вместо имени хоста (а хост будет отличный как вы сами догадаваетесь от оригинала) еще и не тратиться время на резолв... это если говорить о _полной_ оптимизации...

А крупняк это еще и использует что бы сэкономить бабла, разнося статику и динамику по серверам...

[kikasso]

в топике упоминали про стабильность CDN.

uptime как правило у CDN сервисов высок, но всякое бывает.... есть возможность сохранить работу сайта когда он не доступен:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="http://mysite.com/js/jquery-1.7.1.min.js"><\/script>')</script>

работает очень просто, если не получается загрузить jQuery с гугл, грузим со своего сервера