Opencart Optimizasyonu ve Hızlandırma

Opencart Optimizasyonu ve Hızlandırma

Ücretsiz, açık kaynak e-ticaret yazılımlarından biri olan Opencart’ı kurduysanız, bir süre sonra, özellikle ürün sayınız çok ise çeşitli problemler yaşamaya başlarsınız. Başta sitenizin ağır açılması gelir. Aşağıdaki adımları takip ederseniz tüm bu problemlerin üstesinden kolaylıkla gelebilirsiniz.

1. Kategoriler için ürün sayımını kapatın.

Varsayılan olarak opencart kategorileri, yandaki gibi, ürün sayılarını gösterecek şekilde gelir. Her kategorinin altında yer alan ürün sayısı için defalarca mysql sorgusu çalıştırılır. Eğer ürün sayınız 2000’nin üzerinde ise aşırı bir performans kaybı yaşarsınız. Bu sorunu aşmak için; Sistem -> Mağazalar -> Düzenle -> Seçenek altındaki Kategori Ürün Sayısı seçeneğini Hayır olarak işaretleyin.

 

 

 

 

 

 

 

 

 

2. GZIP sıkıştırmayı aktif edin.

JS ve CSS dosyalarının daha hızlı yüklenebilmesi için gzip sıkıştırmayı açmanızı öneririm. Bunun için opencart yönetiminden; Sistem -> Mağazalar -> Düzenle ->Sunucu sekmesi altındaki Sıkıştırma Seviyesi seçeneğine 4-6 aralığında bir değer verin. Normal şartlar altında 0-9 aralığında değerler alabilir ancak en ideali 4, 5 veya 6 girmektir. Çünkü sıkıştırma için de işlemci kullanıldığını ve sistemi yoracağını unutmayın.

Bir diğer işlem de .htaccess dosyasına aşağıdaki satırları eklemek. Aşağıdaki satırları ReWrite kurallarından sonra eklemeye özen gösterin.

# 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

3. Tarayıcı önbelleklemeyi etkinleştirin.

Yine .htaccess dosyasını açıyoruz ve aşağıdaki satırları, en alta ekliyoruz. Böylece tarayıcıya bir haftalık bir önbellekleme yaptırıp resim ve harici scriptleri tekrar tekrar talep etmesinin önüne geçmiş olacağız.

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

4. Javascript dosyalarınızı asenkron olarak yükleyin.

Normal şartlar altında, tarayıcılar, tüm javascript dosyalarının yüklenmesini bekler. Ancak sayfanız ilk yüklendiğinde, aslında js dosyasına hemen ihtiyacınız olmaz. İlk ihtiyacınız olan css dosyalarınızdır. Bu nedenle < script … > tagi olan sayfalarınızda ufak bir parametre ekleyerek bu problemi de aşabiliriz. Script dosyalarınız header.tpl template dosyası içerisinde yer alır.

Bu dosyaya catalog/view/theme/[TEMANIZ]/common/header.tpl veya .twig dizininden erişebilirsiniz. Bu dosya üzerinde yer alan script tagi içerisine async parametresini eklemeniz yeterlidir.

<!–Orjinal hali–>
<script type=”text/javascript” src=”catalog/view/javascript/common.js”>

<!–Yeni hali–>
<script async type=”text/javascript” src=”catalog/view/javascript/common.js”>

5. Resimlerinizi boyutlarınız HTML içerisinde mutlaka belirtin.

Siteniz üzerinde yer alan bütün resimlerin boyutları html içerisinde mutlaka belirlenmiş olmalıdır.

<img src=”/image/cache/catalog/stoksuzsat/62_ataturk-gu-827_1-228×228.jpg” alt=”Atatürk Gümüş Kol Düğmesi” title=”Atatürk Gümüş Kol Düğmesi” width=”228″ height=”228″ />

Binlerce resim üzerinde nasıl bu değişikliği yapabiliriz veya XML ile gelen resimlerin hangi birisiyle uğraşalım diyorsanız; onun da kolayı var. Aşağıdaki PHP koduyla, bu işlemi otomatik olarak yaptırabiliriz.

Aşağıdaki dosyayı açın;
system/library/response.php

Dosyayı açtıktan sonra if ($this->level) { satırından hemen önce aşağıdaki satırları kopyalayıp yapıştırın.

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);
}
}
}

İşte hepsi bu kadar! E-ticaret sitenizde gözle görülür bir hızlanma ve performans yakaladınız.