157 Как ускорить ваш магазин на OpenCart

Как ускорить ваш магазин на OpenCart


 |  ❤ 20650  |  ☻ 4
Категория: Opencart
  1. 5
  2. 4
  3. 3
  4. 2
  5. 1
(10 голосов, в среднем: 4.3 из 5)

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

С самого начала я будет создание тестовой установки OpenCart 1.5.6 на моем сервере и запуск страницы тест скорости, который дает мне оценить, как быстро мой магазин на данный момент, который я могу использовать в качестве базового чтобы посмотреть сколько она может быть улучшена путем следующие несколько шагов. Магазин находится на быстрое VPS, с только что данные продукта по умолчанию и ничего не добавили к нему на всех. Я вышел с F для страницы скорости и C класса для YSlow. В конце каждый отзыв я выполнить еще один тест скорости страницы и показать, как накопительный эффект улучшается скорость моей установки OpenCart.

speed-step-0

1: Отключите счетчики количества продуктов для категорий

speed-step-1a

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

Так что давайте выключить его. К счастью команда разработчиков OpenCart признают влияние это оказывает на скорость страницы, так что они добавили легкий вариант в разделе администратора, который позволяет быстро отключить счетчик продукта. Просто войти в раздел администрирования вашего магазина и перейти к: система -> Настройки -> Изменить -> нажмите на вкладке «Опции» установите «Категория продукта граф» нет и нажмите кнопку Сохранить.

speed-step-1b

Воздействие: низкий

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

2: Включить сжатие GZIP

OK так что теперь мы будем рассказывать на сайт, чтобы сжать CSS и JS файлов вниз в файл лучше подходят для загрузки быстро. Чтобы сделать это, нам нужно сделать две вещи, которые позволяют сайт для работы с файлами, это волшебство. Во-первых, войдите в ваш магазин OpenCart и перейти к: система -> Настройки -> Изменить -> нажмите на вкладку «Сервер» и установить «Выходной уровень сжатия» между 4 и 6. Вариант предлагает число от 0 до 9, но по моему опыту, я обнаружил, что более число работ средней ценовой категории Лучший как высокое число сжимает файл более но тратит больше времени, делать это, которое делает все это довольно бессмысленно.

Второй шаг должен добавить несколько строк в наш файл .htaccess, который обеспечивают второй параметр сжатия в случае, если по умолчанию OpenCart один не влияет (которое было сообщено до). Таким образом откройте .htaccess файл и добавьте следующий код под правила перезаписи:

# compress text, HTML, JavaScript, CSS, and XML
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent

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

Читайте также:  [WebMe] 18yo для ocStore_v15x 0.3.ocs1531

speed-step-2

Воздействие: Высокий

Это оказало огромное влияние, хотя на сайте еще есть C класса для страницы скорости, вы можете видеть, что она возросла до 72% просто включив два последних скорость советы. YSlow класса в настоящее время б. Так в сущности, после двух советы нашего полигона является третьим быстрее, чем это было!

3: Включить кэширование браузера

OK так что еще раз мы будет окунать в файл .htaccess для задания длины кэша для браузеров, чтобы сохранить изображения и внешних скриптов. На этот раз мы будет указание браузеру сохранить элементы на 7 дней, прежде чем запрашивать все снова который следует увеличить время загрузки значительно. Помните, что это позволит сделать вещи очень трудно для развития, так что если вы делаете много развития изменений на ваш сайт, то это может быть лучше, чтобы закончить, прежде чем использовать этот Совет для ускорения вашего магазина OpenCart.

Вот код для добавления под последний блок, который мы только что добавили:

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 week"
ExpiresByType image/jpeg "access plus 1 week"
ExpiresByType image/gif "access plus 1 week"
ExpiresByType image/png "access plus 1 week"
ExpiresByType text/css "access plus 1 week"
ExpiresByType application/pdf "access plus 1 week"
ExpiresByType text/x-javascript "access plus 1 week"
ExpiresByType application/x-shockwave-flash "access plus 1 week"
ExpiresByType image/x-icon "access plus 1 week"
ExpiresDefault "access plus 1 week"
</IfModule>
## EXPIRES CACHING ##

speed-step-3

Воздействие: Высокий

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

4: Включить заголовки для нескольких HTTP-запросов

В этом разделе мы будет разрешение браузеры для отправки нескольких HTTP-запросов. По умолчанию браузер запрашивает каждый файл затем ожидает ответа и закрывает подключение до открытия еще один. Очевидно, что это может быть низкий процесс, если есть много файлов для запроса, который в случае с OpenCart, поэтому мы будет позволяя браузеров, чтобы захватить больше одного файла одновременно, позволяя Keep-Alive.

На этом отзыв, нам нужно голову в файлы веб-сервера сам и убедитесь, что нужный модуль включен для нас использовать иначе вы получите ошибку сервера 500. Чтобы включить Keep Alive войти в ваш контейнер сервера и перейти к: etc/httpd/conf/httpd.conf (если вы находитесь на сервере Apache). Откройте нам файл и выполните поиск «Держать», который доставит вас в правой части файла. Убедитесь, что значения, они находятся ниже:

KeepAlive On
MaxKeepAliveRequests 50
KeepAliveTimeout 7

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

Далее откройте ваш файл .htaccess и добавьте следующий код под другие блоки, затем сохранить его:

<ifModule mod_headers.c>
    Header set Connection keep-alive
</ifModule>

Теперь мы сделали это, давайте запустим тест скорости другой страницы:

Читайте также:  Оповещение о новых письмах в Gmail по SMS средствами Google Calendar + Google Apps Script

speed-step-3

Воздействие: средний

Хотя скорость страницы осталось то же самое в этом эксперименте тест, я видел скорости резко увеличить, когда включен параметр keep-alive, поэтому я советовал бы что вы делаете это! Только не забудьте проверить, что сервер совместим как это приведет к ошибке 500 если не.

5: Асинхронно загрузить JavaScript

ОК так когда OpenCart сначала загружается он захват всех этих внешних таблиц стилей, JS файлов и загрузки все содержимое страницы, но это не необходимо. В идеальном мире сайт должен загрузить все HTML и укладка первой и затем загрузить JavaScript позже, как это не требуется для структуры веб-страниц. Таким образом что мы собираемся делать в этом скорость Совет — Убедитесь, что все загружается без необходимости ждать для файлов JavaScript сначала будет полностью загружен. Для этого мы просто добавим очень малый параметр каждый тег < script > для страницы. К счастью, большинство файлов загружаются в файле header.tpl так войти в вашем FTP-программу выбора и головой:

  • Каталог/Просмотр/тема / [ваш THEME]/common/header.tpl

Откройте файл в текстовом редакторе и выполнить быстрый поиск для «.js» (без кавычек), чтобы найти все файлы JavaScript и просто добавить слово: async после < script. Так, например:

<!--THIS IS THE ORIGINAL-->
<script src="catalog/view/javascript/common.js"></script>

<!--THIS IS WHAT IT LOOKS LIKE AFTERWARDS-->
<script async src="catalog/view/javascript/common.js"></script>

После того как вы сделали это для всех файлов JavaScript (не волнуйтесь, есть только пять или около того) вы успешно будет отложено файлы JavaScript, загрузку и задерживая скорость страницы. Они будут продолжать загружать все загрузки. Я сделал несколько быстрой проверки, и это выглядит как слайд-шоу, сравнить кнопки, addToCart, все отлично работает и т.д. с загрузкой async, так что это не повлияет на Ваше удобство магазина OpenCart, только скорость его все вверх. Давайте сделаем еще один тест скорости страницы.

speed-step-5

Воздействие: средний

Вау! Прямо А теперь для страницы скорости. Мы увеличили скорость ранга 92%, так как мы начали испытания и сайт чувствует себя очень быстро. Плюс все работает точно так, как он должен так давайте через один больше скорость кончика и увидеть, насколько близко мы можем добраться до этой отметки 100%.

6: Добавьте размеры изображения в OpenCart

OpenCart имеет собственный встроенный процессор изображения который автоматически изменяет размер всех изображений. Unfortuantely, она не включает размеры изображения как часть тега, сам, он просто передает изображение. Мы можем увеличить скорость страницы предупреждения браузеров точные размеры изображения, прежде чем его загрузки, так что можно создать правильный размер пространства и осуществлять во время загрузки изображения, для этого нам нужно будет использовать некоторые код, предоставляемый разработчиком другой OpenCart, Qphoria, на этом соединении.

Откройте следующий файл в текстовом редакторе:

  • System/Library/Response.php
Читайте также:  Типы ссылок. Seo продвижение

Найдите следующую строку кода в файле:

if ($this->level) {

Затем добавьте следующий код просто прежде чем выше линии:

//Q: Add width/height tags to all images for Google Page Speed tip:
//http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions
preg_match_all('/<img[^>]+>/i', $this->output, $result);

$img = array();
foreach($result[0] as $img_tag) {
preg_match_all('/(width|height|src)=("[^"]*")/i',$img_tag, $img[$img_tag]);
}

foreach ($img as $k => $info) {
if (count($info) == 3 && $info[1][0] == 'src') {
//if (curl_init(str_replace('"', '', $info[2][0]))) {
$imgfile = str_replace('"', '', $info[2][0]);
$imgfile = str_replace(HTTP_SERVER, DIR_IMAGE . '../', $imgfile);
$imgfile = str_replace(HTTPS_SERVER, DIR_IMAGE . '../', $imgfile);
if (file_exists($imgfile)) {
$image_info = getImageSize(str_replace('"', '', $imgfile));
$k = trim($k, '/>');
$k = trim($k, '>');
$this->output = str_replace($k, ($k . ' ' . $image_info[3]), $this->output);
}
}
}
//

Еще раз спасибо Qphoria (ссылка является его огромная сообщения в форуме OpenCart) для этого кода, нельзя было легко писать, но он внушителен и делает работу великий!

Таким образом мы выполнить еще один тест скорости страницы, результаты которых приведены ниже.

speed-step-6

Воздействие: низкий

OK так что в этом случае он не имел действительно влияет на скорость страницы. Либо это предполагает, что это довольно низкий приоритет скорость, оптимизируя настройки для вашего магазина OpenCart или что это только то, что Google рекомендует. Это не должно сказать, что это не стоит делать, это может быть с больше изображений на сайте скорость страницы пособия будет рецептуры, так что я бы вероятно все еще сделать, чтобы убедиться, что Google имеет больше коробки, галочкой, когда определяющим вещи, как поиск рейтинга!

В качестве дополнительной проверки я также побежал тест на PageSpeed Google в веб-приложение, и я получил очень хороший 93/100 для настольных браузеров с точки зрения скорости, который является невероятный прыжок общий от 41, я первоначально получил! Таким образом дать ей идти на вашем сайте и дайте мне знать, как вы в комментариях ниже, делитесь ваши ряды старых и новых скорость и наслаждайтесь вашей новой быстрее OpenCart магазин!

 

оригинал статьи — http://cartadvisor.com/blog/2013/11/05/speed-opencart-store/

Теги:


Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

шесть + три =

наверх