3 dakikalık okuma
Sitenizin açılma hızı; gerek seo açısından, gerek ise kullanıcı açısından çok önemlidir. Seo için önemlidir çünkü; web örümcekleri son derece meşgul varlıklardır, web sayfanız herhangi bir nedenden dolayı yoğun ise veya geç yükleniyorsa sayfanızın yüklenmesini beklemeyeceklerdir, bu seo olarak negatif etkileneceksiniz demektir. Diğer bir bakış açısı ile Amazon’un 100ms saniye geç açılması demek, %1* daha az satış yapması anlamına gelir. %1 kulağa az bir oran gibi gelebilir, ama Amazon gibi büyük hacimli e-ticaret yapan bir site için oldukça büyük bir rakam. Bu nedenle web sitenizin hız açılması gerekir. Peki sitem ne kadar hız dediğiniz anda ise, ilk olarak akla gelen Google Pape Speed Tool. *kaynak
Google Page Speed Insights’I, Türkçe’ye ‘sayfa hızını anlama’ olarak çevirebiliriz. Google, bu aracı 2018 Ocak ayı başlarında yeniledi, yenilik ile birlikte artık Google Chrome kullanan kullanıcıların sayfalarını ne kadar hızlı görüntülendiği bilgisini de paylaşmaya başladı ki buna kısa olarak CrUX yani “Chrome User Expreience Report” deniliyor, yani Page Speed Insight verileri artık sadece test edilen teorik bilgileri değil. Test ettiğiniz web sitesi yeterince veriye sahip ise, gerçek verilerde içeriyor; diğer bir deyişle gerçek kullanıcı verisi+teorik ölçümle verisini birlikte görüyoruz ki bana göre bu, web sitenizin gerçek hızını test etmeniz ve hızlandırmak için harika bir haber. Bu yazıda spesifik bir üzerinden yapımış bir test’i yorumlamayı deği, Page Speed İnsight aracının verdiği rapordaki bilgiler ne anlama geliyor anlaymaya çalıştım.
Yukarıda bahsettiğim gibi şayet web siteniz yeterince trafiğe sahip değil ise; aşağıdaki gibi ‘unavailable’ (Şekil-1) yani ‘var olmayan’ olarak görüyor olursunuz. Trafik konusunda ise, kesin bir bilgi yok, yani trafiğiniz şu aralıkda ise bu veri görünür/görünmez diyemiyorum. Bu veriler, gerçek kullanıcı verisi olduğu ve Chrome User Expreince Report’dan geldiği için, siteniz ziyaret eden Google Crome kullanıcılarının Chrome ayarlarındaki trafik paylaşımı kısmını aktif etmiş olmaları gerekiyor.
Speed bölümünde yeteri kadar trafiğik var ise, bu durumda aşağıdaki gibi bir görüntü görebilirsiniz. (Şekil -2)
Bunun yanı sıra mobile ve masa üstü için iki farklı sekme göreceksiniz. Peki ama FCP ve DCL değerleri ne anlama geliyor?
First Contentful Paint –FCP-; sitenizin ismini brower’a yazıp <enter>’a bastığınızda, browser’a ilk yüklenen resim, text, html, vb o sayfaya ait ilk parçanın yüklenmesine kadar geçen süreyi ifade ediyor. Aşağıda gördüğünüz resim, bunu daha iyi ifade edecektir. (Şekil -3)
Sıra DCL’i açıklamada, ama bu biraz karışık. DCL, ‘Dom Content Loaded’ anlamına geliyor. Peki DOM nedir ? DOM, ‘Document Object Mode‘l anlamına gelir. İnternet tarayıcıları, bir internet sayfasındaki resim, form, text birer nesnedir. DCL, sayfadaki DOM’un yüklendiği anlamına geliyor. HTML içerik görüntülenir, fakat HTML içerik görüntülenmesine rağmen bu sayfanın tamamen yüklendiği anlamına gelmemektedir. Pixel kodları arka planda yükleniyor olabilir. FCL(First Content Full) veya DCL(Dom Content Loaded) değerlerini farklı siteler i.in yapılan testlerde farklı olarak renklediğini fark etmişsinizdir; turuncu, ve yeşil ama bir renk daha var kırmızı peki bu renkler ne anlama geliyor. (Şekil-4) Yazımın üstünden Google’ın artık CrUX verilerini de, page insights tool a eklediğini söylemiştim, Google web üzerindeki indexlediği tüm sitelere bakarak hangi renkte göstereceğine karar veriyor, nasıl karar veriyor derseniz FCL ve DCL değerlerine bakıyor ki bu değerler haftada bir günceleniyor ve geriye dönük olarak da otuz günlük veri sunuyor. CrUX verilerine sahip siteler içinde bir medyan değeri buluyor. ‘Medyan nedir’ derseniz burdan. Bulduğu medyan değerine göre;
Yeşil renkli ise, birinci ve en hızlı grupta, yani ⅓’lük ilk grupta;
Turuncu renkli ise, ikinci ve hızlı grupta, yani ikinci ⅓ grupta;
Kırmızı , hız olarak son grupta, yani en altta anlamına geliyor.
Renkler de , fakat dikkat ettiyseniz; ‘fast’, ‘avarage’, ‘slow’ sonuçları nasıl oluşuyor? (Şekil -5)
Şöyle:
| FCP | DCL | SONUÇ |
|---|---|---|
| Yeşil | Yeşil | Fast |
| Turuncu | Turuncu/Yeşil | Average |
| Turuncu/Yeşil | Turuncu | Average |
| Kırmızı | Yeşil/Turuncu | Slow |
| Yeşil/Turuncu | Kırmızı | Slow |
Şekil -5
Optimization kısmında, aşağıdaki gibi görüntü görebilirsiniz; (Şekil -6 )
Bu bilgi, sitenizi hızlandırmak için kullanılan tekniklerden Google’un belirlediği dokuz tekniği sitenizde tespit edilenlerin oranlanması ile elde ediliyor. Optimization bölümü, CrUX gelmeden öncede vardı ve yine aynı mantıkla çalışıyordu. Bu teknikler şunlar; kaynak
- Avoid landing page redirects
- Enable compression
- Improve server response time
- Leverage browser caching
- Minify resources
- Optimize images
- Optimize CSS Delivery
- Prioritize visible content
- Remove render-blocking JavaScript
Bu tekniklerden test ettiğimiz sitede olanlar tespit ediliyor ve sonra aşağıdaki gibi oranlayarak gösteriliyor;
Good >= 80
Medium 60 >= ~ <79
Low < 60
Page Load Distributions (şekil-7) kısmında bakalım, aşağıdaki ölçüm için açıklamaya çalışayım. CrUX verilerine göre, sitenizi ziyaret eden kullanıcıların yaşadıkları deneyimin bir özeti bu grafik.
FCP –First Content Full Paint- değeri için yorumlar ise şöyle diyebiliriz, ziyaretcilerinizi 100 kişi kabul edersek;
%29’luk ilk grup, siteniniz FCP < 1.6 olarak deneyimledi.
%37’lik ikinci grup ise, FCP 1.6 ~ 3.0 olarak deneyimledi
Ve kalan %34’lik son grup, FCP > 3.0 olarak deneyimlemiş oluyor.
DCL –Dom Content Load- değeri için ise, ziyaretcilerinizi 100 olduğunu kabul edersek;
%47’lik ilk grup, siteniniz DCL < 2.1 olarak deneyimledi.
%38’lik ikinci grup ise, FCP 2.1 ~ 4.1 olarak deneyimledi
Ve kalan %15’lik son grup, FCP > 4.1 olarak deneyimlemiş oluyor.
Page stats bölümü ise, sayfanın görünebilir hale gelmesi için tarayıcının kaç kez git/gel yaptığı anlamına geliyor. Sayfa büyüklüğü ne kadar büyük ise, o kadar fazla gel/git yapacağını söylebiliriz. Bu kısımda bir median işlemi yapılıyor ama bu kısım için bu kadar bilginin yeterli olduğunu düşünüyorum.
Optimization Suggestion bu bölümde, ‘elde ettiğiniz değerleri nasıl daha iyi hale getirebilir’ ve ‘sitenizi nasıl daha hızlı hale getirebilirsiniz’ önerileri sunuluyor.
Optimization already present bölümünde ise, hali hazırda yapılmış olan hızlandırma işlemleri hangileri görebilirsiniz.
Benim kullandığım bir diğer araç da, rakipleri de karşılaştırabileceğiniz GTmetrix buradan erişebilirsiniz. Gtmetrix sitenizin hızını rakipleriniz ile karşılaştırmaya olanak tanıyor.