Как да увеличите скоростта на вашия OpenCart магазин
Кои са най-лесните начини за подобряване на скоростта на OpenCart магазин? За да постигнете набелязаната цел може да приложите различни трикове и съвети , които не изискват промяна на кода и са сравнително лесни и бързи за изпълнение. Специалистите в областта на OpenCart прилагат и техники, които изискват по-задълбочена работа върху сайта.
Подобряването на скоростта на вашия сайт спомага на клиентите ви по-пълноценно да се възползват от това, което предлагате; увеличава скоростта на зареждане всяка страница (често води и до по-добро класиране в резултатите на търсещите машини); и създава впечатление за по-стабилен и професионален магазин.
Най-добрият начин за представяне на техниките, които се препоръчват за този тип онлайн магазини е чрез пример. Ще разгледаме тест инсталация на OpenCart 1.5.4.1 на сървър и ще проведем тест за скорост на страницата, за да установим колко бърз е магазинът в момента. Ще използваме данните като база за сравнение, която ще ни помогне да проследим напредъка в процеса. Магазинът работи със споделен хостинг предоставен от www.superhosting.bg, само данните за продукта по подразбиране. Резултатите са F (по A-F скала, където F е най-ниско) за скорост на страница и C за YSlow. След всеки съвет ще провеждаме същият тест отново, за да покажем как акумулативният ефект подобрява скоростта на OpenCart инсталацията.
Скорост на сайта преди оптимизиране (Opencart)
Съвет за ускоряване 1: Изключете продуктовите броячи за категориите
Категории на opencart с брояч на продуктите в тях
Продуктовият брояч е сред факторите с най-силно влияние върху скоростта на онлайн магазина. В ляво виждате списък с всички категории в сайта с цифра, поставена в скоби, която показва всички продукти в дадената категория. (забавянето е по-осезаемо в сайтове с много категории). Макар и това да е много полезен инструмент, не е абсолютно наложителен, защото изисква обединяване на няколко таблици в базата данни, за да се открие точния брой. Целият процес е труден и бавен и се отразява в забавяне на времето за зареждане на страници.
И така, какво ще стане ако го изключим? За щастие екипът на OpenCart разбира влиянието на този инструмент върху скоростта на зареждане на страница и затова осигурява леснодостъпна опция в админ панела за бързо изключване на продуктовия брояч. System->Settings->Edit-> Изберете “Option” Tab, след това променете “Category Product Count” на No и натиснете Save.
Резултат след оптимизиране на 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
По този начин сайтът е настроен да компресира външни скриптове. Какво показва теста за проверка?
Голямо подобрение на скоростта на сайта – 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 ##
Тук скоростта на 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>
Резултата след четвъртата модификация на Опънкарт
Въздействие: Средно
Въпреки, че скоростта за зареждане на страниците е същата в този експеримент, практиката показва, че тя съществено се увеличава, когато настройките 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
Здравей,
благодаря на екипа ви за полезната статия. Усилията, които полагате наистина са големи, с работата си помагате на много хора ?
Опитах да следвам стъпките, които са описани в статията, но когато добавя кода в .htaccess файл излиза ми 505 error…
на мене също ми излиза 505, …къде може да е проблема, ще помоля ако е възможно да обновите статията. Благодаря
Здравейте Богдан,
Възможно е хостинга Ви да не е активирал, някой функции на Apache и за това да Ви избива грешка от тип 505.
Вие, коя версия на опенкарт използвате, защото по-горе описаните неща са за 1.5.х.
Ако желаете можем да погледнем сайта Ви, ако ни го изпратите на мейл и да Ви дадем акуратно решение на проблема.
Поздрави,
Николай Еленков
Трябва да споменеш, че е необходимо да са включени определени модули на апачи, за да не се получава грешка 500.
Със стъпка 2 има проблем, ако се пейстне целия код- сайта спира да работи (Additionally, a 500 Internal Server Error). Със стъпка 5 – не се вижда никава промяна – тестван е сайта в няколко тестови сайтове включително и GTmetrix.
Къде се хоства сайта, повече хостинги активират автоматично повечето Apache модули и не съм наблюдавал проблем.
хоства се в хост.бг (не съм доволен) иначе gzip компресията е включена за целия сайт (преди не беше).
След стъпка 5, засякох проблем във визуализацията на някои ресурси в админ панела – не се визуализират различните менюта в dashboard-a на темата (journal), след влизане в страницата на даден продукт (в админ панела) различните страници като „Информация“, „Данни“ и т.н. са слети в един слайд. Сигурно има още – трябваше да махна всички „async“, за да се оправи. Вярно след слагането на тази команда в header.tpl визуалните елементи (с изключение на банер слайдера най-отгоре) зареждаха мигновено (въпреки, че в gtmetrix нямаше никаква промяна), но в случая излиза този проблем с админ панела. Как да бъде решен и някой сблъсквал ли се е с него?
Journal има собствени модули за кеширане в последните версии, защо не ги активираш тях? И да махни async, защото не винаги сработват, а чупят сайта. Вариант 2 намери cdn и нека зарежда от там .js файловете.
Благодаря за отговора,
С по-стара тема на journal е сайта, ще потърся тези cdn файлове.
Здравей,
Намерих един само един 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 седмици се опитвам да разреша този проблем (половината от удовлетворението идва от това…!)
Има решение на проблема – WordPress + WooCommerce + WP rocket (плъгин за кеширане)
Wordpress има един от най-оптимизираните кодове спрямо други платформи + този плъгин, в който впрочем има опцията да се зареждат CSS вайловете асинхронно а JS файловете да са с опция deffer или отложено зареждане, но ако се включи за всичко файлове, има голяма вероятност някои елементи или функционалности на сайта да не работят. Решението е да се провери ръчно, кои са проблемните файлове и да се оставят само те, да зареждат нормално, като се ексклюднат от съответната опция (има специално поле за това).
Като цяло всичко е доста оптимизирано, юзър френдли и не се налагат много ръчна работа и технически познания.