Sayfa hızı optimizasyonunun sürekli olarak analiz edilerek geliştirilmesi gerekmektedir. Genel olarak bakıldığında sayfaların yükleme hızı 3 saniyenin üzerinde olmaması gerekmektedir. bu yükleme hızı;
şeklindedir.
Teker Teker Bunları Açıklamak gerekirse;
FSRT,web sunucusuna belirli bir istek gönderen web tarayıcısıyla gönderilen isteğe yanıt veren sunucu arasındaki süre olarak tanımlanmaktadır. Sunucu yanıt süresinin uzun olması kullanıcı deneyimini olumsuz yönde etkilemektedir. Beklemek istemeyen kullanıcılar web sayfasında gezinmekten vazgeçer bu da sayfayı olumsuz yönde etkiler. Sunucu ilk yanıt süresini ölçmeye yardımcı olan farklı araçlar da bulunmaktadır. Bu araçlara GTmetrix, Google PageSpeed Insights,WebPageTest örnek verilebilir.
Düzeltmek için genellikle yazılım veya sunucu değiştirmek gerekmektedir.
FCP,sayfaya gönderilen herhangi bir istek sonrası sayfada gerçekleşen ilk boyamanın ölçümlendiğini metriğe verilen isim olmaktadır. Sayfanın arka plan renginin boyanması gibi kullanıcı için bilgisel anlamda herhangi birşey ifade etmeyen bir işlem First Paint metriğini tetikleyebilmektedir. First Paint’in aksine First Contentful Paint ile sayfanın yüklenme aşamasında DOM içerisinde yer alan sayfanın içeriği ile alakalı bir bölümün yüklenme süresi ölçülmektedir.Kısacası First Paint’de olduğu gibi herhangi bir boyamanın gerçekleşme süresinden ziyade içerik ile alakalı bir bölümün ne kadar süre zarfında yüklendiği First Contentful Paint ile ölçülmektedir.
Düzeltmesi oldukça zordur. Bu sorun kullanılan yazılımdaki kodlama yöntemi ile ilgilidir yazılım değiştirilmesi gerekebilir.
TTL,ağ ömrünün veya veri ömrünün sınırlandığı bir mekanizmadır.TTL, verilere eklenmiş zaman damgası olarak uygulanabilmektedir. Öngörülen olay sayısı veya zaman aralığı geçtikten sonra veriler atılmakta yada yeniden doğrulanmaktadır.Bilgi işlem uygulamalarında TTL, performansı artırmak ve verilerin önbelleğe alınmasını yönetmek için yaygın olarak kullanılmaktadır. İlk etkileşim süresi, sitenin tamamen indirildikten sonra kullanıcının komutlarını aldığı ilk an için verilen bir metrik olduğu için tamamen teknik bir detay olmaktadır. Bazı hız test araçları örneğin pingdom sadece indirilme hızını ölçerken google pagespeed gibi daha gelişmiş araçlar bu metriğe de dikkat etmektedir.
Hız endeksi (SI) sayfanın görsel olarak ekranın üst kısmında ne kadar hızlı tamamlandığını ölçen bir performans metriğidir.Milisaniye cinsinden ifade edilmekte ve görüntü alanının boyutuna bağlı olarak puan ne kadar düşükse o kadar iyi olmaktadır. SI tarayıcı görüntüleme bağlantı noktasının boyutuna bağlı olduğu için ve sayfanın yükleme zaman çizelgesinde bir dönüm noktası olmadığından dolayı FCP veya LCP gibi diğer ölçümlerden farklıdır. Bu metrik genellikle kullanılan resimlerin ve yazılımın değiştirilmesi ile düzeltilebilmektedir.
TBT, tarayıcının site ile alakalı oluşturma süreçlerinin 50 ms’den uzun tasklar tarafından engellenme sürelerinin ölçümlendiği metriğe verilen isim olmaktadır. TBT metriği FCP ile TTI kullanıcının sayfa ile etkileşime geçebileceği süre arasındaki tarayıcının işleme süreçlerinin ne kadar süre ile engellediğini ölçen metriktir.
LCP metriği, sayfanın ilk yüklenmeye başladığı zamana göre görünüm alanında görülen en büyük resmin veya metin topluluğunun oluşturma süresini bildirmektedir.İyi bir kullanıcı deneyimi sağlamak için siteler, 2,5 saniye veya daha kısa en büyük içerikli boyamaya sahip olmaya çalışmalıdır. Bu süre ne kadar aşağı çekilebilirse web sitenin LCP skoru o kadar iyi olmakta ve web sitesi,kullanıcılar için iyi bir deneyim sağlamaktadır.
Bir sayfada farklı içerik türlerinin eş zamanlı yüklenememesi sonucunda oluşan bir düzen kaymasıdır.Yani ilgili sayfa yüklenmeye başladıktan sonra diğerlerine göre daha geç yüklenen elemanların ilgili sayfanın düzenini bozup bozmadığını kaymalar yapıp yapmadığını ölçen hassas bir sistem olarak da açıklanabilmektedir. Bu düzen kaymasının değeri ne kadar az olursa, web sitesi o kadar güçlü bir kullanıcı deneyimi sunmaktadır.
Doğrudan olmayan Ancak dolaylı şekillerde sayfa dolayısı ile site hızını etkileyen faktörler ise şu şekildedir.
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.
Javascript kodlarının amacı özünde HTML kodları ile hazırlanan web sayfalarına işlevsellik kazandırmaktır. Örnek vermek gerekirse bir form doldururken size yardımcı olan veya yaptığınız hatalarda uyarı veren sistemlerin altında Javascript teknolojisi yer almaktadır. Fakat Javascript kodları web sitelerinde her ne kadar işlevselliği arttırsada Javascript kodlarının fazla kullanımı sitelerin yüklenme hızını yavaşlatıp ve SEO değerini düşürmektedir.
CSS kodlarının amacı web sayfalarına daha fazla görsellik katmak ve kullanıcı memnuniyetini arttırmak için HTML dosyalarının biçimlendirilmesi olarak tanımlanabilir. HTML ile oluşturulan web sayfalarının renklendirilmesi, biçimlendirilmesi,ayarlanması gibi işlemlerde CSS kodları kullanılmaktadır. HTML tek başına kullanıldığında sadece siyah-beyaz bir görüntü oluşturmaktadır.Bu görüntünün renklendirilmesi için CSS kullanılmaktadır.Fakat CSS’in fazla kullanımı sonucunda web sayfalarının yüklenme hızı da yavaşlamaktadır.
Oluşturmayı engelleyici kaynaklar web sitesinin hızlı yüklenmesine engel olan dosyaların ortak adı olmaktadır. Bu sebepten ötürü söz konusu dosyaların ortadan kaldırılması, sayfanın hızlı açılmasını sağlayacaktır. Oluşturmayı engelleyen dosyalar temelde iki şekilde meydana gelmektedir. Bunlar optimizesi yapılmamış olan ayarlar ve optimize edilmemiş dosya yüklemeleridir. Oluşturmayı engelleyen bu kaynaklar kaldırıldığı zaman web sayfasının hızlı bir şekilde açılması da mümkün olmaktadır.
Javascript çalışmaları ve çeşitli olayları takip etmek için kullanılan olay izleyicileri normal kullanımda sürekli olarak çalışır ve klavye, fare ve touchpad olaylarını takip ederler. Bu ise hem işlemci hem de ram kullanımı için oldukça büyük yükler oluşturabilmektedir. Ancak bu olay izleyicileri doğrudan işletim sistemine verildiğinde bu iş parçacıkları sürekli kontrol edilmez ve işletim sistemi denetimi ile olay oluştuğu anda ilgili metodlar çalıştırılır, oldukça basit bir kullanımı vardır.
Kodları, kullanıcının etkileşime girebileceği bir web sayfasına çeviren bir tür işlemcidir. Ana iş parçacığı HTML’i ayrıştırıp DOM’u oluşturmaktadır. CSS’i de ayrıştırıp belirtilen stilleri uygulamaktadır.JavaScript’i ayrıştırıp değerlendirip yürütür ve kullanıcı etkinliklerini işlemektedir. Kullanıcı bir işlemde bulunduğunda ana iş parçacığı başka birşey yapmakla meşgul ise web sayfası kullanıcı etkileşimlerine yanıt veremeyeceği için kötü bir deneyime ve ana iş parçacığı çalışmasını en aza indir sorununa yol açabilecektir.
.
Kritik istek zincirleri diye adlandırılan durum, birbirini etkileyen ve internetten indirilmesi gereken; resim, css ve script gibi ek dosyaların tek parça üzerinden indirilerek dosya içerisinden yapılan include çağrılarının en aza indirilmesidir. Bir CSS dosyasında implode işlemi yapmaktansa bu kodun doğrudan ilgili dosya içerisine çekilmesi veya bir script dosyası içerisinden script çağrılması yerine scriptin birleştirilmesi işlemi olarak geçecektir.
Yine aynı şekilde küçük resim dosyalarının tek dosya içerisine birleştirerek sprite halini alması da bu işleme denk gelmektedir.
Sayfa yüklenme esnasında CSS,JS,resimler vb. dosyaları çağırmak için sunucuya ayrı ayrı istek gönderilmektedir.İstekler sayfanın yüklenmesini geciktirmektedir. Sayfa kaynaklarının miktarlarını ve büyüklüklüklerini kısıtlamak site hızını olumlu yönde etkilemektedir.
Bir sayfanın yüklenmesi sırasında tüm beklenmeyen düzen kaymalarının toplamının ölçümüdür. Düzen kayması,bir öğenin bir çerçeveden diğerine görünür hareketidir. Örneğin oluşturulan bir banner mesajı önce yüklenir ve görünür durumda ise ancak bir saniye sonra bir görüntü yüklenir ve bannerı dikey olarak aşağı doğru iterse bu bir düzen kayması olarak kabul edilmektedir.
Birleştirilmemiş animasyonlar,düşük kaliteli telefonlarda veya ana iş parçacığında performans açısından ağır görevler yürütülürken düzgün görünmeyebilir.Yani çok fazla animasyonlar kullanılacaksa bunun yerine video şeklinde yükleme yapılabilir.
Web sitesinde resim boyutlandırılması yapılırken boyut ve çözünürlük arasında dengeyi kurmak çok önemlidir.Daha yüksek çözünürlük her zaman için daha büyük dosya formatı anlamına gelmektedir.Yüksek boyutlu resimler web sitesinin hızını düşürmektedir bu durumda kullanıcı deneyimine zarar vermektedir. O nedenle resimleri boyutlandırırken;geniş bir görsel ise 1 MB dan büyük olmamalıdır veya birçok küçük web grafiği 300 KB ya da altında olmalıdır yada tam ekran arka plan kullanılıyorsa genişliğin 2000 piksel olması tavsiye edilir.Resim türlerine değinecek olursak; çoğunlukla karşımıza çıkan iki tür format bulunmaktadır.Bunlar JPEG yada PNG.
Fakat bunlar eski sürüm olmakla birlikte yeni sürümde sıkıştırılma oranı fazla olan ve kaliteyi bozmayan WEBP,JPEG2000 VE JPEGXR kullanılması tercih edilmelidir.
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ıdır. Sitede slider varsa ilk görsel harici görsellerin daha sonra yüklenmesi sağlanmalıdır. Bu sayede sayfa çok daha hızlı bir şekilde kullanıma hazır hale gelmektedir ve daha az miktarda veri transfer edilmektedir.
CSS ve JS dosyaları kod satırlarıdır.Birçok kodda olduğu gibi bunların arasında da dosya boyutunu şişiren, dosyanın okunma süresini uzatan boşluklar ve yorum satırları bulunmaktadır.İşte bu yorum satırlarını ve boşlukları kaldırılarak boyut küçültülmelidir. Aynı zamanda bunları sıraya sokup, derleyip, sıkıştırarak daha da etkili bir işlem yapılabilir.
Javascript bir web sitesi tasarlamak için kullanılan hareketli bir öğedir.Javascript dosyalarının sayısı arttıkça sunucuya gönderilen https isteklerinin sayısı da artmaktadır. Javascript dosyalarını küçültmek boşlukları azalmaktadır. Küçültme tekniklerinin kullanılması,kod,bayt boyutunun azaltılmasına yardımcı olur ve sonuç olarak daha az verinin indirilmesi gerekir.Buda web sitesi yükleme süresini azaltır.
Resim optimizasyonu web sayfasında kullanılan görsellerin kalitesini koruyarak boyutunu küçültmeye yönelik çalışmalardır.Ayrıca web sitesinin arama motorların yapısına uygun şekilde alt etiket ve çalışmalarla donatılmasıdır. Bu sayede hem arama motorlarında üst sıralarda yer alabilir hem de site hızı arttırılabilir.
Resmin formatını tercih etmek önemli bir konudur ve web sitesi sahiplerinin kafasını en çok karıştıran noktalardan birisi olmaktadır. İnternet dünyasında kullanımı fazla olan 3 resim formatı vardır.Bunlar JPEG,PNG ve GIF dir. Bunların 3’ü de fazla boyut kullanmadan yüksek kalitede resim gösterebilirler ve sıkıştırılmaya müsait resim formatlarıdır.
Kullanıcılar bir web sitesine tıkladıklarında, sayfadaki öğeler bilgisayarın geçici depolama alanında saklanmaktadır. Daha sonra aynı site tekrardan ziyaret edildiğinde, ilgili dosyalar indirilmeye gerek kalmadan bilgisayarın depolama alanından yüklenmektedir. Özetle, cache sistemi web sitesindeki bütün sayfaların ve dosyaların, önbelleğe alınmış, küçültülmüştür formlarını oluşturmaktadır. Bu da veri tabanının sorgusunu azalacağından sitenin hızlı açılmasını sağlamaktadır.
Sunucudan istekte bulunan kullanıcılara sunucu tarafından herhangi bir veri gönderilmeden önce, isteğe nasıl cevap vereceğini anlamak için sunucunun yönlendirmelerle ilgili dosya yönergelerini okuması gerekir. Eğer ek yönlendirmeler varsa bu durum açılış süresini uzatmakta ve bu uzama da kullanıcı deneyimini olumsuz yönde etkilemektedir. Bu nedenle site hızlandırma amacıyla yönlendirme sayılarının olabildiğince azaltılması mümkünse de sıfırlanması gerekmektedir.
Önceden yükleme istekleri,sayfaların daha hızlı yüklenmesini sağlayabilir.Bunun için kullanılan tarayıcıya önemli istekleri mümkün olan en kısa sürede indirmesi talimatını vermek için HTML’e önceden yükleme bağlantısı bildirilmelidir ve aşağıdaki fonksiyon kullanılır.
<link rel= “preload” href=ui.js” as= “script”>
Animasyonlar boyut olarak yüksek oldukları için ve içerisinde fazla etkileşim olmasından dolayı site yüklenme hızını yavaşlatır.Bunun için minimize edilmiş MP4 formatında video veya GIF kullanılabilir.
Ağ etkinliğinin kullandığı bayt sayısını azaltmak için paketlerden büyük,yinelenen Javascript modüller kaldırılmalıdır.
Eski javascript modülleri daha eski teknolojilerle yazılmıştır bu nedenle günümüz teknolojisine uyarlanmadığı için bu eski modüllerin kullanılması site hızını olumsuz etkilemektedir.
Bir web sitesi kullanıcısının beklentisi siteye giriş yaptığı andan itibaren sitenin hızlı bir şekilde açılmasıdır. Bunun için önce sitenin ana şablonunun yüklenmesi gerekmektedir.Sonra küçük resimler daha sonra büyük resimler yüklenmelidir.
Görsel optimizasyon,sayfa boyutunu küçültmek adına yapılan işlemler hatayı da ortadan kaldıracaktır. Uzun ve büyük içeriklere sahip sayfalar birkaç ayrı sayfa olarak bölünebilir.
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üşmektedir. Büyük bir DOM, bellek kullanımını artırarak daha uzun stil hesaplamalarına,yüksek maliyetli yeniden düzenlemelere yol açabilmektedir. Sayfaların yaklaşık olarak 1500’den daha az DOM öğesi içermesi önerilmektedir.
Kullanılmayan, küçültme yapılmamış, sıkıştırılmamış, derlenmemiş ve ön bellek kullanılmayan siteler bu hatayı almaktadır.Bu durumda sayfa açılış süresini etkilemektedir.
Bir web sitesinin tasarımı,okunabilirliği ve erişebilirliği göz önüne alındığında oluşturulan görsel bir tasarım özellik olduğu söylenebilir. Fakat her yazı tipi yüklenmesi gereken ek bir kaynak olarak kabul edilmektedir. Bazen yazı tiplerinin yanlış kullanımı, yüklenme süresinin uzamasına sebep olmaktadır.
İçerik yönetim sistemi kullanılıyorsa kullanılan 3. parti eklentilerin sayısı azaltılmalıdır.Sisteme daha az yük getiren hafif eklentiler tercih edilmelidir.Eklentinin fazla olması güncelleme konusunda sorunlar çıkarabileceği gibi site hızını da etkilemektedir.
Genellikle reklamları veya videoları görüntülemek ve sosyal medya ile entegre etmek için kullanılır.Sayfa yüklenir yüklenmez üçüncü taraf yazılım yüklemeleri yüklemektedir ancak bu,sayfa yüklemesini gereksiz yere yavaşlatabilir.
Bu yöntemler tarayıcıların ilgili alan tarayıcı üzerinde tekrar render etmesine sebep olduğu için minör seviyede sayfanın ekranda tam anlamıyla yüklenmesini geciktirmektedir.Bu nedenle sebep her ne olursa olsun Javascript ile bu yöntemle veri basmamaya özen gösterilmelidir.
Her zaman resimlere ve video öğelerine nitelikler eklenmelidir width ve height ile boyutlandırılmalıdır.Alternatif olarak CSS en boy oranı kutuları ile ayrılabilir.Bununla görüntü yüklenirken tarayıcının belgede doğru miktarda alan ayırmasını sağlamaktadır. Artık modern tarayıcılar görüntülerin varsayılan en boy oranını bir görüntünün genişlik ve yükseklik özelliklerine göre ayarlamaktadır.