Merhaba arkadaşlar, bugün WordPress ve diğer tüm siteleriniz için basit ama etkili bir işlem anlatacağım. Bu işlem sonrası sizde Css ve Javascript dosyalarınızı sıkıştırın ve nelere sebep verdiğini aynı zamanda bize kazandırdıklarına kulak verin.

Minify nedir ?

Bu kelime ingilizce bir terim olmakla birlikte Türkçe karşılığı küçültmek, sıkıştırmak anlamına gelir. Web sitemizde bulunan binlerce dosyanın hepsinin okunması ve ekrana yazdırılması işlemi vardır. Bu işlemler ne kadar çabuk gerçekleşirse sitemiz o kadar hızlı açılır. Bu nedenle en çok kullanılan Css ve Javascript, jquery gibi dosyalarımızın içerisinde ki gereksiz boşluklar bu süreyi arttırabilir. Bu boşlukları temizlemek ve düzene sokmak tabi ki mümkün ..

Css ve Javascript dosyalarımı nasıl sıkıştırabilirim ?

Bu sorunun binlerce cevabı var ben en pratik yolunu izah edeceğim. Bu işlem için yine milyarlarca yazılmış eklentiler, platformlar ve araçlar mevcut en pratiğini kullanmak size hem zaman tasarrufu sağlar hemde ihtiyacınızı görürken olayıda kavramış olursunuz.

Css ve Javascript dosya sıkıştırması önce GZip denilen bir sıkıştırma durumu var biraz bundan bahsedeyim ve daha sonra maddelere geçelim.Öncelikle sitenizin htacesss dosyasına kısa bir kod eklemeniz gerekiyor. GZip sitenizde bulunan dosyaları belli bir düzeye göre sıkıştırmasını ve sitenizin daha hızlı açılmasını ve bandwidth yükünün dengelenmesini, düzenlenmesini sağlar. Bunun için htaacess dosyanıza bir kaç satır kod eklemeniz yeterlidir. Kod ekleme sonrası sitenizde hata meydana gelirse kod işe yaramamıştır ve kaldırmanızı öneririm. Ve bu işlem öncesi lütfen dosyanızın yedeğini mutlaka almanızı tavsiye ederim.

<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/xml text/css text/plain
AddOutputFilterByType DEFLATE image/svg+xml application/xhtml+xml application/xml
AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE text/javascript application/javascript application/x-javascript
AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-otf
AddOutputFilterByType DEFLATE font/truetype font/opentype
</IfModule>

Yukarda paylaştığım kodlar bazı hostinglerde işleme geçmiyor olabilir. Genellikle Nginx kullanan arkadaşlarda bu kodlar çalışmayabilir, Plesk panel kullanıyorsanız Apache & Nginx Setting sekmesine gelip en alttaki Additional nginx directives kutucuğuna aşağıda yer alan kodları yazmaları yeterli olacaktır.

gzip         on;
gzip_disable "MSIE [1-6]\\.(?!.*SV1)";
gzip_proxied any;
gzip_types   text/plain text/css application/javascript application/x-javascript text/xml application/xml application/xml+rss text/javascript image/x-icon image/bmp image/svg+xml;
gzip_vary    on;

location ~* \.(js|css|png|jpg|jpeg|gif|ico)$ {
	expires 30d;
	add_header Cache-Control "public, no-transform";
}

Bu işlem başarılı ve sitenizde bir sorun çıkmadı ise aşağıdaki sorgular sonrası Google PageSpeed sonucunda ” Sıkıştırmayı etkinleştirmişsiniz ” ibaresini görebilirsiniz. Hemen maddeler ile dosya sıkıştırma işlem basamaklarından bahsedeyim;

• Google PageSpeed sitesine girip sitenizin açılış hızını test edin ve hata ekranında ” CSS’yi küçültün ” ibaresi görüyorsanız css dosyalarınızın ve javascript dosyalarınızın gereksiz büyük olduğunu anlayabilirsiniz.
• Bu kontrol sonrası Google uyarı / bilgilendirme ibarelerinin en altında ” Optimizasyonlar Bulundu ” kısmı yer alır.
• Bu sayfa için, optimize edilmiş resim, JavaScript ve CSS kaynaklarını indir. İbaresine tıkladığınızda siteniz için optimize edilen görseller, css ve javascript dosyalarını FTP’nizden tekrar sitenize yükleyebilirsiniz.
• Fakat bazı dosyaları incelemeyebilir ve siz yine de tüm css ve javascript dosyalarınızı tek tek sıkıştırın ve FTP’nizden yükleyin.
• Minifier aracı kullanabilirsiniz. Sıkıştırmak istediğiniz css, javascript linkini yapıştırın ve sizin için sıkıştırdığı kodları kopyalayıp dosyanızın içerisindekileri silip yenisini yazın ve kaydedip FTP’nizden yükleyin. Tüm dosyalar için bu işlemi gerçekleştirmelisiniz.
• Tekrar Google PageSpeed kontrolü ettiğinizde ” CSS’niz küçültülmüş. ” ve ” JavaScript içeriğiniz küçültülmüş ” ibarelerine rast gelirseniz işlem tamamdır.

Tebrikler, başardınız!

Bu makalemizin de sonuna geldik ilerleyen zamanlarda WordPress için Google Pagespeed puan arttırma tekniklerine detaylıca inebiliriz. Yazımın size faydalı olduğunu düşünüyor ve diğer insanlarında bu konudan haberdar olmasını istiyorsanız lütfen aşağıda bulunan paylaş butonlarından paylaşarak destek olun ve sitemin sağ kısmında bulunan bildirim aboneliğini aktif edin.

Bir sonra ki makalemde görüşmek üzere, bol pixelli günler dilerim, saygılarımla.

Bu yazımda illegal işlem ya da hatalı konulardan bahsettiğimi düşünüyorsanız benimle iletişime geçebilirsiniz

Etiketler

Bu yazımı sosyal ağlarda paylaşmak istermisin ?

• Facebook
• Twitter
• Google+

Bu yazım hakkında ne düşünüyorsunuz ?

Yazı hakkındaki düşüncelerinizi paylaşmak ister misiniz?
Cevabı iptal etmek için tıklayın.

Blogumda gezinirken hoşunuza giden ve daha sonra tekrar okumak istediğiniz yazılarımı favorilere ekleyebilirsiniz. Bunun için üye olmanız ya da giriş yapmanız gerekmez.

Web, mobil ve diğer segmentler alanında tasarım, Wordpress hizmeti ve blogum hakkında benimle iletişime geçebilirsiniz.

• gkdesigned@gmail.com
• 0850 346 49 96