GTmetrix GTmetrix , web site optimizasyon için web sayfalarını analiz etme konusunda en popüler sitelerden biridir. İki farklı Puan Ölçeği'nin kullanılması, analiz edilen içerik ve bunun arkasındaki kurallarda çeşitlilik sağlar.
PageSpeed ve
YSlow kategorilerinde alacağınız puanlar , genelleştirilmiş ve içeriğiniz için geçerli olmayabilecek kurallara dayanır.
PageSpeed:** CSS sprites kullanarak görüntüleri birleştirin;
Web tarayıcısı ,sunucudan yüklemek istediği sayfadaki görüntüleri istediğinde, her bir ayrı görüntü dosyası için ek HTTP istekleri oluşturulur. Görüntüler CSS yazımıyla birleştirildiğinde, aynı dosyada gruplanır ve tarayıcı görüntüleri istediğinde web sunucusuna yalnızca bir HTTP isteği gönderilir. Daha sonra isteğe göre tüm grup yerine sadece gerekli olan görüntü gösterilir. Görüntüleri birleştirmek, son dosyayı orijinal dosyaların toplamından daha büyük hale getirebilse de, HTTP isteklerinin azaltılmış miktarından gelen hız artışı, dosyanın boyutu nedeniyle gecikmeden çok daha büyüktür.
Görüntüleri CSS sprite kullanarak birleştirmek aşağıdaki Avantajları sağlar:1.Web sunucusuna daha az HTTP isteği
2.Geliştirilmiş sayfa yükleme süreleri
3.Tek bir dosyayı önbelleğe alma
** Tarayıcı Önbelleğe Alma Özelliğinden Yararlanma:
Bu yöntem kullanıcı tarafından veya
".htaccess
" dosyasında
"Apache mod_expires
" modülünü etkinleştirerek işlendiği anlamına gelir.
Bir kullanıcı bir web sayfasına eriştiğinde, sayfanın düzgün bir şekilde görüntülenmesini sağlamak için o sayfadaki tüm dosyaları web tarayıcısı aracılığıyla indirmesi gerekir. Bu sayfada çok fazla öğe olduğunda veya bazı öğeler büyük olduğunda sorun yaratabilir
Tarayıcı önbelleğe alma özelliği, kullanıcının web tarayıcısının sayfa hakkındaki bazı bilgileri önceden tanımlanmış bir süre boyunca saklamasına olanak tanır. Kullanıcı aynı sayfayı yüklediğinde sonraki örnek, zaten tarayıcının önbelleğinde bulunan öğeleri yüklemesi gerekmeyecektir.
Elbette kullanıcının web sitenizdeki her şeyi önbelleğe almasını veya sonsuza kadar önbelleğe almasını sağlayamazsınız. Çok kısa veya hiç önbellekleme gerektirmeyen dinamik dosyalarda vardır. Web sitesi arka plan resimleri veya web sitesi logosu gibi statik içerik, web sitesinin kullanım ömründe birkaç kereden fazla değişmeyecek dosyalardır.
Bu dosyaları, kullanıcının tarayıcısında çok uzun bir süre (1 yıl) önbelleklenecek şekilde yapılandırabilirsiniz.
Tarayıcı önbelleği aşağıdaki Avantajları sağlar:1. Azaltılmış sayfa yükleme süreleri
2. Birçok kullanıcı içeriğinizi önbelleğe aldıysa daha az bant genişliği kullanılır
Dosya uzantılarının önbellekleme zamanını (| jpeg | png | gif | js | css | swf | ico | woff | mp3) erişildikten sonra 10 güne ayarlamak istiyorsanız .htaccess dosyanıza aşağıdaki kodlar eklemeniz gerekir
<ifmodule mod_expires.c>
<Filesmatch "\.(jpg|jpeg|png|gif|js|css|swf|ico|woff|mp3)$">
ExpiresActive on
ExpiresDefault "access plus 10 days"
</Filesmatch>
</ifmodule>Sadece bir dosya da değişiklik yapmak istiyorsanız, web sitenizdeki görüntülerin erişildikten sonra tam olarak 4 ay ve 2 gün boyunca önbelleklenmesini isterseniz .htaccess dosyanıza alttaki kodları eklemeniz gerekmektedir.
<ifmodule mod_expires.c>
ExpiresByType image/png "access plus 4 months 2 days"
</ifmodule>Expires üstbilgisini ayarlarken bu parametreleri kullanabilirsiniz:y - yıl
mo - aylar
w - hafta
d - gün
s - saat
mil - dakika
s - saniye
** Açılış Sayfası Yönlendirmeleri
Bu yöntem "
.htaccess "dosyasında "
mod_rewrite "etkinleştirilerek web yöneticisi tarafından işlendiği anlamına gelir.
Yönlendirmeli bağlantılarda kullanıcının bir arama motoru tarafından sağlanan bağlantıyı tıkladıktan sonra eriştiği herhangi bir sayfa yönlendirmesi olan bir sayfaya erişmeye çalışırsa, sayfanın erişim yanıtı geciktirecektir.
Açılış sayfası yönlendirmeleri, web tarayıcısından web sunucusuna ek Gidiş-dönüş süreleri (RTT) yaptıkları için sayfanın yüklenmesi belli bir zaman alır. Yönlendirmeler yalnızca teknik açıdan kalan tek seçenek olduğunda kullanılmalıdır. Bir sayfaya ulaşmak için birden fazla yönlendirmeden de kaçınmalısınız. Meta etikette
http-equiv = özniteliğini kullanmak gibi istemci tarafı yönlendirmeleri vermemeniz tercih edilir. Kesinlikle yönlendirmeniz gerekiyorsa, HTTP'yi Apache modülü
mod_rewrite (sunucu tarafı) üzerinden
JS veya
Meta etiket yönlendirmelerinden (istemci tarafı) kullanmak daha uygundur.
Yeniden yönlendirmek istediğiniz bir sayfanız varsa, yeni alan adınızda “
tr-full.html” diyelim. Bunu,
.htaccess dosyasına eklenen aşağıdaki kod bloğu ile yapabilirsiniz:
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule ^ tr-full.html$ http://domain.com/tr-full.html
</IfModule>Mesela bir sayfayı yeniden adlandırdınız (Deneme1'den Deneme2'ye) ve sayfanın eski URL'sini korurken sayfanın doğrudan düzeltilmesini istiyorsanız, bunu aşağıdakileri ekleyerek yapabilirsiniz:
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteRule "^/Deneme1\.html$" "/Deneme2.html" [PT]
</IfModule>** Gzip Sıkıştırmasını Etkinleştir:
Gzip sıkıştırması web dosyalarının boyutunu sıkıştırarak küçültür. Daha sonra dosyaları istek üzerine gönderir (kullanıcı bir sayfa açar) ve istekte bulunanın web tarayıcısı sıkıştırılmış dosyaları alır, Web Tarayıcı bunları otomatik olarak açar ve istekte bulunan kişiye sayfanın içeriğini sağlar. Bu, kullanıcının web sitenizde sağladığınız içeriğin aynısını almak için daha az indirmesi gerektiğinden çok zaman kazandırır.
Sunucunuzda
gzip sıkıştırmasını etkinleştirmek istiyorsanız, bunu aşağıdaki satırları ekleyerek
.htaccess dosyası üzerinden yapabilirsiniz:
IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/opentype
</IfModule> ** Keep-Alive Etkinleştirmek:
İletim Kontrol Protokolü (
TCP), World Wide Web, e-posta, dosya aktarımı ve uzaktan yönetici gibi büyük internet uygulamaları için temel bir protokoldür. Köprü Metni Aktarım Protokolü (
HTTP), bir uygulama protokolüdür ve World Wide Web için veri iletişiminin temelidir.
Bir TCP bağlantısı açıldığında, yalnızca bir HTTP isteği / yanıt çifti gönderilir. Keep-Alive, tek bir TCP bağlantısı üzerinden birden çok HTTP isteği / yanıtı gönderme fikri ile oluşturulur, böylece web tarayıcısının web sunucusundan dosya yüklemesi için gereken süreyi önemli ölçüde azaltır.
Keep-Alive, resim gibi statik içerikle uğraşırken istekte bulunanın her resim için yenilerini açmak yerine tek bir TCP bağlantısı kullanarak sayfadaki tüm resimleri almasına izin verdiği için sonuna kadar kullanılır. Düz metin sayfalarında Keep-Alive, istenen miktarda içerik olmadığı için önemli bir gelişme sağlamaz; örneğin, metin gövdeli bir HTML sayfası, Keep-Alive devre dışı olsa bile birden fazla TCP bağlantısı gerektirmez. Ancak medya içeriği erişim sayfalarında sayfa yükleme hızında önemli bir iyileşme sağlayacaktır.
Keep-Alive'i kendi sunucunuzda etkinleştirmek istiyorsanız , mod üstbilgileri barındırma sağlayıcınız tarafından destekleniyorsa bunu
.htaccess dosyası üzerinden yapabilirsiniz .
<IfModule mod_headers.c>
Header set Connection keep-alive
</IfModule>** Minify JavaScript (
JavaScript'i küçültün)
JavaScript dinamik, üst düzey bir programlama dilidir. World Wide Web için içerik üretmek için kullanılan üç temel teknolojiden biridir. Bir JavaScript dosyası (
.js) esas olarak talimatları yürütmek için JavaScript kodunu çalıştırmak için kullanılır.
Bir komut dosyasının küçültülmesi, boyutu azaltmak için gereksiz tüm karakterlerin koddan kaldırılması ve böylece sayfadaki öğelerin yükleme sürelerini önemli ölçüde iyileştirmesidir. Küçültme, boyutu olabildiğince azaltmak için tüm boşlukları, yeni satırları ve geliştirici yorumlarını kaldırır.
* Harici JavaScript öğelerini küçültemeyeceğinizi unutmayın.
.Htaccess dosyasına erişip aşağıdaki satırı ekleyerek Mod sayfa hızını etkinleştirebilirsiniz:
ModPagespeed OnBu
Araçla web siteniz için JavaScript'i küçültebilirsiniz
** Minify CSS (
CSS'yi küçültün) :
Basamaklı Stil Sayfaları (CSS), belgenin görünümünü ve biçimlendirmesini tanımlamak için kullanılan bir stil sayfası dilidir. Temel amacı, belgenin düzen, yazı tipleri ve renkler gibi içerik öğelerini ayırmaktır.
Küçültme, boyutu azaltmak için gereksiz tüm karakterlerin koddan kaldırılması ve böylece sayfadaki öğelerin yükleme sürelerini önemli ölçüde iyileştirmesidir. Küçültme, boyutu olabildiğince azaltmak için tüm boşlukları, yeni satırları ve geliştirici yorumlarını kaldırır.
Mod Sayfa Hızı'nı
.htaccess dosyaya erişip dosyaya aşağıdaki satırı ekleyerek etkinleştirebilirsiniz :
<IfModule pagespeed_module>
ModPagespeed On
ModPagespeedEnableFilters rewrite_css
</IfModule>Bu
Araçla web siteniz için CSS'yi küçültebilirsiniz .
** Optimize Images (
Görüntüleri Optimize Edin):
Görüntüler neredeyse tüm modern web sitelerinin ayrılmaz bir parçası olduğundan, sitenin yükleme hızına oldukça fazla yük bindirebilirler. Görüntülerle ilgili doğru dosya formatı, boyutu ve sıkıştırması çok önemlidir.
Görüntüleri gerekli boyutlara göre yeniden boyutlandırmak, yalnızca yeniden boyutlandırmak için bir CSS kullanmaktan daha iyidir. 1920x1080 piksel boyutundaki bir resmi yalnızca 290x200 piksel boyutuna göre yeniden boyutlandırabilirsiniz, ancak web tarayıcısının CSS boyutlandırmasını uygulamadan önce tam boyutunu indirmesi gerekir.
Web sitenizin resimlerini optimize etmenize yardımcı olabilecek farklı araçlar vardır. Bunu yapmanın bir yolu onları
Optimizilla üzerinden küçültmektir.
Bu, yandaki kaydırıcıdan özelleştirilebilen gerekli kalite seviyesini korurken, JPEG ve PNG görüntülerini mümkün olan en küçük boyuta küçülten ücretsiz dönüştürülmüştür.
** CSS @import (
CSS içe aktarma)
Basamaklı Stil Sayfaları (CSS), belgenin görünümünü ve biçimlendirmesini tanımlamak için kullanılan bir stil sayfası dilidir. Temel amacı, belgenin düzen, yazı tipleri ve renkler gibi içerik öğelerini ayırmaktır.
CSS @import, CSS'nin diğer CSS'yi içe aktarmasına izin verir. @import şöyle görünür:
<style>
@import url(B.css) ;
</style>@İmport kullanıldığında, web tarayıcısı ilk CSS'yi ilk indirmeden, ayrıştırmadan ve yürütmeden önce içe aktarılan CSS'yi indirmeye başlamaz. Web tarayıcısı import.css dosyasını öğrendikten sonra indirmeye başlayacaktır, ancak web tarayıcısının her iki stil sayfasını paralel indirememesinden kaynaklanan gecikme, sayfanın yükleme hızını düşürmektedir.
Harici CSS kullanırken @import'tan kaçınmak sayfanın yükleme hızını artırmak için iyi bir yoldur. Web tarayıcısı stil sayfalarını paralel olarak indiremediğinden, @import kullanmadan CSS'nize başvurmak için başka bir yola ihtiyacınız olacaktır.
@İmported kullanmaktan kaçınmak için her CSS için LINK etiketini aşağıda gösterildiği gibi kullanabilirsiniz:
<link rel='stylesheet' type='text/css' href='A.css'>
<link rel='stylesheet' type='text/css' href='B.css'>** Specifying Image Dimensions (
Görüntü Boyutlarını Belirleme) :
Web sayfasında kullanılan öğelerin çoğu belirli özelliklere sahiptir. Görüntü boyutları özniteliklerdir ve istekte bulunan web tarayıcısı için HTML veya CSS'de belirtilmesi çok önemlidir.
Web tarayıcısı web sayfasını oluştururken yapacağı ilk şey metnin nerede olduğunu ve görüntülerin nerede bulunduğunu kontrol etmektir. Tarayıcının sayfayı göstermesi için derlemeyi metin uzunluğu, yazı tipi boyutu ve elbette görüntü boyutları gibi bilgilere dayandırması gerekir. Görüntü boyutları belirtilmezse, web tarayıcısı ilk önce aldığı metne göre tüm sayfayı oluşturur ve ardından görüntüleri oluşturarak ve etrafındaki metni yeniden konumlandırarak sayfayı yeniden oluşturur. Bu, özellikle belirtilen boyutları olmayan birden fazla görüntü olduğunda sayfanın yükleme hızını önemli ölçüde artırır. Görüntü boyutları belirtildiğinde tarayıcı, görüntülerin nerede olacağını bilerek sayfayı oluşturmaya başlar ve metni buna göre oluşturur.
Web sitenizin sayfa yüklenmesini hızlandırmak için görüntü boyutlarını belirtmeniz önemli olduğundan, görüntüleri <img> etiket satırlarınıza ekleyerek belirtebilirsiniz.
Belirtilen boyutları olmayan bir görüntü HTML'de şöyle görünür:
<img src = "resim.jpg" />Resmin genişliği ve yüksekliği 400x250 belirlendiğinde aşağıdaki kod gibi olacak
<img src = "resim.jpg" width = "400" height = "250" />Inline CSS'deki görüntü boyutlarını belirtmek için aşağıdaki satırı eklemeniz gerekir:
<img src=" resim.jpg" style="width: 400px; height: 250px">Harici bir CSS'de görüntü boyutlarını belirtmek istiyorsanız, ihtiyacınız olan kod:
#resim.jpg{ width: 400px; height: 250px; }**
YSlow** Use CDN (
İçerik Dağıtım Ağı Kullanma):
İçerik dağıtım ağı (CDN), dünya çapında birden fazla veri merkezinde bulunan büyük bir proxy sunucu sistemidir.
CDN içeriği sunucudan alır, içeriğin bulunabileceği kullanıcıya en yakın konumu bulur ve oraya taşır. Bu şekilde, bir kullanıcı web sitesine eriştiğinde sunucuya erişmez, bunun yerine kendisine daha yakın olan ve azaltılmış gecikme ve artan yükleme hızı ile daha iyi bir bağlantı sağlayan proxy sağlar. CDN'ler ayrıca, trafiği daha sonra filtreleyip kaldırabilen CDN altyapısı aracılığıyla azaltabileceği ve dağıtabileceği için DDOS saldırılarına karşı yardımcı olan aşırı miktarda trafik emebilir.
İçerik dağıtım ağları (
CDN'ler) aşağıdaki Avantajları sağlar:
1. Bant genişliği maliyetini azaltma
2. Sayfa yükleme sürelerini iyileştirme
3. İçeriğin kullanılabilirliğinin artırılması
4. Önbelleği optimize etme (derin önbellekleme)
5. Spam ve DDoS'ye karşı daha iyi koruma
6. Sunucu yük dengeleme
Bu
cloudflare sitesine üye olarak ister ücretsiz isterswniz ücretli olarak kullanabilirsiniz.
** Cookie Free Domains (
Çerez İçermeyen Alanlar):
HTTP çerezleri, kullanıcı bir web sitesine göz atarken web sunucusundan kullanıcının tarayıcısına gönderilen küçük bilgilerdir. Daha sonra kullanıcının oturum açma kimlik doğrulaması veya önceki kullanıcı oturumunda alışveriş sepetine eklenen öğeler gibi önceki etkinliği hakkında bilgilendirmek için sunucuya geri gönderilir.
Kullanıcı web tarayıcısından web tarayıcısından statik görüntüler istediğinde çerezler de gönderilir, ancak sunucunun bunları kullanması gerekmez. Bu nedenle, bu durumlarda çerezlerin hiçbir faydası olmadığı, ancak HTTP isteklerinin tamamlanması daha uzun sürebildiği için performans isabeti olarak kabul edilir. Çözüm, yalnızca web siteniz için statik içeriği barındıracak bir alt etki alanı kullanmaktır. Bu şekilde, alt alan adı, çerezleriniz ana web sitesinde ayarlandığından çerez içermez. YouTube ve Amazon gibi tüm büyük içerik sağlayıcıları, trafiklerini ve yükleme sürelerini optimize etmek için çerez içermeyen alan adları kullanır.
Linkback:
GTmetrix
