Site Hızını Arttırmanın Yolları

Site Hızını Arttırmanın Yolları

Site Hızı Analizini Kolaylaştıracak Grafik Hazırlama

Data Studio’yu kullanarak beş dakika içinde oluşturabileceğiniz site hızı grafiği ile ay ay sitenizin çeşitli hız metriklerinde durumunu inceleyebilirsiniz. PageSpeed Insight’ta karşılaştığımız lab verilerini bu tablo ile görselleştirebilirsiniz. First Contentful Paint, First Paint, First Input Delay, Dom Content Loaded  ve Onload metriklerini detaylı şekilde incelememize olanak sağlıyor. Ek olarak Device Distribution ve Connection Distribution grafiklerini de ay ay verdiği için sitemize gelen kullanıcıların hangi cihazlardan geldiğini ve mobilden gelen kullanıcıların hangi hücresel veriyi kullandıklarını yorumlayabiliriz.  Hangi metriklerde düşüşte, hangilerinde artışta olduğunuzu bu grafikler sayesinde yorumlamak daha kolay.



İlk olarak bu linkte tıklayın. Açılan sayfaya sitenizin url’ini ekleyin. Https:// default olarak geldiği için o kısmı eklemenize gerek yok. Daha sonra sağ yukarıdaki Connect butonuna basın.



Açılan sayfada Create Report butonuna tıkladığınız zaman site hızı grafikleriniz oluşuyor. Grafiklerdeki metriklerin anlamlarını ve geliştirmek için ne gibi aksiyonların alınması gerektiğini yazının devamında okuyabilirsiniz.



Site Hızı Metrikleri

First Contentful Paint (FCP)

Türkçe karşılığı İlk İçerik Boyaması, web site içeriği gelmeden o bölgelerin boyanması anlamına gelir. Bu metrik, internet tarayıcısının ekrandaki görüntüyü oluşturan pixel’leri oluşturduğu süreci belirtir.



First Paint (FP)

Türkçe karşılığı İlk Boya olan bu metrikte de içerik boyaması yoktur. Genel alan boyaması vardır.

First Paint sayfanın yüklendiğini gösteren ilk boyama iken First Contentful Paint ise nesneleri baz alır. Bu tanımlanan resim, yazı vb şeyler olabilir.



First Contentful Paint ve First Paint Performans Skorunu Geliştirme Önerileri

  • Oluşturmayı engelleyen kaynakların kaldırılması / Eliminate render-blocking resources
    • İnternet tarayıcısı sayfayı oluşturmadan önce sayfaya dışarıdan çağrılan dosyaları yüklemeye başlar. Çağrılan CSS ve JavaScript  dosyaların boyutu ve sayısı arttıkça sayfanın kullanıcılara görüntülemesi için gereken süreyi artırır. Css ve JS dosyalarının sayfa tamamen yüklendikten sonra yüklenmesi site hızını arttıracaktır.
  • Kullanılmayan CSS’in kaldırılması / Remove unused CSS
    • Sayfada kullanılmayan CSS kodları çağırılmamalı ve request sayısını azaltmak için dosya boyutları çok yüksek olmayacak şekilde kaynaklar birleştirilmelidir.
  • Kullanılmayan JavaScript’lerin kaldırılması / Remove unused JS
    • Sayfada kullanılmayan JavaScript kodları çağırılmamalı ve request sayısını azaltmak için dosya boyutları çok yüksek olmayacak şekilde kaynaklar birleştirilmelidir.
  • Metin sıkıştırmanın etkinleştirilmesi / Enable text compression
    • Kullanılan JS, CSS ve HTML kaynaklarının GZIP kullanılarak sıkıştırılması, dosyaların indirilirken yarattığı yükü azaltacak ve sayfa yüklenme hızını iyileştirerek transfer edilen veri miktarı azalacaktır.
  • Sunucu yanıt sürelerini kısaltılması (TTFB) / Server response times are low
    • Web tarayıcısının, sunucuya gönderilen bir isteğe verdiği yanıt arasındaki süreyi tanımlar. Sunucu yanıt süresini etkileyen faktörlerden bazıları; bağlı Olduğunuz Sunucu, web sitenizin çektiği trafik, css- Js – görsellerin sıkıştırılmaması, tarayıcı önbelleğini kullanmama, cdn kullanılmaması.
  • Tarayıcı Önbelleğe Alma / Browser Caching
    • Tarayıcı önbellekleme logo, css, görsel ve benzeri dosyaları kullanıcının tarayıcısında depolamaya yardım eder. Örneğin, sitenizin logosu uzun süre değişmeyecekler listesindedir. Logoyu önbelleğe alarak, kullanıcının tarayıcısına bu görseli yalnızca haftada bir kez indirmesini sağlayabilirsiniz. Böylelikle kullanıcıların bir hafta içerisinde yaptıkları ziyaretlerde logo görüntüsünü tekrar indirilmesi gerekmez.


First Input Delay (FID)

Maksimum Olası İlk Giriş Gecikmesi, sayfa yüklemesinin en yoğun olduğu 5 saniyelik zaman aralığında, sayfanın kullanıcı girişine kaç milisaniye içinde yanıt verebileceğini ifade eder.



First Input Delay Geliştirme Performans Skorunu Geliştirme Önerileri

  • Üçüncü taraf kodunun etkisini azaltın / Reduce the impact of third-party code
    • Google Analytics, Google Adsense, Yandex Metrica, video oynatıcıları, sosyal paylaşım butonları gibi sitenin çalışmasıyla alakalı olmayan kodlar üçüncü taraf olarak geçer.Üçüncü taraf kodları sayfa hızını yavaşlatıyorsa, performansı artırmak için yapılabilecek birkaç seçenek bulunuyor. Üçüncü taraf kodu eş zamanlı veya sayfa yüklenmesi bittikten sonra yüklenmesini sağlanabilir. Üçüncü taraf sunucusu yavaşsa, scripti kendi sunucunuzda çalıştırabilirsiniz. Eğer çok önemli değilse scripti sitenizden çıkarabilirsiniz.
  • JavaScript yürütme süresini azaltın / Reduce JavaScript execution time 
    • Genellikle kullanılmayan, küçültme yapılmamış, sıkıştırılmamış, derlenmemiş, ön bellek (cache) kullanılmayan sitelerde görülür. Bu durum sayfa açılış süresini doğrudan etkiler. JS’yi ayrıştırma, derleme ve yürütme için harcanan zamanı kısaltmak ve daha küçük JS yüklerinin sağlanması bu konuda yardımcı olabilir.
  • Ana iş parçacığı çalışmasını en aza indir / Minimize main thread work
    • CSS ve JavaScript dosyalarında görülen değerlerde Style & Layout CSS dosyalarını, Script Evaluation ise JS dosyalarını temsil etmektedir. Bu dosyalara gerekli optimizasyon işlemlerinin yapılmaması sonucu bu hata ile karşılaşılır. Sayfa yüklenme performansının artması bu sorunu ortadan kaldıracaktır. Kullanıcılarınızın ihtiyacı olan kodun kod bölme işlemiyle gönderilmesi, kodunuzu küçültülüp ve sıkıştırılması, kullanılmayan kodların kaldırılması uygulanabilecek işlemlerdendir.
  • İstek sayısını az ve aktarma boyutlarını küçük tutun / Keep request counts low and transfer sizes small
    • Sayfalar yüklenme esnasında CSS, JS, resimler vb. dosyaları çağırmak için sunucuya ayrı ayrı istek gönderilir. İstekler sayfanın yüklenmesini geciktirir.Sayfa kaynaklarının miktarlarının ve büyüklüklerinin sınırlandırmak site hızını olumlu yönde etkileyecektir.
  • Ekran dışındaki resimleri ertele / Lazy Loading / Defer offscreen images
    • Sayfalarda çağrılan tüm ürün görsellerinin arka arkaya yüklenmesi yerine kullanıcı aşağı doğru scroll ettikçe yüklenmesi sağlanmalı. Sitede slider varsa ilk görsel harici görsellerin daha sonra yüklenmesi sağlanmalı. Bu sayede sayfa çok daha hızlı bir şekilde kullanıma hazır hale gelir ve daha az miktarda veri transfer edilir. Kullanıcıya daha hızlı bir deneyim sunmak için önemli bir özelliktir.

DOM Content Loaded (DCL)

HTML dosyasının ne kadar sürede tamamen yüklenebildiğini ve oluşturulabildiğini ifade eder. DCL süresi ne kadar uzun olursa ziyaretçi o derece siteden ayrılma isteği gösterecektir.



DOM Content Loaded Performans Skorunu Geliştirme Önerileri

  • Web yazı tipi yüklemesi sırasında metnin görünür halde kalmasını sağlayın / Ensure text remains visible during webfont load
    • Yazı tipleri genellikle yüklenmesi biraz zaman alan büyük dosyalardır. Bazı tarayıcılar yazı tipi yüklenene kadar metni gizler ve yükleme yapılana kadar o alan boş gözükür. Özel yazı tipleri yüklenirken kullanıcıların metni görebilmesini sağlamak için bir sistem yazı tipini geçici olarak göstermek gerekir. Yazı tipi görüntüleme API’si bir yazı tipinin nasıl görüntüleneceğini belirtir. Özel yazı tipi hazır olduğunda, sistem yazı tipinin yerini alır. 
  • Resimleri yeni nesil biçimlerde yayınlayın / Serve images in next-gen formats
    • JPEG 2000, JPEG XR ve WebP, eski JPEG ve PNG benzerlerine kıyasla üstün sıkıştırma ve kalite özelliklerine sahip görsel formatlardır. Resimleri JPEG veya PNG yerine bu formatlarda kodlamak, daha hızlı yüklenecekleri ve daha az hücresel veri tüketecekleri anlamına gelir.
  • Çok büyük ağ yüklerinden kaçının / Avoid enormous network payloads 
    • Görsel optimizasyon, sayfa boyutunu küçültmek adına yapılan işlemler bu hatayı da ortadan kaldıracaktır. Uzun ve büyük içeriklere sahip sayfalar birkaç ayrı sayfa olarak bölünebilir. Yorum içeren sayfalarda yorumların daha sonradan yüklenmemesi sağlanabilir.
  • Resimleri verimli bir şekilde kodlayın / Efficiently encode images
    • Özellikle anasayfa ve kategori sayfaları görsel ağırlıklıdır. Sitede kullanılan tüm ürün görselleri %25-30 kayıplı sıkıştırılarak görsel kalitesi fark edilmeyecek seviyede düşürülerek, görsel boyutlarından %50’ye yakın bir tasarruf sağlanabilir.
  • Doğru boyuta sahip resimler / Properly size images 
    • Sayfaya kullanıcı ekranında oluşturulan sürümden daha büyük resimler yüklenmemeli. Bundan daha büyük olan herhangi bir görsel, yalnızca boşa harcanan baytlara neden olur ve sayfa yükleme süresini yavaşlatır. 
  • Aşırı büyük bir DOM boyutundan kaçının / Avoids an excessive DOM size
    • Kod yapısındaki iç içe döngüler ve iç içe satırların yani kodun derinliğinin arttıkça o kodun çalışma hızı düşer. Büyük bir DOM, bellek kullanımını artırarak daha uzun stil hesaplamalarına, yüksek maliyetli yeniden düzenlemelere yol açabilir. Sayfaların yaklaşık olarak 1.500’den az DOM ögesi içermesini önerilir. 

Onload (OL)

Onload event’i genellikle bir web sayfası tüm içeriği (resimler, komut dosyaları, CSS dosyaları vb. dahil) tamamen yüklendikten sonra <body> öğesi içinde bir komut dosyası yürütmek için kullanılır. Aynı zamanda Onload, ziyaretçilerin tarayıcı türünü, tarayıcı sürümünü kontrol etmek ve bu bilgilere dayanarak web sayfasının uygun sürümünü yüklemek için kullanılabilir.



Device Distribution

Cihaz dağılımı grafiği, ay ay kullanıcıların hangi cihazlardan geldiğini gösterir. Mobil, desktop ve tablet dağılımlarını incelememizi kolaylaştırır.



Connection Distribution

Bağlantı dağılımı grafiği sayesinde mobilden gelen kullanıcıların hangi bağlantı hızını kullandıklarını (2G, 3G, 4G) görebiliriz.


Yorum Yap

E-posta adresiniz yayımlanmayacak. * ile işaretli alanlar zorunludur.