1- Parçalanmış Paketler ile Hızlanın
Web siteniz açılış anından önce bütün dosyaları hazırlayarak gönderir ve site açılmaya başlar. Php flush kodu sayesinde ilk önce header.php dosyası tarayıcıya gönderilir bu sayede css ve script dosyaları hazırlanır ve tarayıcıya gelir gelmez gösterilir bu sayede açılış hızı artar ve süre kısalır.
[cc lang=”php”]
[/cc]
tagından hemen sonra yerleştirin
[cc lang=”php”]
[/cc]
2- Css Sprite ile HTTP İsteklerini Azaltın
Css sprite tekniği sizin tüm sayfalarda yani tasarımda kullandığınız resimleri birleştirerek tek sorgu haline getirip site hızını artırmaya yarayan bir tekniktir.
Css Sprite’dan önce
[cc lang=”css”]
.social ul li.rss a {background:url(images/rs.png) left top no-repeat;}
.social ul li.tw a {background:url(images/tw.png) left top no-repeat;}
.social ul li.fb a {background:url(images/fb.png) left top no-repeat;}
.social ul li.rss_email a {background:url(images/em.png) left top no-repeat;}
.social ul li.friend a {background:url(images/ff.png) left top no-repeat;}
.social ul li.gpluss a {background:url(images/gplus.png) left top no-repeat;}
[/cc]
6 ayrı buton için 6 ayrı HTTP isteği ile 6 ayrı resim çağırılıyor.
Css Sprite’dan sonra
[cc lang=”css”]
.rss a {background-position: -0px -0px;}
.tw a {background-position: -0px -42px;}
.fb a {background-position: -0px -84px;}
.rss_email a {background-position: -0px -126px;}
.friend a {background-position: -0px -168px;}
.gpluss a {background-position: -0px -210px;}
[/cc]
Yukarıdaki örnekte altı farklı resim için tek bir http isteği yapılmış ve css kodlarıda daha az yazılmış.
CSS sprite tekniğini uygulamak için bir sürü araç kullanabilirsiniz. Bu araçlara google de aramak yaparak ulaşabilirsiniz. CSS Sprite Yöntemi ile hazırlanmış bir menü örneğini görmek için CSS Sprite Menü makalesini okuyabilirsiniz.
3- Css’leri Verimli Kullanın
Verimli kodlarla oluşturulmuş bir css dosyasının boyutu daha ufak olacağından sunucunuzun dosyayı gönderme hızı ve tarayıcıların biçim dosyasını yorumlama süresi kısalacaktır.
Hatalı Kullanım
[cc lang=”css”]
.era {
float: left;
color:
margin: 20px 10px 20px 10px;
padding-top:3px;
padding-bottom:2px;
padding-left:5px;
padding-right:5px;
}
[/cc]
Verimli Kullanım
[cc lang=”css”]
.era {float:left; margin: 20px 10px; padding: 3px 5px 2px}
[/cc]
Web tasarımda optimizasyonun en iyi şekli en az kodla daha çok iş yaparak olur. Yukarıdaki örnekte değer atanmamış “color:” girdisi bu nedenle kaldırılmıştır. “era” isimli elementin margin ve padding kodlari mantıklu kullanım ile azaltılmış ve boş alanlar kaldırılmıştır. Verimli kullanım (58 byte) kod üsttekine(149 byte) olarak ölçülmüş.
4- 404 hata sayfalarını silin
Web sitenizde zamanla yapılan eklentiler, eklenen içerikler ve silinen içerikler kalıntılar bırakabilir. Bunlar direk olarak google veritabanından silinmez ve 404 olarak kalır. Bu sayfaları tespit etmek için www.webpagetest.org sitesinden raporları açın. Kırmızı olarak belirtilmiş dosyaları kaldırın.
5- Mobil Cihazlar için tema kullanın
Cep telefonu ve benzeri mobil cihazlar düşük hızda internete bağlanırlar. Bunlar için farklı bir tema hazırlanmalı ve direk içeriğe yönlendirilmeliler. Bilgisayar için hazırlanmış bir tema telefonda çok geç açılabilir.
Daha fazla bilgi için WordPress Hızlandırma Rehberini mutlaka okuyun…