GTmetrix Hız Testi: Hız Testinin Eksiksiz Bir Dökümü

Web sitenizin performansını kontrol etmek için GTmetrix hız testine girmek ister misiniz?

Web'de, site performansınız hakkında size birçok fikir verebilecek birçok web sitesi hız testi hizmeti vardır.

Ancak, GTMetrix ve Pingdom yaygın olarak popüler araçlardır.

Bu yazıda, sağladığı veri ve bilgileri daha iyi anlayabilmemiz için bir WordPress sitesinin GTMetrix Testinden bahsedeceğim.

Hız testi araçlarının çoğu, site hızını artırmak için not, derecelendirme ve öneriler verir. Bu araçlar tarafından sağlanan uyarı ve tavsiyeler herkesi bunaltabilir.

Bu yüzden onları anlamak önemlidir, böylece onları kolayca çözebilir ve sitenin test notunun yanı sıra hızını da artırabilirsiniz.

Ancak en önemli şeyin sitenin performansı olduğunu unutmayın.

Bu notlar yazılımdaki güncellemelerle değişebilir. Web sitesinin yükleme hızı tutarlı kalmalıdır.

• GTmetrix Hız Testi Nedir?
• GTmetrix Hız Testi Pro Sürümü
• GTmetrix Hız Testi Aracı
• Sayfa Hızı Önerileri
• YSlow Önerileri
• Şelale Tablosu
• Tarih

GTmetrix Hız Testi Nedir?

GTmetrix, yönetilen bir bulut şirketi olan Carbon60'ın bir ürünüdür. Aracı 2009'da müşterileri için yarattılar, ancak onu halk için piyasaya sürdüler.

O andan itibaren, araç çeşitli yükseltme ve güncellemelerden geçti ve bugün gördüğümüz, internetteki en iyi web sitesi performans test araçlarından biri.

Pek çok müşterimiz sitelerinin hızını kontrol etmek için bu aracı kullanıyor ve GTmetrix test raporuna gelen önerileri çözmek için bizimle iletişime geçiyorlar.

Bu yazıyı yazma sebeplerinden biri de bu.

Bununla birlikte, GTmetrix'in kullanımı kolay bir programdır ve üzerinde nasıl test yapılacağı hızlı bir şekilde anlaşılabilir.

Not için temel oluşturan puanlar ve öneriler oluşturmak için Google PageSpeed ​​Insights ve YSlow kombinasyonunu kullanır.

GTmetrix Hız Testi Pro Sürümü

GTmetrix'in iki sürümü var – Temel ve Ücretli

Temel ücretsizdir ve bir hız testi yapmak yeterlidir. Bu özelliğe erişmek için bir hesap oluşturmanız bile gerekmez.

GTmetrix ayrıca premium bir plan sunar. Ancak herkesin GTmetrix Pro'ya erişimi olmadığı için yalnızca ücretsiz plan hakkında konuşacağız.

Ama bakalım Premium sürüm neler sunuyor.

Öncelikli erişim:

Testi ücretsiz hesaplardan daha erken alırsınız.

Tek seferde çalışabilen sınırlı sayıda GTmetrix Speed ​​testi vardır. Yani bir test çalışana kadar diğeri beklemek zorunda.

Ancak pro sürümü ile sırayı atlayabilir ve sitenizin testini öncelikli olarak alabilirsiniz.

Uzak konumlardan izleme

Bu, testin yerini değiştirmek içindir. Sitenizde hız testi yapmak istediğiniz konumu seçebilirsiniz.

Gecikme site hızını etkilediğinden fiziksel konum önemlidir.

Siteniz Hindistan'da barındırılıyorsa ve Kanada'dan bir sınava giriyorsanız, hız Hindistan'da yapılan sınavla aynı olmaz.

Şu anda mevcut konumlar şunları içerir:

• Dallas, ABD
• Hong Kong, Çin
• Londra, Birleşik Krallık
• Mumbai, Hindistan
• Sidney, Avustralya
• Sao Paulo, Brezilya
• Vancouver, Kanada

Bir hesap oluşturarak bu özelliği elde edebilirsiniz.

Tarayıcınızı seçin

Hangi tarayıcıyı kullanmak istiyorsanız onu seçebilirsiniz. Chrome veya Firefox ile test edebilirsiniz.

Mobil sürüm için premium plana ihtiyacınız olacak.

Bağlantı hızını artırma veya azaltma seçeneği de vardır, böylece düşük bağlantıda sayfanın yüklenmesinin ne kadar sürdüğünü kontrol edebilirsiniz.

Tüm bu metrikler, sayfaları hızlı hız için optimize ederken kullanışlı hale gelir.

Video Yakalamaları

Gtmetrix, sayfanın oluşturulmasının bir videosunu oluşturacaktır.

Bu, sayfa yüklemenin her adımını görebileceğiniz gibi sorunların çözülmesine yardımcı olacaktır. Daha sonra çözmek için zaman alan öğeleri tam olarak belirleyebilirsiniz.

Diğer birkaç özellik

Adblock Plus özellikleri, sitenizdeki 3. taraf reklamları engeller. Ardından testi çalıştırır.

Bu özellik sayesinde, reklamların web sayfanız üzerindeki tam etkisini öğrenebilirsiniz.

Ardından, iki raporu karşılaştırabilirsiniz: Biri reklamlı ve reklamsız. Size net bir görüntü verecektir.

GTmetrix Hız Testi Aracı

Şu anda ekranınızda bakmakta olduğunuz web sayfası sadece resim ve yazılardan oluşmuyor.

HTML, JavaScript, CSS ve resimler gibi birçok varlıktan oluşur. Bu kaynakların her biri, sayfada oluşturulacak içeriği almak için sunucuya istek gönderir. Sahip olduğunuz daha fazla varlık, daha fazla istek olacaktır. Bu, sayfanın yüklenmesinin daha fazla zaman alacağı anlamına gelir.

Şimdi GTmetrix testinin her bir fonksiyonunu inceleyeceğim.

Ayrıca her şeyi, yükleme süresini nasıl etkilediğini ve azaltmak için neler yapabileceğinizi açıklamaya devam edeceğim.

Ancak A notu almak konusunda katı olmamalısınız. Bu dereceler geçicidir.

Burada amacımız siteyi hızlandırmak ve performansı arttırmaktır. İyi derece hızlı bir hızla takip edecek.

GTmetrix'in Temelleri

Siteyi GTmetrix testinden geçirdikten sonra, sayfada bir performans raporu görüntülenecektir.

Sitenizle ilgili temel bilgiler iki kutuya ayrılmıştır.

İlk kutu “Performans Puanları” dır.

O içerir:

• Sayfa Hızı Puanı
• YSlow Puanı

İkinci kutu Sayfa Ayrıntılarını verir.

• Tam Yükleme Süresi
• Toplam Sayfa Boyutu
• İstekler

Hepsine yazının devamında değineceğiz.

Şimdilik daha fazla test yapalım.

Görüldüğü gibi sonuçlar değişkendir.

Bu değişikliklerin sonuçlarının nedeni, devam eden önbelleğe almadır. DNS önbelleğe alma ve Sunucu önbelleğe alma, sayfa hızını ikinci kez artırır.

O yüzden notları takip etmemelisin dedim.

Sitenin yüklenme hızı hızlıysa her testten iyi puan alacaktır.

Sayfa Hızı Önerileri

GTmetrix, Google Page Speed ​​Insight Kurallarına uyar ve sitenize buna göre bir puan verir. Derecelendirme 0 ila 100 arasındadır (F ila A).

Sayfa hızı bölümünde 25'e yakın öneri var.

Çoğu web sitesi sahibinin karşılaştığı tüm popüler olanları açıklayacağım. Daha hızlı bir yükleme sayfası elde etmek için geliştirmeniz gereken nokta onlar.

Ölçekli Görüntüler Sun

Ölçeklenmiş bir görüntü, boyutu CSS ve HTML'de tanımlanan boyutla eşleşen görüntü anlamına gelir.

Bu, yüklediğiniz görüntünün boyutunun CSS veya HTML'nin izin verdiği boyuta eşit veya daha büyük olduğu anlamına gelir.

Örneğin:

Bir kullanıcı 500 x 500 piksel boyutunda bir resim yüklerse, ancak küçük resim yalnızca 50 x 50 Piksel resme izin verirse. Artık CSS'nin, ziyaretçilere göstermeden önce görüntüyü daha küçük boyuta ölçeklendirmesi gerekiyor.

Bu işlem zaman alıcıdır ve sayfanın yüklenme süresini artırır.

Bu nedenle, konu resimlere geldiğinde, CSS'nin onları ölçeklendirmesine izin vermek yerine, her zaman ölçekli resimleri yükleyin. Aksi takdirde, 'ölçeklendirilmiş resimler sunun' önerisini alırsınız.

WordPress kullanıyorsanız, görselinizi medya kitaplığına yüklediğinizde varsayılan olarak ölçeklenir.

Ancak 'Ayar>Medya' altında bulacağınız ayarınızı kontrol etmelisiniz.

Resmin sahip olabileceği maksimum genişliğin sitenizin genişliğinden daha az olduğundan emin olun.

Ölçeklenen görüntüleri otomatik olarak sunmak için herhangi bir Görüntü Optimizasyon Eklentisini de kullanabilirsiniz.

Satır İçi Küçük CSS

Büyük web siteleri için pek önerilmez. Küçük siteler için performansta daha fazla fark yaratacaktır.

Satır içi CSS, tarayıcının web sayfasını görüntülemeden önce indirmesi gereken dosyaları azaltır. Harici CSS dosyası için tarayıcı önce HTML'nizi, ardından CSS dosyanızı yükleyecektir.

CSS'yi satır içine yerleştirdikten sonra, tarayıcı yalnızca HTML dosyasını indirecektir.

Şimdi, bir dosyayı indirmek, birçok dosyayı indirmekten daha hızlıdır. Ancak dosyanın boyutu büyükse, önce HTML'yi ve ardından CSS'yi indirmek daha iyidir.

Dediğim gibi bu, isteklerin az olduğu küçük siteler için bir çözüm.

Eklentilerin yardımıyla CSS'nizi kolayca satır içi yapabilirsiniz.

Autoptimize Plugin bu işi yapabilir. Ayardan 'Satır İçi İşlevi' açın, eklenti oradan işleyecektir.

Satır İçi Küçük JavaScript

CSS'yi satır içi olarak yazarken, JavaScript'i de satır içi yaparsınız.

Yine, yalnızca çok fazla istek göndermeyen küçük siteler için önerilir.

JS'nizi HTML'ye yerleştirmek, artık ayrı bir JavaScript dosyası istemeyeceğiniz için web tarayıcısından sunucuya yapılan birkaç geziyi kurtaracaktır.

Ancak JS'yi bu HTML dosyasına ekleyecek, dolayısıyla dosyanın boyutunu artıracaktır.

JavaScript'i satır içi yapmak için, Autoptimize Plugin ayarından 'Inline JS'yi etkinleştirebilirsiniz.

Tarayıcı Önbelleğinden Yararlanın

Bu, GTmetrix tarafından yapılan en yaygın öneridir, çünkü birçok kişi bununla mücadele eder.

Tarayıcı Önbelleğe Alma, tarayıcının daha önce yüklediği kaynakları hatırlaması anlamına gelir. Bu nedenle, ziyaretçiler web sitesinin başka bir sayfasına geçtiğinde, tekrar yüklenmesi gerekmeyen birçok varlık vardır.

Web sayfasında site genelinde yaygın olan birçok öğe vardır ve tarayıcı bunları hatırlayabildiği için her seferinde web sunucusundan getirilmeleri gerekmez.

Tarayıcıdan yararlanın Önbelleğe alma, sitenin hızını artırmak için bunu kullanmak anlamına gelir.

Bunu uyguladıktan sonra sitenizin ikinci sayfası çok daha hızlı yüklenecektir.

Tarayıcı önbelleğe alma işlemini başlatmanın en yaygın ve basit yöntemi, .htacess dosyasına süresi dolan başlık kodunu eklemektir.

Kod:

 ## EXPIRES CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType text/html "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType text/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 1 month" </IfModule> ## EXPIRES CACHING ##

.htacess dosyasını kaydedin ve etkinleştirmek için web sayfasını yenileyin.

Ancak bu yalnızca sitenizin kaynakları için işe yarar. Üçüncü taraf başlıklarına karşı pek bir şey yapamazsınız.

Kaynakları Tutarlı Bir URL'den Sunun

Kaynakları Tutarlı Bir URL'den Sunmak, aynı dosyaları aynı kaynaktan getirmeniz gerektiği anlamına gelir.

Aynı dosyaları kontrol etmeli ve aynı URL'den geldiklerinden emin olmalısınız.

Yoksa yükleme süresi ve yineleme sorunlarını gündeme getirecekler. SEO'nuza iki taraftan zarar verir. Bu, sorgu dizeleri söz konusu olduğunda gerçekleşir.

Yinelemeyi önlemek için aynı kaynaktan aynı dosyaları yüklemeniz gerekir.

Bu sorunu çözmek için tüm sorunlu URL'leri bulmanız gerekir. Ardından, uygun gördüğünüz gibi bunları yeniden yönlendirebilir veya silebilirsiniz.

Bununla birlikte, CDN de sorunun çoğunu çözebilir.

JavaScript ayrıştırmasını ertele

Site yüklendiğinde, tarayıcı içeriği HTTP yanıtında sunucudan alır. Ardından, kodu yukarıdan aşağıya doğru yürütür ve yükler.

JavaScript gelene kadar her şey yolunda gider. Yükleme işlemi, tüm JS yüklenene kadar daha ileri gitmeyecekti. Hangi yükleme süresini artırır.

JS'yi ayrıştırarak, tarayıcıya JS'nin yüklenmesini beklemeden sayfayı yükleme izni vermiş olursunuz. Bu basit işlev, JS'nin yükleme süresi üzerindeki olumsuz etkisini ortadan kaldırır.

JavaScript, web'in hayati bir parçasıdır ve onu kullanmayı bırakamazsınız.

JavaScript'in ayrıştırılmasını eklentilerle yapabilirsiniz, bu en kolay yöntemdir.

• Ücretsiz Async JavaScript Eklentisi
• WpRocket Eklentisi
• Hız Yükseltici Paketi

Bu Eklentilerin ayarından etkinleştirebilirsiniz.

CSS ve JavaScript'i küçültün

Hiç HTML, CSS veya JavaScript dosyası gördünüz mü?

Kodlamanın ilk kuralı onu okunabilir kılmaktır.

Bu yüzden çok fazla satır sonu ve boşluk var. Tüm bunlar kodun okunmasını ve anlaşılmasını kolaylaştırır, ancak aynı zamanda dosyanın boyutunu da artırır.

Kodu küçültmek, işlevselliğini koruyarak tüm gereksiz karakterleri ve koddaki boşlukları kaldırmak anlamına gelir.

Bu küçük görev, verileri boşaltır ve yükleme sürecini hızlandırır.

Bu görevi yapabilen birçok eklenti var.

• Hızlı Hız Küçült
• Daha İyi WordPress Küçült
• otomatik optimize et

Herhangi bir eklenti yükleyin ve etkinleştirin.

CSS ve Java'nın optimizasyonunu etkinleştirme seçeneğini bulun ve açın.

Eklenti yardımı olmadan yapmak istiyorsanız, bir web geliştiricisine ihtiyacınız olacak. Bir geliştiricinin komut dosyalarını en aza indirmek için kullanabileceği birçok çevrimiçi araç vardır.

Görüntüyü Optimize Et

Görüntüleri web için optimize etmiyorsanız, ne yaparsanız yapın web sayfasının hızlı yüklenmesini sağlamayacaktır.

Büyük resimler, büyük resimleri getirmek çok daha uzun sürdüğü için web sayfasını yavaşlatır.

Görüntü Optimizasyonu, netliklerini kaybetmeden hızlı yüklenmesi için görüntünün boyutunu küçültmek anlamına gelir. Kayıplı ve kayıpsız sıkıştırma, görüntüyü sıkıştırmanın iki yoludur.

Bir web sitesi sahibi olarak, her görseli sıkıştırıp optimize ettikten sonra yüklemeye çalışmalısınız. Ancak, sunucuda çok sayıda görüntü olduğunda bu mümkün değildir.

Pinterest, Unsplash veya büyük e-ticaret mağazası gibi.

Bu tür durumlar için, siteye yüklediğiniz anda görüntüyü otomatik olarak sıkıştıracak WordPress eklentilerini kullanabilirsiniz.

Smush Images, Image Optimizer, TinyPng gibi eklentiler bu görevi gerçekleştirmek için mükemmeldir.

HTML'yi küçült

HTML, Web'in temel yapı taşıdır. Web'de her yerdedir.

HTML'nin küçültülmesi dosya boyutunu da azaltır ve CSS ile JS'nin küçültülmesiyle benzer şekilde çalışır. Küçültülmüş HTML, gereksiz karakterlerden ve boşluklardan oluşmaz.

Birçok Önbellek Eklentisi, HTML'yi Küçültmenize izin verir. Autoptimize Plugin de bu fonksiyona sahiptir.

HTML Minification'ı etkinleştirin ve sitenin yükleme hızının arttığını göreceksiniz.

GZIP Sıkıştırmasını Etkinleştir

Bu, standart web uygulamasıdır ve bu GTmetrix önerisini alırsanız, onu öncelikli tutmalısınız.

Tarayıcı, web sayfasını yüklemek için gerekli dosyalar için HTTP isteklerini Web Sunucusuna gönderir. Yanıt olarak, web sunucusu dosyayı geri gönderir.

Ancak dosya GZIP sıkıştırmasında gelir.

GZIP sıkıştırması, tekrarlayan ikili dosyaları tek bir birim olarak sayarak dosya boyutunu küçültmenin bir yoludur. Detaylı okumak için gönderiye göz atabilirsiniz.

GZIP sıkıştırması, HTML, JS dosyalarınızın ve diğer varlıklarınızın boyutunu küçültmenize olanak tanıyan, sunucu tarafı bir ayardır. Ancak görüntüler üzerinde çalışmaz ancak bu yöntem dosya boyutunu %50-70 oranında küçültebilir.

Barındırma şirketlerinin çoğu varsayılan olarak GZIP sıkıştırmasını etkinleştirir.

Apache'de GZIP sıkıştırmasını etkinleştirmek için .htaccess dosyanıza aşağıdaki kodu eklemeniz yeterlidir:

 <IfModule mod_deflate.c> # Compress HTML, CSS, JavaScript, Text, XML and fonts AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/x-font AddOutputFilterByType DEFLATE application/x-font-opentype AddOutputFilterByType DEFLATE application/x-font-otf AddOutputFilterByType DEFLATE application/x-font-truetype AddOutputFilterByType DEFLATE application/x-font-ttf AddOutputFilterByType DEFLATE application/x-javascript AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE font/opentype AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/javascript AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/xml # Remove browser bugs (only needed for really old browsers) BrowserMatch ^Mozilla/4 gzip-only-text/html BrowserMatch ^Mozilla/4\\\\.0[678] no-gzip BrowserMatch \\\\bMSIE !no-gzip !gzip-only-text/html Header append Vary User-Agent </IfModule>

Siteniz Nginx sunucusunda çalışıyorsa bu kodu Nginx.conf dosyasına ekleyin:

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

GZIP sıkıştırmasının nasıl etkinleştirileceğiyle ilgili ayrıntılı yazımızı mutlaka okuyun.

Yönlendirmeyi simge durumuna küçült

Web sitenizde dosyanın konumu değiştiğinde, ziyaretçilerin eski konumu ziyaret etmesini istemezsiniz. Yönlendirmelerin kullanışlı olduğu yer burasıdır.

Yönlendirme, ziyaretçiyi otomatik olarak bir dosyadan diğerine taşımanıza olanak tanır.

Birçok yeniden yönlendirme türü vardır; her biri sayfa hızını etkiler.

HTTP yönlendirmelerini en aza indirmek ideal çözümdür. Yalnızca 1 veya 2 yönlendirme, yüksek yükleme süresine neden olabilir.

Sayfadaki tüm yönlendirmelerin bir listesini yapın ve her birini buna göre ele alın.

Bir yönlendirme olması gerekiyorsa, bunu sunucu tarafında yapın, böylece önbelleğe alınabilir.

Bir Önbellek Doğrulayıcı Belirtin

Önbellek doğrulayıcı, HTTP istekleri başlığının küçük ama önemli bir parçasıdır. Tarayıcının önbelleğindeki kaynağın kullanılıp kullanılamayacağını bulmaya yardımcı olur. Bu önbellek doğrulayıcıları, dosya talebinin sunucuya mı gönderilmesi gerektiğine veya yerel olarak kaydedilen dosyaların yüklenebilecek kadar iyi olup olmadığına karar verir.

Web sunucusundan istek göndermek ve yanıt almak, kaynakları tarayıcının önbelleğinden yüklemekten daha fazla zaman alır.

Ancak, bu eksikse, sunucuya her seferinde yeni istek yapılır ve bu nedenle yükleme süresi artar.

Önbelleğe alma başlıklarını eklemek site hızını artırabilir ve size çok fazla bant genişliği tasarrufu sağlar. Genel olarak, kullanıcı için daha iyi bir deneyim.

Yalnızca sitenizdeki sorunu çözebilirsiniz. Bu nedenle, sorun üçüncü taraf uygulamalardan kaynaklanıyorsa yapabileceğiniz çok az şey vardır.

Görüntü Boyutlarını Belirtin

Tarayıcı sayfayı yüklediğinde birçok varlık yükler. Bunlardan biri de görüntü.

Tarayıcı resminizin boyutunu (HTML) biliyorsa, metni bu boyutun etrafına hızlı bir şekilde sarabilir ve onunla işi bitirebilir.

Belirli bir boyut olmadığında, tarayıcı sayfayı yükler ve görüntünün yüklenmesini bekler. Görüntü yüklendiğinde, tarayıcı boyutu öğrenecek ve ardından metni görüntünün etrafına saracaktır. Her görüntü için olacak.

HTML içinde belirli bir resim boyutuna sahip olmak, tarayıcının resim için sayfada o kadar çok yer bırakmasını sağlar.

Yanlış

 <img src="<https://domain.com/images/image1.png>">

Doğru

 <img src="<https://domain.com/images/image1.png>" width="200" height="100">

HTML'de görüntünün yüksekliğini ve genişliğini eklemek, sayfanın hızlı yüklenmesine yardımcı olur.

Statik Kaynaklardan Sorgu Dizelerini Kaldırma

Sorgu dizeleri, “?” ile biten URL'lerdir. veya "&."

CSS ve JavaScript'lerin URL'lerinde dosyanın sürümü bulunur.

Örneğin:

example.com/style.css?ver=3.6

Şimdi, bu sorgu dizeleri sayfaları önbelleğe almayı zorlaştırıyor. CDN'nin çoğu, sorgu dizeleri olan dosyalara bakar. Aynı şey Proxy sunucusu için de geçerlidir; ayrıca sorgu dizelerini düzgün şekilde önbelleğe almazlar.

Sorgu dizelerini siteden kaldırdıktan sonra, önbelleğe alma araçları statik kaynakların önbelleğe alınmasını etkinleştirebilir.

Bu kodu sitenizin function.php dosyasına ekleyin:

 //* TN - Remove Query String from Static Resources function remove_css_js_ver( $src ) { if( strpos( $src, '?ver=' ) ) $src = remove_query_arg( 'ver', $src ); return $src; } add_filter( 'style_loader_src', 'remove_css_js_ver', 10, 2 ); add_filter( 'script_loader_src', 'remove_css_js_ver', 10, 2 );

Bu görevi yapmak için eklentileri de kullanabilirsiniz. Birçok önbelleğe alma eklentisi, alet kemerinin altında bu seçeneğe sahiptir.

Ayrıca, bu işlevi yalnızca gerçekleştirmek için eklentiler vardır.

Bir Değişken Belirtin: Kabul Etme-Kodlama Başlığı

Tarayıcı, HTTP isteğini web sunucusuna gönderir. Yanıt olarak, web sunucusu istenen verileri gönderir.

Ancak, web sunucusu, isteğin gönderildiği sistemle ilgili bazı bilgilere ihtiyaç duyar.

Bunlardan biri, tarayıcının kaynakların sıkıştırılmış sürümünü işleyip işleyemeyeceğidir.

Kabul-Kodlama Başlığı, bu bilgilerden oluşan bir HTTP üstbilgisidir. Onsuz, web sunucusu dosyanın sıkıştırılmamış sürümünü gönderebilir.

Bu, dosya boyutunu ve sayfanın genel yükleme süresini artıracaktır.

Apache'de bu sorunu çözmek için bu kodu .htaccess dosyasına ekleyin:

 <IfModule mod_headers.c> <FilesMatch ".(js|css|xml|gz|html)$"> Header append Vary: Accept-Encoding </FilesMatch> </IfModule>

Nginx için, Nginx.conf dosyasını bulun ve dosyaya şu satırı ekleyin:

 gzip_vary on

Ancak bunu yalnızca siteniz için etkinleştirebilirsiniz. Üçüncü taraf URL'leri üzerinde herhangi bir kontrolünüz yoktur.

YSlow Önerisi

YSlow, GTmetrix tarafından bir web sitesini puanlamak için kullanılan başka bir ölçümdür.

YSlow bölümünün altına giren 15'ten fazla öneri var. Bu yazıda tüm önemli olanları ele alacağım.

Bu öneriler üzerinde çalışırsanız, sayfanızın eskisinden daha hızlı yüklenmesini kesinlikle izleyeceksiniz.

Daha Az HTTP İsteği Yapın

Sayfa, web sunucusuna çok sayıda HTTP isteği yapmazsa, hızlı yüklenir.

HTML ile oluşturulan sitenin, JavaScript, PHP ve diğer dillerin birleştiği sitelerden daha hızlı yüklenmesinin nedeni budur.

Metin içeren sayfa, çok sayıda resim içeren resimden daha hızlı açılır.

Sayfa ağırsa ve yüklenmesi gereken çok sayıda öğe varsa, yüklenmesi kesinlikle daha fazla zaman alacaktır.

Daha hızlı hız için sayfayı hafif tutun ve gereksiz CSS, JS ve Eklentiler kullanmayın.

Daha hızlı yükleme için HTTP isteğini minimumda tutun.

Sona Eren Başlıkları Ekle

Tarayıcı önbelleğinden yararlanmak, tarayıcının dosyaları otomatik olarak tarayıcı belleğine kaydedeceği anlamına gelir. Kullanıcı sitenizdeki web sayfalarını ziyaret etmeye karar verirse, web sunucusundan tüm içeriği yüklemeye gerek kalmayacaktır.

Ancak tarayıcı verileri ne kadar süreyle saklamalı?

Bunun için başlıklara bitiş süresi ekliyoruz. Çünkü kullanıcıların dosyayı güncelledikten sonra bile aynı dosyayı tekrar ziyaret etmelerini istemiyoruz.

Apache'de Expires başlığını eklemek için aşağıdaki kodu .htaccess dosyanıza eklemeniz yeterlidir.

 ## EXPIRES HEADER CACHING ## <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access 1 year" ExpiresByType image/jpeg "access 1 year" ExpiresByType image/gif "access 1 year" ExpiresByType image/png "access 1 year" ExpiresByType text/css "access 1 month" ExpiresByType application/pdf "access 1 month" ExpiresByType application/javascript "access 1 month" ExpiresByType application/x-javascript "access 1 month" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType image/x-icon "access 1 year" ExpiresDefault "access 7 days" </IfModule> ## EXPIRES HEADER CACHING ##

NGINX'e Expires başlıkları eklemek için, aşağıdaki kodu yapılandırma dosyanıza eklemeniz yeterlidir.

 location ~* \\\\.(js|css|png|jpg|jpeg|gif|ico)$ { expires 7d; }

Siteye Expires Headers eklemek için WordPress eklentilerini de kullanabilirsiniz.

Add Expires Header Plugin, bu görev için birçok işleve izin verir.

Bir İçerik Dağıtım Ağı (CDN) kullanın

Gecikme, sayfanın yüklenme hızında önemli bir rol oynar.

Verileriniz Asya sunucusunda bulunuyorsa ve birisi sayfayı Amerika Birleşik Devletleri'nden açarsa, verilerin dünya çapında seyahat etmesi gerekir.

Bir CDN, verilerin önbelleğe alınmış kopyasını ziyaretçilere en yakın konumdaki POP'larda tutar.

İçeriğin CDN önbellek kopyası, gecikmeyi azaltır ve sitenin yükleme hızını artırır. İnternette birçok ücretsiz CDN var.

CloudFlare en popüler olanıdır, ancak kullanabileceğiniz CloudFlare'in birçok alternatifi vardır.

Çerezsiz Etki Alanlarını Kullanın

HTTP çerezleri, çok yönlü kullanıcı deneyimini iyileştirdikleri için web için gereklidir.

Bu çerezler, kullanıcı tercihleri, müşteri girişi, ziyaretçilerin daha önce ziyaret ettiği sayfalar gibi web sitenizin faaliyetleriyle ilgili verileri toplar.

Bir bakıma bu çerezler sitenin kullanıcı için daha kişisel hale getirilmesine yardımcı olur.

Ancak, görüntüleri, JavaScript'i ve CSS'yi yüklerken HTTP tanımlama bilgilerine gerek yoktur… ancak sunucu tüm alan için tanımlama bilgileri ayarlar ve bunları tüm HTTP isteklerine yanıt olarak gönderir.

Bu tür içerikler için tanımlama bilgileri gerekli değildir ve yalnızca yükü dosyaya eklerler.

Bunu düzeltmenin bir yolu, CDN'yi kullanmak ve statik varlıklar için çerezleri çıkarmaktır.

Başka bir yol da bir alt etki alanı oluşturmak ve çerezi oraya yüklemektir.

DNS Aramalarını Azaltın

IP Adreslerinin hatırlanması karmaşıktır ve markalaştırılamaz. Bu yüzden Alan Adları kullanıyoruz.

Alan Adları, IP adresine bağlanır ve kullanıcı, alan adını tarayıcıya koyduğunda, tarayıcı, alanın bağlı olduğu IP adresini bulur.

DNS, Alan Adı Sistemi anlamına gelir — Hangi alan adının hangi IP adresine bağlı olduğunun kaydını tutar.

Tarayıcı, ilişkili IP adresini bulmak için DNS aramasını gerçekleştirir. Tamamlandıktan sonra, tarayıcı içeriği web sunucusundan indirmeye başlar.

Bu süreç zaman alır.

Sayfanızda çok sayıda üçüncü taraf uygulaması varsa, bu, tarayıcının her biri için DNS araması yapması gerektiği anlamına gelir.

Sayfanın yüklenme süresini artıracaktır.

DNS aramasını azaltmak için ipuçları:

• Üçüncü taraf kaynaklarını yerel olarak barındırın
• Avantajınız için DNS önbelleğini kullanın
• DNS'yi önceden getir
• CNAME kayıtlarının sayısını en aza indirin
• Hızlı bir DNS sağlayıcısı kullanın

Favicon'u Küçük ve Önbelleğe Alınabilir Yapın

Sitenizin sekmesine giden bir favicon veya favicon.ico küçük resim simgesi dosyası. Marka bilinci oluşturma için kullanışlıdır ve kullanıcının sayfanın hangi sekmede açıldığını bilmesini kolaylaştırır.

Genel olarak, sitenizi temsil eden bir resim simgesidir.

Bu, sayfa hızı için fazla bir fark yaratmayacaktır. Küçük oldukları kadar, optimize edilmeleri de gerekir. Çünkü biraz bile tasarruf edebiliyorsanız, kurtarmaya çalışmalısınız.

Favicon dosyası PNG, Gif veya ICO olabilir. Ancak ideal format .ico'dur çünkü size en küçük dosya boyutunu verecektir.

Bir Favicon oluşturmak için çevrimiçi bir Favicon oluşturucu kullanabilir veya bunu yapmak için bir profesyonel kiralayabilirsiniz.

Varlık Etiketlerini (ETag'ler) Yapılandırın

Etags başlığı, önbellek doğrulayıcısının bir parçasıdır.

Etag'ler, web sunucusu tarafından kaynak dosyaya verilen benzersiz bir tanımlayıcıdır.

Tarayıcı bir dosyayı yüklemeye çalıştığında, sunucu, sunucunun sahip olduğu sürümü ve yerel olarak kaydedilmiş sürümü karşılaştırmak için dosyanın Etag'lerini okur. Varlık etiketleri aynıysa, sunucu 304 (değiştirilmemiş) ile yanıt verir ve tarayıcı dosyayı önbellekten alır.

ETag'ler, Apache 2.4 veya üstü için varsayılan olarak etkinleştirilmiştir. 2016'dan beri Nginx, varsayılan olarak Etag başlığını da etkinleştirmiştir.

Bu uyarıyı görme ihtimaliniz çok nadirdir. GTmetrix metni bunu çıkarırsa, teknik yığını yükseltmek için barındırma şirketinizle iletişime geçin.

Varlık etiketleri hakkındaki bu ayrıntılı makaleyi mutlaka okuyun.

GTmetrix Şelale Tablosu

GTmetrix performans raporundaki üçüncü bölüm WaterFall Chart'tır.

Web sayfası tarafından yapılan tüm istekleri buradan izleyebilirsiniz.

En üstte, analiz etmek istediğiniz dosya biçimlerini görürsünüz.

Sayfa tarafından yapılan HTML, CSS, JS JS, XHR, Yazı Tipleri, Resimler ve diğer çeşitli istekler için bir sekme vardır.

İlk sekme, tüm istekleri tek bir yerde toplayan sekmedir.

Dosya adı

Bu, tarayıcı tarafından istenen dosyanın adını görüntüler.

Ön ek çıkarılır ve geriye kalan tek şey dosyanın adıdır.

Her birini bilmenize gerek yok. Ancak, anlaşılması kolaydır.

.png veya .jpeg ile bitenler resimlerdir, CSS .css ile biter ve Java .js ile biter.

Tam adı okursanız, kesinlikle hangi dosya olduklarını belirten anahtar kelimeyi bulacaksınız.

Durum kodu

Bu oldukça düz ileri.

Yanıttan alınan durum kodudur.

Bunlar hakkında daha fazla bilgiyi Durum Kodu gönderimizden edinebilirsiniz.

İmleci üzerlerine getirerek herhangi birini kontrol edebilirsiniz.

İhtisas

Bu segment dosyanın kaynağını söyler.

Dosya ya sunucunuzdan ya da üçüncü taraf sunucudan gelecektir.

Bu segmente bir bakış, kaynağın etki alanını ve IP'sini ortaya çıkaracaktır.

Dosya boyutu

Adından temizle; bu, aktarılan dosyanın boyutunu gösterir.

Artan ve azalan düzende düzenlemek için Dosya boyutuna tıklayabilirsiniz.

Size web sayfasındaki en büyük ve en küçük dosyayı gösterecektir.

Yükleme Süresi Arızası

Bu bölüm, Şelale Tablosunun her bir isteği yüklemek için gereken belirli süreyi ayırdığı yerdir.

Farenizi herhangi birinin üzerine getirdiğinizde bir kutu açılır.

Pek çok terimi anlamayabilirsiniz, ama endişelenmeyin.

Onları bu yazıda anlatacağım. Bu, GTmetrix hız testinin en heyecan verici özelliklerinden biridir.

Engelleme (Kahverengi)

Engelleme, isteğin gönderilmeden önce beklendiği süredir.

Bunun olmasının birden çok nedeni olabilir.

• Belki izin verilen maksimum bağlantıya ulaştınız ve istek, bağlantı kurabilmesi için bağlantının kesilmesini bekliyor.
• Belki tarayıcı JavaScript ve CSS indiriyor
• HTTP'nin bağlantıyı yetkilendirmesi daha uzun sürüyor

Çoğu zaman, süreci geciktiren JS ve CSS'dir; ancak, modern tarayıcılar bunları en aza indirme konusunda giderek daha akıllı hale geliyor.

Engellemenin daha fazla zaman aldığını görüyorsanız, JS ve CSS'nin oluşturulmasını ortadan kaldırmanız gerekir.

DNS Araması (Teal)

Makalede daha önce bahsettiğim gibi, DNS araması, alan adını bir IP adresine eşleme işlemidir. Bilgisayar IP adresini okur, ancak insan, okunabilirlik ve diğer faktörler uğruna Etki Alanı adını kullanır.

Web sitenizi GTmetrix testinden ilk kez çalıştırdığınızda, bir arama yapmak zaman alacaktır. Ancak testi ikinci kez yaparsanız, DNS aramasının daha az zaman aldığını göreceksiniz.

Bunun nedeni, ikinci test sırasında IP bilgilerini bilmek için önbelleği kullanmasıdır. Bu sefer DNS araması yapmıyor.

Hız testini birkaç kez çalıştırmak, DNS arama süresini daha iyi anlamanızı sağlar. GTmetrix hız testlerinden sonra DNS arama süresini yazın ve ortalamasını alın.

Bu kadar dert etmenize gerek yok ama zamanı iyileştirmek istiyorsanız Premium DNS alabilirsiniz.

Bağlanıyor (Yeşil)

Bağlantı süresi, istemci ve sunucu arasında bağlantı kurmak için geçen süredir.

TCP bağlantısı, sunucu ve tarayıcının birbirleriyle iletişim kurma ve veri gönderme şeklidir.

Gönderme (Kırmızı)

Adından da anlaşılacağı gibi, tarayıcının isteği sunucuya göndermesinin zamanı geldi.

Bu bir PUT veya POST isteğiyse, bu istekle herhangi bir veriyi yüklemek için harcanan süreyi de içerecektir.

Bekliyor (Mor)

GTmetrix, TTFB ile bekleme süresini hesaplar.

TTFB, 'ilk bayta kadar geçen süre' için bir kısaltmadır. Bu, bir tarayıcının (kullanıcının) sunucu tarafından ilk veri baytını almak için beklemesi gereken zamanın bir ölçümüdür. Sunucunun isteği işleme koyması ve buna göre yanıt vermesi ne kadar uzun sürerse, TTFB o kadar uzun olur.

Mümkün olduğunca az olmalıdır. Ancak, 100 ms'nin altındaki her şey yeterince iyi ve kabul edilebilir.

GTmetrix testi yüksek TTFB gösteriyorsa, sunucular düzgün yapılandırılmamış demektir.

Ayrıca, daha iyi barındırmaya yükseltmeniz gerektiğinin bir göstergesidir.

CDN kullanmak ve Önbelleğe Alma özelliğini kullanmak gibi bunu azaltmanın birçok yolu vardır.

Bununla ilgili daha fazla bilgi edinmek için bu eksiksiz TTFB Kılavuzunu okuyun.

Alma (Gri)

Adından da anlaşılacağı gibi, alma süresi, tarayıcının sunucu tarafından gönderilen dosyaları indirmesi için geçen süredir.

Uzun alım süresine katkıda bulunabilecek şeyler şunları içerir:

• Büyük dosyaların indirilmesi
• Birden çok eşzamanlı dosya indirme ile bant genişliği sınırlarına ulaşmak
• Ağ sorunları

Hızlı WordPress barındırma bununla ilgilenecektir.

Etkinlik Zamanlamaları

Bu satırlar, bir öğenin tamamlanması için gereken süreyi belirtir. Her renk bir dönüm noktasını temsil eder.

İlk Boya (Yeşil Hat):

Tarayıcı, sayfanın ilk öğesini oluşturmak için zaman alır. Zaman, sayfada görünen ilk nokta tarafından alınır.

DOM Yüklendi (Mavi Hat):

It is the point at which some sort of content begins to appear — the content that is defined in Document Object Model. It could be text, image, or video.

Onload (Red Line):

Onload means that the page is complete, and all resources on the page (images, CSS, Java, Text, Videos, etc.) are finished downloading.

Fully Loaded (Purple Line):

Fully loaded means that the Onload event has already fired, and no network activity has occurred for 2 seconds.

HTTP Response Headers

If you click on any request, it will open up the request and response header.

Like this one:

The header provides lots of information about the site.

As you can see that this header has:

• Accept Vary Encoding
• Expires header
• Cloudflare CDN
• Gzip Enabled

The header of each request could be read, and you will find the valuable information there.

GTmetrix Speed Test History

Then there is the history tab at the end.

Here you can view the results of your past tests. For free accounts, there is a limited number of tests data GTmetrix store for you.

You can download the report, and the past test reports in one click.

Another useful feature of GTmetrix is that you can choose past reports to compare side by side.

During optimization, this comparison helps in finding which optimization is working, and what is not working. You have to keep testing to see if you are making any improvements or not.

Son sözler

Now, after reading this article, you can use the GTmetrix and understands all the metrics.

All the charts and data will help your team to optimize the WordPress site with a more data-driven approach. You will know which points you need to improve.

Waterfall analysis tells you how your assets are loading individually.

GTmetrix is a fantastic tool, and offer a lot of data at no cost. Pingdom has the same function.

But you must not compare both of them, as Pingdom has a different approach than the GTmetrix. Choose one and make changes according to it.

In the end, what is important is your WordPress site load fast. Many of these suggestions can be solved by a fast WordPress hosting.

I hope this article helped you. If you want to share anything, leave it in comments.