Merhaba arkadaşlar. Bu konumda sizlere popüler site analiz araçlarından biri olan GTmetrix'te hangi puanın ne işe yaradığını, nasıl yükseltileceğini (bilgim dahilinde) anlatmaya çalışacağım.
Öncelikle örnek olması amacıyla kendi sitemin raporunu vereyim: bit.ly/1DuNp7W
Başlıyoruz...
(Tekrar hatırlatıyorum, aşağıdaki bilgiler tamamen bilgim dahilindedir. Hatalar olabilir.)
Page Speed
#01 - Minimize redirects
Sitenizdeki yönlendirmeleri mümkün olduğunca azaltmalısınız. Yönlendirmelere en basit olarak WordPress'in varsayılan Gravatar resimleri örnek verilebilir.
#02 - Avoid CSS @import
CSS dosyalarınızı import ederek çekmemelisiniz. Bunun yerine stylesheet kodu olarak eklemeniz daha uygundur.
#03 - Leverage browser caching
Tarayıcı önbelleklemesi yapmanız gerekmektedir. Bu konuda yardım almak için internette Türkçe sayfalarda tarayıcı önbellekleme nasıl yapılır, İngilizce kaynaklardaysa how to browser caching diye aratarak çeşitli kaynaklara ulaşabilirsiniz.
#04 - Remove query strings from static resources
Statik içeriklerin URLlerinin sonundaki ? işaretleri ve devamındakileri kaldırmalısınız. WordPress için aşağıdaki kodu temanızın functions.php dosyasına, php kapanış etiketinden hemen öncesine eklemeniz yeterlidir.
function _remove_script_version( $src ){
$parts = explode( '?', $src );
return $parts[0];
}
add_filter( 'script_loader_src', '_remove_script_version', 15, 1 );
add_filter( 'style_loader_src', '_remove_script_version', 15, 1 );
#05 - Serve scaled images
Resimlerinizi olduğu boyutlarda göstermeniz demektir. Örnek vermek gerekirse 600x300 piksel boyutundaki bir resmi, 300x150 piksel olarak göstermeniz bu kurala aykırıdır. Sitenizin daha hızlı yüklenmesi için tüm resimlerinizi mümkün olduğunca yeniden boyutlandırmadan (yani orijinal width ve height değerleriyle oynamadan) getirmeniz gerekmektedir.
#06 - Enable gzip compression
Sitenizde GZIP sıkıştırma özelliğini kullanmalısınız. Bu da sitenizin daha hızlı yüklenmesine katkı sağlayan özelliklerden biridir.
WordPress vb. sistemlerde aşağıdaki kodu .htaccess dosyanıza ekleyerek GZIP'i aktifleştirebilirsiniz.
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file .(html?|txt|css|js|php|pl)$
mod_gzip_item_include handler ^cgi-script$
mod_gzip_item_include mime ^text/.*
mod_gzip_item_include mime ^application/x-javascript.*
mod_gzip_item_exclude mime ^image/.*
mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
#07 - Minify CSS
Sitenizdeki CSS dosyalarını sıkıştırmalısınız. Eğer sitenizi GTmetrix'te test ederseniz optimize edilmiş hallerini size verecektir.
#08 - Minify JavaScript
Minify CSS ile aynı. Bu sefer JavaScript dosyalarınızı sıkıştırmalısınız. Yine aynı şekilde, sitenizi GTmetrix'te test ettiğinizde size optimize edilmiş hallerini verecektir.
#09 - Optimize images
Sitenizdeki resimleri kb cinsinden sıkıştırmalısınız. WordPress siteler çeşitli eklentiler kullanabilirken, eklenti kullanma imkânı/özelliği olmayan siteler çeşitli resim sıkıştırma hizmetlerinden veya yazılımlarından faydalanabilirler. Hiçbir şey yapamazsanız da GTmetrix'ten yine çekebilirsiniz.
#10 - Enable Keep-Alive
Sitenizde Keep-Alive özelliğini aktifleştirmelisiniz. Bu özellik sitenize çeşitli sebeplerle erişim sorunu olduğunda, önbelleklenmiş halinin ziyaretçilere gösterilerek sanki hiçbir sorun yokmuş gibi hizmete devam etmesini sağlar. CloudFlare kullanarak çok basit bir şekilde hem Keep-Alive hem de önbellekleme özelliğinden faydalanabilirsiniz.
#11 - Optimize the order of styles and scripts
Harici stylesheet'lerin ve hem harici hem dahili scriptleri düzgün bir şekilde sıraya sokarsanız bunların yüklenmeleri daha hızlı yapılır böylece sitenizin hızına olumlu bir yönde etki etmiş olursunuz.
#12 - Specify image dimensions
Sitenizdeki tüm resimler, width ve height değerlerine sahip olmalıdır.
#13 - Combine images using CSS sprites
Sitenizde kullandığınız küçük resimleri (örneğin menü ikonları gibi) CSS sprite haline getirerek kullanmanız, bu resimlerin tek bir seferde yüklenmesini sağlar.
#14 - Avoid bad requests
Sitenizde kırık linkler ya da 404/403 sayfalara götüren bağlantılar bulunmamalıdır.
YSLOW
#01 - Use a Content Delivery Network (CDN)
Bir CDN hizmetinden faydalanmanız gerekmektedir. Böylece sitenizi yurt dışından ziyaret edenler kendilerine en yakın olan sunucudan sitenize ulaşarak çok daha hızlı bir şekilde erişim sağlayacaklardır. En basitinden CloudFlare'i kullanarak ücretsiz olarak CDN hizmeti alabilirsiniz.
#02 - Avoid URL redirects
PageSpeed kısmındaki #01 - Minimize redirects'e benzer. URL yönlendirmelerinden kaçınmalısınız.
#03 - Reduce DNS lookups
Çok fazla farklı adresten dosya çekmemeye çalışın. Böylece sitenizin istek miktarı azalır.
#04 - Compress components with gzip
GZIP kullanın. Yukarıda bahsettim.
#05 - Minify JavaScript and CSS
CSS ve JavaScript dosyalarınızı sıkıştırın. Yine yukarıda bahsettim.
#06 - Make AJAX cacheable
AJAX isteklerinizi önbelleklenebilir hale getirin. (Önbelleklenebilir olmayan AJAX istekleri nasıl önbelleklenebilir hale getiriliyor bilgim yok maalesef.)
#07 - Put CSS at the top
CSS dosyalarınızı sitenizin header kısmına yerleştirin.
#08 - Put JavaScript at bottom
Script dosyalarınızı sitenizin alt kısmına eklemeniz kaynakların bloklanmasını engeller.
#09 - Avoid HTTP 404 (Not Found) error
Sitenizdeki 404 sorunlarını minimuma indirin.
#10 - Do not scale images in HTML
PageSpeed kısmındaki #05 - Serve scaled images'e benzer şekilde, resimlerinizi HTML width ve height kodlarıyla yeniden boyutlandırmayın. Bunun yerine istediğiniz boyuta piksel olarak çekerek eklerseniz fazladan trafik harcanmamış olur.
#11 - Make favicon small and cacheable
Favicon resminizi küçük ve önbelleklenebilir hale getirin.
#12 - Configure entity tags (ETags)
Açık konuşmak gerekirse tam olarak ne işe yaradığını bilmiyorum ancak WordPress vb. siteler için .htaccess'a aşağıdaki kodu ekleyerek bu puanınızı 100'e çıkarabilirsiniz.
Header unset ETag
FileETag None
Sonsöz: Bildiğim puanları sıraladım arkadaşlar. Geriye daha yazmadıklarım var öğrendikçe buraya ekleyeceğim. Sizler de biliyorsanız yorum olarak yazabilirsiniz.
