Web Sitenizi Hızlandırmak için Tavsiyeler
Web sitenizin açılış hızını arttırmak kullanıcıları sitenizde tutmak için yapmanız gereken önemli adımlardan biridir. Google’ın da son yıllarda bu konuya verdiği önem ve katkıyı hesaba katarsak, bu konunun önemini daha çok vurgulamış oluruz.
Sitenizin şu anki hızını tespit etmek için Google’ın PageSpeed veya Yahoo’nun YSlow aracını kullanabilirsiniz. Ayrıca her ikisinin analizini bir arada sunan GTMetrix de çok faydalı bir araçtır. Tavsiyem, aşağıdaki işlemlerin ne kadar faydalı olduğunu tespit etmek için, işlemleri yapmadan önce sitenizi bu araçlarda analiz edin ve puanınızı kaydedin.
Lafı çok da uzatmadan yapmanız gereken işlemlere hızlıca göz atalım:
GZIP ile Sıkıştırma
Gzip, dosya sıkıştırma yazılımlarından biridir. Apache’de gzip modülünü aktif hale getirerek, html dosyasını sıkıştırıp tarayıcıya gönderebilirsiniz. Tarayıcı’da sıkıştırılmış dosyayı açarak sayfanını HTML kodlarının görüntülenmesini sağlar. Gzip’i aktif hale getirmek için .htaccess dosyasına aşağıdaki satırları eklemeniz yeterli.
<IfModule mod_deflate.c>
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
AddOutputFilterByType DEFLATE application/atom+xml \
application/javascript \
application/json \
application/rss+xml \
application/vnd.ms-fontobject \
application/x-font-ttf \
application/xhtml+xml \
application/xml \
font/opentype \
image/svg+xml \
image/x-icon \
text/css \
text/html \
text/plain \
text/x-component \
text/xml
</IfModule>
Tarayıcı Önbelleği
Tarayıcı önbelleğini aktif hale getirerek, aynı kullanıcı web sitenize bir daha girdiğinde tüm dosyaların baştan yüklenmesini engellemiş olursunuz. Bu işlem için .htaccess dosyasına aşağıdaki kodu eklemelisiniz:
<IfModule mod_expires.c> ExpiresActive on ExpiresDefault "access plus 1 month" ExpiresByType text/cache-manifest "access plus 0 seconds" ExpiresByType text/html "access plus 0 seconds" ExpiresByType text/xml "access plus 0 seconds" ExpiresByType application/xml "access plus 0 seconds" ExpiresByType application/json "access plus 0 seconds" ExpiresByType application/rss+xml "access plus 1 hour" ExpiresByType application/atom+xml "access plus 1 hour" ExpiresByType image/x-icon "access plus 1 week" ExpiresByType image/gif "access plus 1 month" ExpiresByType image/png "access plus 1 month" ExpiresByType image/jpeg "access plus 1 month" ExpiresByType video/ogg "access plus 1 month" ExpiresByType audio/ogg "access plus 1 month" ExpiresByType video/mp4 "access plus 1 month" ExpiresByType video/webm "access plus 1 month" ExpiresByType text/x-component "access plus 1 month" ExpiresByType application/x-font-ttf "access plus 1 month" ExpiresByType font/opentype "access plus 1 month" ExpiresByType application/x-font-woff "access plus 1 month" ExpiresByType image/svg+xml "access plus 1 month" ExpiresByType application/vnd.ms-fontobject "access plus 1 month" ExpiresByType text/css "access plus 1 week" ExpiresByType application/javascript "access plus 1 week" </IfModule>
Javascript Dosyaları
Javascript dosyalarını <body> tag’inin kapanışının hemen önüne ekleyin. Böylece javascript dosyalarının yüklenmesi, diğer dosyaların yüklenmesini engellemeyecektir. Kodlarınızın doğru çalışmasını engellemeyecek şekilde “defer” ya da “async” de kullanabilirsiniz.
Ayrıca JS dosyalarını mümkün olan minimum sayıda tutarak, sunucuya fazladan istek gönderilmesinin önüne geçin. Birçok javascript dosyasını tek bir dosya haline getirmek etkili bir yöntemdir.
Son yapılması gereken ise javascript dosyalarını küçültmektir. Bunun için Js Compress gibi araçları kullanabilirsiniz.
CSS Dosyaları
Stil dosyalarının boyutunu küçültün. Bunun için CSS Compress aracını kullanabilirsiniz.
CSS dosyalarını her zaman <head> etiketi içerisinde kullanın. Ayrıca sayfa içerisindeki stillerden (inline styles) her zaman kaçının. Örneğin; <div style="color:#FFF"></div> olarak kullanmayın.
Dosyaları “@import” ile değil, “link” etiketi ile ekleyin.
Görseller
Sitenizdeki tüm resimleri görsel araçlarını kullanarak optimize edin ve küçültün. Bunları kullanmak dosyaların boyutundan ciddi anlamda kazanç sağlamanıza yarayacaktır. Bazı online görsel araçları şunlardır:
- JPEGmini (Online jpeg küçültme)
- TinyPNG (PNG sıkıştırma)
- ImageOptim (Görsel optimizasyonu için Mac OS uygulaması)
Tüm görselleri “sprite” yöntemi ile birleştirerek, tek bir görsel haline getirin. Böylece resimlerin yüklenmesi sırasında oluşan gecikmeyi azaltabilirsiniz. Sprite Machine bunun için kullanabileceğiniz güzel araçlardan biridir.
Görselleri sayfanın içerisinde kullanılacak boyuta göre tarayıcıya gönderin. CSS ile küçültme yapmayın, orjinal boyutunda görüntüleyin. Böylece gereksiz yere büyük boyutta görseller kullanmaktan kurtulursunuz.
Diğer İşlemler
Karakter setini sunucu seviyesinde belirleyin. Böylece tarayıcının yaptığı iş azalacaktır. “meta” tag olarak karakter seti göndermeyin. Bunu yapmak için şu satırı .htaccess dosyanıza ekleyin:
AddDefaultCharset utf-8
Yine .htaccess dosyası ile ETag’i kaldırın.
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|svg|js|css|swf)(\.gz)?$"> Header unset ETag FileETag None </FilesMatch>
HTTP bağlantınız hep açık tutun. Böylece bir TCP bağlantı ile birden çok HTTP isteği gönderip alabilirsiniz. Bunun için .htaccess’e aşağıdaki satırı ekleyin.
<ifModule mod_headers.c> Header set Connection keep-alive </ifModule>
Sayfalarınızda kırık link veya 404/410 hatası veren kaynakların bulunması ciddi bir yavaşlamaya sebep olabilir. Bunları tespit edip, hepsini kaldırın.
Mümkünse tüm statik kaynaklardan tüm sorgu cümlelerini kaldırın. Örneğin; javascript dosyalarınızdaki versiyon parametresini “script.js?v=1.0″ kullanmayın. Onun yerine otomatik versiyonlama yöntemini kullanabilirsiniz.
Sayfalarınıza ajax ile veri çekiyorsanız, “POST” değil “GET” methodunu kullanın.
Sayfalarınızda yönlendirme yapmayın. Daha önce de söylediğim gibi fazladan her bir istek, sitenizi yavaşlatacaktır.
Sonuç
Tüm bu işlemleri yaptıktan sonra sitenizi PageSpeed veya YSlow aracı ile analiz edin. Verilen puanda ciddi bir yükselme olduğunu göreceksiniz. Bu da tüm işlemlerin başarılı olduğunu gösterecektir. Ayrıca bu araçların verdiği diğer tavsiyeleri de uygulamaya çalışın. Böylece hız konusunda kusursuz bir web sitesine sahip olacaksınız.
Çok faydalı bir yazı olmuş.
http://www.elemanonline.com/aktif-pazarlama-elemanlari_i1605372.html
Teşekkürler hocam. Amacımız insanları bilgilendirmek