opencart zarejda bavno

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

Кои са най-лесните начини за подобряване на скоростта на OpenCart магазин? За да постигнете набелязаната цел може да приложите различни трикове и съвети , които не изискват промяна на кода и са сравнително лесни и бързи за изпълнение. Специалистите в областта на OpenCart прилагат и техники, които изискват по-задълбочена работа върху сайта.

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

Най-добрият начин за представяне на техниките, които се препоръчват за този тип онлайн магазини е чрез пример. Ще разгледаме тест инсталация на OpenCart 1.5.4.1 на сървър и ще проведем тест за скорост на страницата, за да установим колко бърз е магазинът в момента. Ще използваме данните като база за сравнение, която ще ни помогне да проследим напредъка в процеса. Магазинът работи със споделен хостинг предоставен от www.superhosting.bg, само данните за продукта по подразбиране. Резултатите са F (по A-F скала, където F е най-ниско) за скорост на страница и C за YSlow. След всеки съвет ще провеждаме същият тест отново, за да покажем как акумулативният ефект подобрява скоростта на OpenCart инсталацията.

opencart speed up shared hosting

Скорост на сайта преди оптимизиране (Opencart)

Съвет за ускоряване 1: Изключете продуктовите броячи за категориите

opencart produktovi kategorii

Категории на opencart с брояч на продуктите в тях

Продуктовият брояч е сред факторите с най-силно влияние върху скоростта на онлайн магазина. В ляво виждате списък с всички категории в сайта с цифра, поставена в скоби, която показва всички продукти в дадената категория. (забавянето е по-осезаемо в сайтове с много категории). Макар и това да е много полезен инструмент, не е абсолютно наложителен, защото изисква обединяване на няколко таблици в базата данни, за да се открие точния брой. Целият процес е труден и бавен и се отразява в забавяне на времето за зареждане на страници.

И така, какво ще стане ако го изключим? За щастие екипът на OpenCart разбира влиянието на този инструмент върху скоростта на зареждане на страница и затова осигурява леснодостъпна опция в админ панела за бързо изключване на продуктовия брояч. System->Settings->Edit-> Изберете “Option” Tab, след това променете “Category Product Count” на No и натиснете Save.

speed up opencart shared hosting

Резултат след оптимизиране на opencart и спиране на брояча на продуктите в категориите

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

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

Съвет за ускоряване 2: Позволете GZIP компресия

Идеята в този съвет е да компресираме CSS и JS файлове в друг тип файл, който се зарежда по-бързо. За целта трябва да направим две неща, които ще позволят на сайта да ускори зареждането на файловете.

Влезте в системата на OpenCart магазина:

System->Settings->Edit->Изберете “Server” Tab и променете “Output Compression Level” на стойности между 4 и 6. Имате опцията да изберете между 0 и 9, но практиката показва, че най-ефективните резултати се постигат при средни стойности. По-високите показатели компресират повече файловете, но изискват повече време.

Втората стъпка е да добавите няколко реда във .htaccess файл, което осигурява допълнителна възможност за компресия в случай, че опцията в OpenCart по подразбиране няма ефект. И така отворете .htaccess файла и добавете следния код под ReWrite правила.

# 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 DEFLATЕ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

По този начин сайтът е настроен да компресира външни скриптове. Какво показва теста за проверка?

speed up opencart shared hosting solution

Голямо подобрение на скоростта на сайта – Opencart

Въздействие: Високо
Ефектът е много голям. Скорост на зареждане на страницата е 70% (оценка 3). Оценката YSlow тук е C 77%.
Само след два приложени съвета за забързване на скоростта сайтът е много по-бърз от началото.

Съвет за ускоряване 3: Позволете браузър каширане

И в този случай ще работим с файла .htaccess, за да настроим дължините на каширането за браузъри, за да запазват изображения и външни скриптове. Този път ще посочим браузърите да запазват елементите за 7 дни. Запомнете, че това ще усложни програмирането на магазина, така че ако правите много промени в сайта е желателно да приключите с тях преди да прилагате този съвет.
Виждате кодът, който да поставите под последната част, която сме добавили

## EXPIRES CACHING ##
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"
## EXPIRES CACHING ##

povishavane na skorostta opencart

Тук скоростта на Opencart е значително повишена!

Въздействие: Високо
С прилагането на този съвет страниците ще се зареждат много бързо.

Съвет за ускоряване 4: Позволете поддържане Keep Alive за множество HTTP заявки

В тази част ще позволим на браузърите да изпращат множество HTTP заявки. По подразбиране, браузърът изпраща заявка за един файл, след това изчаква за отговор и прекъсва връзката преди да отвори следващия. Очевидно при наличието на много файлове този процес е бавен, както е случаят с OprenCart. Идеята на този съвет е да позволим на браузърите да улавят повече от един файл наведнъж, като позволим Keep-Alive опцията .
За целта трябва да работим с файловете в Web Server и да сме сигурни, че необходимият модул е достъпен. В противен случай ще получим грешка 500 server error. За целта влезте в сървъра в:  etc/httpd/conf/httpd.conf (в случая предполагаме, че работите с Apache сървър). Отворете файла и проведете търсене за “Keep”, което ще ви отведе в правилната част във файла. Бъдете сигурни, че стойностите са както посечените по-долу:

KeepAlive On
MaxKeepAliveRequests 50
KeepAliveTimeout 7

Забележка: Ако предпочитате да не извършвате промените сами, свържете се с вашия уеб хост, изпратете им линк към тази страница и уточнете, че трябва да настроите KeepAlive според указанията на Съвет 4 за ускоряване.
Следващата стъпка е да отворите вашия .htaccess файл и добавете следния код под посочените в таблицата. След това го запазете.

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

uvelichavane na skorostta opencart

Резултата след четвъртата модификация на Опънкарт

Въздействие: Средно
Въпреки, че скоростта за зареждане на страниците е същата в този експеримент, практиката показва, че тя съществено се увеличава, когато настройките Keep-Alive са включени. Винаги проверявайте дали сървърът е съвместим. В противен случай ще получите грешка 500.

Съвет за ускоряване 5: Заредете Javascript асинхронизирано

При нормално зареждане на OpenCart обикновено първо се „улавят” различни външни файлове, JavaScript файлове и се зарежда цялото съдържание на страницата. Всъщност не всичко това е необходимо. В идеалният вариант сайтът трябва първо да зарежда целия HTML и стил и чак след това да зарежда JavaScript, защото той не е нужен за структурата на страниците. Идеята на този съвет е да осигурите зареждането на съдържанието на страниците преди JavaScript файловете. За целта ще добавим много малък параметър във всеки <script> таг за страницата. За щастие, повечето от файловете се зареждат в header.tpl файла, затова влезте в FTP програма по ваш избор и:

catalog/view/theme/[YOUR THEME]/common/header.tpl

Отворете файла в текстов едитор и проведете бързо търсене за “.js” (без кавичките), за да намерите всички JavaScript файлове и просто добавете думата async след <script>. Например:

<!–Изглед по дефолт–>
<script type=“text/javascript“ src=“catalog/view/javascript/common.js“></script>
<!–Изглед след промяната–>
<script async type=“text/javascript“ src=“catalog/view/javascript/common.js“></script>

След като сте направили това за всички JavaScript файлове (те са около 5 на брой) успешно ще предотвратите забавянето на зареждането на страниците. Те ще се заредят след останалото съдържание. Какво показва тестът за скоростта?
Ние успяхме да докараме резултат от 90% / 92% !

Ефектът върху скоростта е значителен. Приема се, че е приоритет за оптимизиране на скоростта за вашия OpenCart магазин или, че това е препоръка от Google. Вероятно по-голям ефект от този съвет ще се получи при сайт с много изображения.
Сайта, който тествахме е с приблизително 600 продукта.
Сайта е тестван с http://gtmetrix.com / Source

Как да увеличите скоростта на вашия OpenCart магазин
5 (100%) 9 votes

12 replies
  1. Теодора Иванова says:

    Здравей,
    благодаря на екипа ви за полезната статия. Усилията, които полагате наистина са големи, с работата си помагате на много хора 🙂
    Опитах да следвам стъпките, които са описани в статията, но когато добавя кода в .htaccess файл излиза ми 505 error…

    Отговор
    • Elenkov says:

      Здравейте Богдан,

      Възможно е хостинга Ви да не е активирал, някой функции на Apache и за това да Ви избива грешка от тип 505.
      Вие, коя версия на опенкарт използвате, защото по-горе описаните неща са за 1.5.х.
      Ако желаете можем да погледнем сайта Ви, ако ни го изпратите на мейл и да Ви дадем акуратно решение на проблема.

      Поздрави,
      Николай Еленков

      Отговор
  2. Stoil Dim says:

    Трябва да споменеш, че е необходимо да са включени определени модули на апачи, за да не се получава грешка 500.

    Отговор
  3. akvarelbg says:

    Със стъпка 2 има проблем, ако се пейстне целия код- сайта спира да работи (Additionally, a 500 Internal Server Error). Със стъпка 5 – не се вижда никава промяна – тестван е сайта в няколко тестови сайтове включително и GTmetrix.

    Отговор
    • Elenkov says:

      Къде се хоства сайта, повече хостинги активират автоматично повечето Apache модули и не съм наблюдавал проблем.

      Отговор
      • akvarelbg says:

        хоства се в хост.бг (не съм доволен) иначе gzip компресията е включена за целия сайт (преди не беше).

        Отговор
  4. akvarelbg says:

    След стъпка 5, засякох проблем във визуализацията на някои ресурси в админ панела – не се визуализират различните менюта в dashboard-a на темата (journal), след влизане в страницата на даден продукт (в админ панела) различните страници като „Информация“, „Данни“ и т.н. са слети в един слайд. Сигурно има още – трябваше да махна всички „async“, за да се оправи. Вярно след слагането на тази команда в header.tpl визуалните елементи (с изключение на банер слайдера най-отгоре) зареждаха мигновено (въпреки, че в gtmetrix нямаше никаква промяна), но в случая излиза този проблем с админ панела. Как да бъде решен и някой сблъсквал ли се е с него?

    Отговор
    • Elenkov says:

      Journal има собствени модули за кеширане в последните версии, защо не ги активираш тях? И да махни async, защото не винаги сработват, а чупят сайта. Вариант 2 намери cdn и нека зарежда от там .js файловете.

      Отговор
      • akvarelbg says:

        Здравей,
        Намерих един само един 1 файл -> da_journal2_image_cdn.xml – можеш ли да дадеш повече инфо относно, процедурата, която предлагаш – как да стане. Предполагам, че щом идеята е да се въведе код вътре в този cdn файл за да се зарежда js-файла от него, ще трябва да се премахне от другите файлове, от където се зарежда до сега – кои са те? 🙂 Изчетох 1 тон материал, и крайна сметка стигнах до момента че трябва да се направи цялата работа по няколко начина:
        1. deffer, 2. async, 3. onload, 4. да се paste-не този код в края на html файла преди затварящия таг

        function downloadJSAtOnload() {
        var element = document.createElement(„script“);
        element.src = „ИМЕТО НА ДАДЕНИЯ JS ФАЙЛ“;
        document.body.appendChild(element);
        }
        if (window.addEventListener)
        window.addEventListener(„load“, downloadJSAtOnload, false);
        else if (window.attachEvent)
        window.attachEvent(„onload“, downloadJSAtOnload);
        else window.onload = downloadJSAtOnload;

        Четох че трябва да се махне от header-a дадената команда за „script“ и да се сложи във footer-a посредством първите 3 команди (или ако опитаме с 4-ти вариант). Ок, но тук изникват няколко въпроса:
        Кой точно е файла където трябва да се едитне това, защото реално този html файл се компилира с webalizer и реално не съществува в FTP-to – локализиран е въпросните блокиращи JS и CSS файлове, локализирани са файловете където съществуват като ред в кода (в случая става дума за 4.html,5.html и 6.html файлове) обаче в тях е зададена команда от сорта –
        /journal-cache/_19bb446afe057216…..js

        И тук аз блокирам… Между другото мисля, че е налице използването на „jquery“
        Някакъв съвет?

        Благодаря предварително и се извинявам, за нахалството, но от 3 седмици се опитвам да разреша този проблем (половината от удовлетворението идва от това…!)

        Отговор
        • Венета Крумова says:

          Има решение на проблема – WordPress + WooCommerce + WP rocket (плъгин за кеширане)
          Wordpress има един от най-оптимизираните кодове спрямо други платформи + този плъгин, в който впрочем има опцията да се зареждат CSS вайловете асинхронно а JS файловете да са с опция deffer или отложено зареждане, но ако се включи за всичко файлове, има голяма вероятност някои елементи или функционалности на сайта да не работят. Решението е да се провери ръчно, кои са проблемните файлове и да се оставят само те, да зареждат нормално, като се ексклюднат от съответната опция (има специално поле за това).

          Като цяло всичко е доста оптимизирано, юзър френдли и не се налагат много ръчна работа и технически познания.

          Отговор

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Вашият коментар