Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

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


Recommended Posts

Тормозит сайт? начать стоит с проверки производительности серверной части, для этого в файл index.php добавим две строчки

одну в начало файла:

$sysstart = microtime(true);

и одну в конец

echo  '<!--time_gen- '.round(( microtime(true) - $sysstart), 5). 's -/time_gen-->';

В результате просматривая HTML код любой страницы сайта вы будете видеть время выполнения скрипта:

2013-03-16_1009.png

Хорошо если полученное время измеряется в сотых, если в десятых тоже пойдёт, но не более 0.3, если больше начать оптимизацию надо с серверной части.

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

И так руководство к действию и результаты измерений (кол-во запросов/ объем загружаемых данных/ время загрузки страницы):

0. Начальный замер производительности на
Apache
без
Gzip
(34/496,6/1.4)

1. Использование
Apache + Nginx
для отдачи статики

2. Использование
Gzip
сжатия
(34/216,2/1.18)

2013-03-16_1109.png

3.
jQuery и jQuery UI грузим с
CDN
, например,
или с
(25/164,3/1.05)

4. Изображения используемые в шаблоне, объединяем в спрайт
(23/
164,3
/0.92)

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

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

2013-03-16_1105.png

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

7. Перемещение JS файлов в конец страницы (перед закрывающим ), не забываем что необходимо будет весь JS код в тексте страницы вынести в отдельный файл и грузить после jQuery, иначе работать не будет. Это ускоряет отображение страницы, т.к. рендеринг страницы блокируется на время загрузки и выполнения скрипта. Если всё правильно сделаете в диаграмме должна исчезнуть ступенька, которая наблюдается на скринах выше после .js файлов

2013-03-16_1149.png

Эксперимент проводился над 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

Змінено користувачем afwollis
no referral
  • +1 3
Надіслати
Поділитися на інших сайтах

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

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

Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах


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

Надіслати
Поділитися на інших сайтах

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

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

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

  • +1 1
Надіслати
Поділитися на інших сайтах


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

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

Надіслати
Поділитися на інших сайтах

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

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

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

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

.

post-8078-0-51058500-1363444877_thumb.jpg

  • +1 1
Надіслати
Поділитися на інших сайтах

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

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

  • +1 1
Надіслати
Поділитися на інших сайтах


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

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

.

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

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

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

2013-03-16_1737.png

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

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

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

  • +1 2
Надіслати
Поділитися на інших сайтах

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

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

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

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

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

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

Надіслати
Поділитися на інших сайтах

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

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

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

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

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

А это fail PR

Надіслати
Поділитися на інших сайтах

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

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

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

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

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

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

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

  • +1 2
Надіслати
Поділитися на інших сайтах


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

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

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

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

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

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

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

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

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

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

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

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

  • +1 2
Надіслати
Поділитися на інших сайтах


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

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

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

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

Надіслати
Поділитися на інших сайтах


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

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

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

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

Надіслати
Поділитися на інших сайтах

Если включен 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 изображений и тупой инет у юзера...

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

Надіслати
Поділитися на інших сайтах


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

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

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

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

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

  • +1 5
Надіслати
Поділитися на інших сайтах

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

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

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

http://www.ozon.ru/

http://rozetka.com.ua/

  • +1 1
Надіслати
Поділитися на інших сайтах

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

http://www.ozon.ru/

http://rozetka.com.ua/

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

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

Надіслати
Поділитися на інших сайтах


  • 2 weeks later...

в топике упоминали про стабильность 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 с гугл, грузим со своего сервера

  • +1 2
Надіслати
Поділитися на інших сайтах

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.