Как да увеличим скоростта на нашия OpenCart онлайн магазин

Както вече сте забелязали, OpenCart е предпочитаната от нас платформа, щом става дума за изграждане на онлайн магазин. Освен че предлага изключително много функционалности, допълнения, има добра модулна структура, притежава удобен и интуитивен потребителски интерфейс, лесна навигация, тя е и платформа, която работи сравнително бързо за онлайн магазин. Но както е казал Мечо Пух: „Колкото повече, толкова повече“.

Времето за зареждане на един онлайн магазин е от изключително значение. Ако си мислите, че потребителят ще има търпение да изчака, колкото е нужно, за да зареди вашия уебсайт, жестоко се лъжете. Към момента стандартът е до 5 секунди време за зареждане. Този период е от особено значение и за вашето SEO представяне, за количеството конверсии и вашите онлайн приходи. Според Amazon, всяко забавяне на зареждането с 1 секунда понижава онлайн конверсиите със 7%.

В тази статия ще ви издадем няколко трика как да ускорите скоростта на зареждане на вашия онлайн магазин.

Компресия на онлайн магазина

Важността на компресията е взета под внимание и дори е добавена като поле в административния панел. Можем да го намерим в

Настройки -> Редактиране на вашият магазин -> Сървър (Settings -> Your store -> Server).

В това поле можем да въведем стойност от 0 до 9, но крайностите не са препоръчителни, затова търсим средните стойности. Препоръчваме ви да сложите стойност 5 или 6. След всяка една промяна тествайте дали онлайн магазинът работи.

Преброяване на категориите

По подразбиране Opencart ни показва колко продукта има в дадена категория.

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

Това може да направите от настройките на административния панел, или:

Настройки -> редактиране на вашият магазин -> опции (Settings -> your store -> Options).

Тук остава само да изберем „Да“ или „Не“ като опция.

По-мощен хостинг план

Ако сте в момента сте на най-икономичния план на вашата хостинг компания, но можете да си позволите по-висок хостинг план, сменете го!

Как да прецените дали имате нужда от по-скъп хостинг план?

Ще ви дадем пример с онлайн магазин, ползващ хостинг план от SuperHosting. Влизате в Cpanel и продължавате към статистики.

В случай, че CPU usage-ът е над 0 или в жълт цвят, то това значи, че е препоръчително (ако не и задължително) да преминете към по-скъп хостинг план. Друг вариант е сайтът ви прави огромни заявки, които трябва да се оптимизират от техническо лице.

Индекси на таблиците

По подразбиране таблиците в Opencart нямат поставени индекси, за да може всеки да сложи такива, според персоналните си нужди. Тук няма точно универсална формула, затова ви представим нещо, което най-много се доближава до нея.

Първо, задължително правите бекъп на базата данни. След това отивате в phpmyadmin и избирате вашата база данни, а оттам таба SQL. След това в текстовото поле може да копирате заявките и да натиснете “Go”.

Таблиците за категориите

ALTER TABLE `oc_category` ADD INDEX ( `parent_id` ) ;
ALTER TABLE `oc_category` ADD INDEX ( `top` ) ;
ALTER TABLE `oc_category` ADD INDEX ( `sort_order` ) ;
ALTER TABLE `oc_category` ADD INDEX ( `status` ) ;
ALTER TABLE `oc_category_description` ADD INDEX ( `language_id` );
ALTER TABLE `oc_category_to_store` ADD INDEX ( `store_id` );

В случай че имате много подкатегории с подкатегории, с подкатегории и т.н., поставете индекс на колоната path_id:

ALTER TABLE `oc_category_path` ADD INDEX ( `path_id` );

Таблицата с продуктите

ALTER TABLE `oc_product` ADD INDEX ( `sku` ) ;
ALTER TABLE `oc_product` ADD INDEX ( `upc` ) ;
ALTER TABLE `oc_product` ADD INDEX ( `manufacturer_id` ) ;
ALTER TABLE `oc_product` ADD INDEX ( `sort_order` ) ;
ALTER TABLE `oc_product` ADD INDEX ( `status` ) ;
ALTER TABLE `oc_product_option` ADD INDEX ( `option_id` ) ;
ALTER TABLE `oc_product_option_value` ADD INDEX ( `product_option_id` ) ;
ALTER TABLE `oc_product_option_value` ADD INDEX ( `product_id` ) ;
ALTER TABLE `oc_product_option_value` ADD INDEX ( `option_id` ) ;
ALTER TABLE `oc_product_option_value` ADD INDEX ( `option_value_id` ) ;
ALTER TABLE `oc_product_to_category` ADD INDEX ( `category_id` );
ALTER TABLE `oc_product_attribute` ADD INDEX ( `attribute_id` );
ALTER TABLE `oc_product_attribute` ADD INDEX ( `language_id` );
ALTER TABLE `oc_product_description` ADD INDEX ( `language_id` );
ALTER TABLE `oc_product_to_store` ADD INDEX ( `store_id` );

Таблиците за опциите към продуктите

В случай че имате богат избор от опции към продуктите, добавете индекси и в следните таблици:

Таблицата с Pretty urls

ALTER TABLE `oc_url_alias` ADD INDEX ( `query` ) ;

ALTER TABLE `oc_url_alias` ADD INDEX ( `keyword` ) ;

ALTER TABLE `oc_url_alias` ADD INDEX ( `url_alias_id` );

GZIP компресияТези заявки ще забързат значително скоростта на вашият уебсайт.

Това е различна компресия от тази, за която споменахме в началото на статията. Тук страниците се компресират на сървъра и може да намалят до 80% от размера на страниците. Това ще ускори значително вашият уебсайт и е почти задължително.

Как се пуска компресията ако вашият сървър е апаче и имате .htaccess файл в папката в която е вашият уебсайт? Изтеглете файла и го отворете с текстов редактор.

<IfModule mod_deflate.c>

# Compress HTML, CSS, JavaScript, Text, XML and fonts

AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml

# Remove browser bugs (only needed for really old browsers)

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

</IfModule>

Поставете този код в вашият .htaccess файл и го качете на сървъра. Веднага след като го направите, уебсайтът ви ще бъде усезаемо по бърз.

Препоръчваме ви веднага след като качите файла да видите дали сайта работи. .htaccess файлът е изключително чуствителен и има вариант уебсайтът да се „счупи“. Ако сайтът ви крашне, изтрийте това, което добавихте, и запишете така файла.

Кодът, който ви написахме по-горе, може да се използва за всички онлайн магазини, не само за тези, които са изградени на платформата OpenCart. Единственото изискване е сървърът, на който се намира уебсайтът, да е Apache.

Leverage Browser cache

Можем да позволим на браузъра да кешира ресурси като Javascript, CSS и изображения.

Така, ако клиентът посещава често уебсайта ни, в неговия браузът ще се свалят някой от файловете и няма да е нужно повторно изтегляне на ресурсите.

Така сайтът ще се забърза значително още след първото влизане на уебсайта.

## EXPIRES CACHING ##

<IfModule mod_expires.c>

ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"

</IfModule>

## EXPIRES CACHING ##

Редакцията отново става през .htaccess файла.

Инструменти, с които можете да проследите колко бързо зарежда вашият уебсайт

Тъй като понякога е трудно на око да се прецени дали нещата, които правим влияят на скоростта (някой път разликата е в милисекунди), ще ви предоставим няколко начина, чрез които можете да проверите дали сте пожънали успех.

Минифициране

Минифицирането на файлове е процес, в които взимаме някой CSS или Javascript файл и го правим да се визуализира на един ред. По този начин се премахват коментарите, променливите и функциите стават с по-кратки имена. Размерът на файла също се намаля в пъти.

Онлайн инструмент, с който може да минифицирате файловете е http://www.minifier.org/.

Най-добрият вариант е да минифицираме всички файлове е да ги обединим в един CSS или Javascript и по този начин да направим по-малко заявки за ресурси.

Друг инструмент, който препоръчваме, е Google Page Insights.

https://developers.google.com/speed/pagespeed/insights/

Той оценява вашия уебсайт с оценка от 0 до 100 (точкова система). Инструментът е изключително прецизен и взискателен (като всичко, свързано с Google), затова е и много трудно да изкараме висок брой точки. Стандартът е при до достигнати 80 точки (или повече) да се смята за добър и добре оптимизиран за всякакви устройства уебсайт. Чрез него можем да разберем и оценка на потребителското изживяване, което предлага нашия уебсайт. Отново по точкова система (максимум също е 100 точки), с всичко над 90 точки счетено за успешно.

GTMETRIX – https://gtmetrix.com/

Този инструмент има доста критерии, като за всеки от тях има подробно обяснение как да бъде решен. Той показва в проценти каква е скоростта на уебсайта, какъв е размерът на страницата и колко рекуеста прави, за да си вземе всички ресурси.

Имайте предвид, че тези инструменти често работят от далечно място. Например, ако уебсайтът ви е в България, а инструментът тества от USA – ще има едно забавяне, породено от голямата дистанция, което няма как да избегнем.