Советы по оптимизации OpenCart, о которых стоит знать каждому

Автор: devimirochnik

В данном обзоре речь пойдет конкретно об оптимизации загрузки и открытия страниц сайта.

Зачем это нужно?

• Во-первых, поисковые системы, такие как Яндекс и Google. Для них скорость это фактор ранжирования сайта. Простыми словами, если сайт медленный, то и рассчитывать на поисковой трафик сложно.

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

Так же важно понимать, что оптимизация это не одно какое-то единичное действие — это набор отдельных шагов, позволяющих в сумме добиться высокой скорости сайта с OpenCart. Утрируя, на 1 рубль ничего не купишь, но если у вас 100 раз по 1 рублю, то это как минимум вкусняшка или две.

Перейдем от слов к практике.

1. Убедитесь, что вы сжали картинки.

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

Например, нередкая ситуация, когда в баннере главной страницы 5-7 картинок с размером по 400-500 Кб. А это 2,0-3,5 Мб для клиента.

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

Плюс большой размер страницы не очень нравится поисковым системам, таким как Яндекс и Google.

2. Сожмите и скомпонуйте JS и CSS.

По поводу сжатия. Ничего неожиданного - оно позволяет добиться меньшего веса страниц.

По поводу компоновки. Обычно сам контент (JS и CSS) скачивается быстро, потому что он небольшой (с Gzip, о котором чуть дальше, это обычно сродни одной картинке, размером до 100-150кб). Другое дело, что когда каждый файл необходимо скачивать отдельно, то это вызывает простои и лишний раз нагружает сайт.

Поясню в самом упрощенном примере (без учета CDN, типа веб-серверов и прочих вещей).

Допустим, у вас 20 JS файлов и 15 CSS файлов. Как обычно поступает браузер? Запрашивает их параллельно у сайта. Звучит вроде как: это должно быть быстрее. Однако, в реальности это вместо 2-х HTTP-запросов (скомпонованных JS и CSS), целых 35 HTTP-запросов. В свою очередь, это вызывает много моментов, таких как одновременное обращение к жесткому диску. Но, чаше же всего вопрос в том, что у веб-сервера попросту ограничено количество соединений. Например, 3000 соединений, при 100 HTTP-запросах от одной страницы без компоновки JS и CSS, позволяют загружать в единицу времени 30 страниц (3000/100), а при 67 HTTP-запросах это примерно 44 страниц (3000/67). Не говоря уже о том, что с параллельностью тоже существуют моменты, но это уже за рамками обзора.

Тем не менее, стоит понимать, что бывают разные ситуации и иногда объединение не нужно. Например, если у вас несколько JS и CSS, то от такой оптимизации может не быть особого толка. Иногда стоит объединять только часть файлов. И так далее.

3. Включите Gzip.

Зачем нужно сжатие Gzip? Ответ прост — позволяет передавать меньше данных через интернет (экономия до 60-70%). В нынешнее время техника уже настолько быстрая, что распаковать небольшие файлы из архива дело миллисекунд. Поэтому это полезно.

Обычно сжатие Gzip либо уже включено в хостинге, либо достаточно добавить в файл .htaccess следующие строки. Для отдельных ситуаций — в интернете полно мануалов с настройкой.

# сжатие text, html, javascript, css, xml:

<ifModule mod_deflate.c>

AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript

</ifModule>

4. Создайте недостающие индексы в OpenCart с помощью IMDBOptimizer.

Одна из проблем OpenCart в том, что в ее БД нет ряда индексов. Чаще всего это начинает заметно ощущаться (медленная загрузка, превышение лимитов времени БД в хостинге и т.п.), когда сайт измеряется в тысячах, десятках тысяч и более товаров (хотя и бывают ситуации, когда с меньшим числом товаров, но это уже от установленных модулей зависит). При чем если у вас много атрибутов, то это становится еще более заметным (потому что они растут как на дрожжах).

Для решения этой катавасии и создан модуль IMDBOptimizer. Он позволяет создать индексы за пару щелчков мыши. Плюс обладает еще рядом преимуществ, таких как sql-кэш и логирование (см. описание).

5. Используйте бесплатный инструмент от гугла.

Поисковая система Google предоставляет бесплатный инструмент для определения проблемных мест сайта (адрес https://developers.google.com/speed/pagespeed/insights/?hl=RU).

Пользы от него много, поэтому советую хотя бы ознакомиться.

6. Проверьте наличие медленных модулей в интернет-магазине.

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

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

7. Старайтесь решать задачи интернет-магазина модульным подходом.

Простыми словами, старайтесь по минимуму вносить правки в файлы OpenCart (особенно ядровые) собственными силами.

Суть как минимум в нескольких вещах:

• Обычно модули пишутся с расчетом, что они не будут одинокими в сайте, поэтому вероятность, что они будут совместимы с другими модулями и не приведут к проблемам, выше, чем когда вносятся ручные правки. Хотя 100% гарантии не существует.

• Обычно у модулей существуют аналоги. Хотя бы посмотреть сколько вариантов модулей скидок и акций. Удобство в том, что процесс замены одного на другой представляет собой несколько щелчков мыши (плюс, естественно, настройка), а не долгое копание в коде OpenCart.

• У модулей существует понятие версий. И от версии к версии их возможности обычно растут. У ручных же правок такого не бывает.

• Если сайт сильно модифицирован, то большая часть модулей будет требовать допила.

Конечно, бывают разные ситуации. Не всегда существуют модули. Бывает требуются специфические вещи. И так далее. Но, все же.

8. Кэширование.

Суть незатейлива — то, что долго вычисляется, сохраняется в отдельном месте и поэтому быстро отображается во второй и последующий раз.

Однако, отмечу, что кэширование не решает внутренних проблем. Поэтому, например, создание индексов с IMDBOptimizer и поиск медленных модулей не стоит откладывать в сторону.

Поясню «почему?» на примере html-кэша.

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

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

Иными словами, если у вас не бешеная посещаемость, то многие товары без оптимизации будут медленно открываться. Разве что только основные категории будут быстрыми.

9. Отключайте/удаляйте неиспользуемые модули.

Каждый включенный модуль это потенциальный источник задержек, который пожирает время при генерации и отображении страницы. В частности, это могут быть какие-то вычисления в сервере или добавленные JS /CSS файлы в шаблон. И если от одного модуля может и не будет эффекта, то от десятка вполне возможно.

Поэтому неиспользуемые модули стоит отключать или удалять.

10. Настройте кэширование браузером статических ресурсов.

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

Однако, вопрос в том, как долго браузер будет их хранить. Этот момент обычно определяется в файле .htaccess. Как базовый пример, который, в принципе, можно сразу применять (но, естественно, можете настраивать под свои потребности; время задается в секундах):

# Кэшировать html и htm файлы на 6 часов

<FilesMatch ".(html|htm)$">

Header set Cache-Control "max-age=21600"

</FilesMatch>

# Кэшировать css, javascript и текстовые файлы на одну неделю

<FilesMatch ".(js|css|txt)$">

Header set Cache-Control "max-age=604800"

</FilesMatch>

# Кэшировать флэш и изображения на месяц

<FilesMatch ".(flv|swf|ico|gif|jpg|jpeg|png)$">

Header set Cache-Control "max-age=2592000"

</FilesMatch>

# Отключить кэширование для исполняемых файлов

<FilesMatch ".(pl|php|cgi|spl|scgi|fcgi)$">

Header unset Cache-Control

</FilesMatch>

Если у вас еще советы, то смело пишите в комментариях. Это и вам самим будет полезно, так как будет некий чек-лист.