Page Speed (Sayfa Hızı) Terimleri ve Cozumleri

Sayfa hızı olcum araclarından bahsetmiştik. Şimdi de, sayfa hızı ile ilgili kapsamlı bir dosya hazırladık. Bu yazımızda en cok karşılaşılan page speed terimlerinin ne olduğunu, sayfa hızı anlamında onem derecesi ve nasıl duzeltileceğine dair detaylar bulacaksınız.


İşte en sık rastladığımız ( karşılaşma sıklığına gore sıralanmıştır, detaylara ulaşmak icin başlıkta bulunan linke tıklayınız ) sayfa hızı problemleri :


Defer Parsing of JavaScript ( Önem: 6/10 Kaynak : Javascript )


Nedir : JavaScript kodunun içine “defer” etiketi konulmasıdır ve bu sayede de javascript dosyaları sayfada en son açılarak siteyi hızlandırır.


Cozum : JavaScript kodlarına defer etiketi eklenmesi.


Uzman Yorumu : Bu konu her zaman sorun oluşturan bir durumdur. Genel olarak sitenin yapısına gore yapılması gerekmektedir. Orneğin site acıldığında loading ekranı olsun istiyorsak bu script defer edilemez.


Leverage Browser Caching ( Önem: 6/10 Kaynak : Server )


Nedir : Tarayıcının ön belleğe alma özelliğinden faydalanarak görseller, CSS, HTML veya JavaScript gibi dosyaları sayfa her ziyaret edildiğinde yeniden yuklenmeden tarayıcı on belliğinden yuklenmesidir.


Cozum : .htaccess dosyasına belirli kodların eklenmesi.


Uzman Yorumu : Sunucularımızda genel olarak bunu ayarlıyoruz. Statik icerikler icin zaman aşımı cloudflare ile de hazırlanıyor. Ancak bu uyarı genel olarak 3. parti yazılımlardan geliyor. Burada onemli olan kullandığımız iceriklerde versiyonlamayı kaldırmak. Yada ismi değiştirmek.


Minimize Request Size ( Önem: 8/10 Kaynak : Content )


Nedir : Atılan istekleri azaltmak.


Cozum : CDN kullanımı.


Uzman Yorumu : Form gonderimlerini get yerine post ile yapmak ve bunları minimum derecede kullanmak. Gereksiz bilgilerden kacınmak.


Serve Resources from a Consistent URL ( Önem: 10/10 Kaynak : Content )


Nedir : URL yapısında sitenin çalışmasında bir sorun olmadığı halde yanlış istek davranışından dolayı sitemiz olması gerektiğinden geç açılacaktır.


Cozum : Sitenizin varsayılan adresi ile eklemiş olduğunuz URL yapısı farklı olduğu durumlarda bu hatayı duzeltmeniz istenir.


Uzman Yorumu : Burada yapılması gereken tutarlı url vermektir. Orneğin aynı resim icin hem /images/example.jpg hem de https://domain.com/images/example.jpg verilirse ikiside ayrı istek olarak değerlendirilir. Bunları tam domain olarak cağırmak daha doğrudur.


Serve Scaled Images ( Önem: 6/10 Kaynak : Images )


Nedir : Web sitesinin kullanıcısı 400 x 400 boyutlu resim yuklemiş ancak, HTML / CSS kodlarında resim boyutu 40 x 40 olarak gosteriliyor ise bu, tarayıcının once buyuk dosyayı indirmesi ve goruntulemeden once olceklendirmesi gerektiği anlamına gelir.


Cozum : Daha verimli bir yontem, goruntuyu 40 x 40’a yeniden boyutlandırmaktır. Boylece tarayıcının goruntuyu verimsiz bir şekilde indirip olceklendirmesi gerekmez.


Uzman Yorumu : Bu responsive olmayan işler icin oldukca kolaydır ancak değişken yapılarda bunu ayarlamak icin src set kullanılmalıdır. Masaustu icin 4 resim yanyana olarak 250px lik istenir ve mobil icin 400px tek resim istenirse bunu ancak srcset ile ayarlamak gerekir ve oldukca karmaşık bir kullanım oluşturmaktadır.


Enable Keep-Alive ( Önem: 8/10 Kaynak : Server )


Nedir : Keep-alive aynı TCP bağlantısıyla dosyaları gondererek hızı artırmak icin kullanılır.


Cozum : Keep-Alive ozelliğini etkinleştirmek icin aşağıdaki kodu .htaccess dosyanıza eklemeniz yeterlidir.


Uzman Yorumu : Server tarafında ayarlama gereklidir.


Combine Image Using CSS Sprites ( Önem: 3/10 Kaynak : Images )


Nedir : Sitenizdeki resimler tek kaynakta birleştirilerek site acılışı esnasında pek cok resmi ayrı ayrı cağırmak yerine tek kaynaktan resimler istendiği icin fark edilir derecede hız artışı sağlar.


Cozum : Css ile resimleri birleştirmek.


Uzman Yorumu : Bu yapı resimler icin değil css ile cağırılan arkaplan resimleri icin gecerli. Site yayına alınırken yapılabilir. Oldukca faydalı bir uygulamadır.


Minify a Javascript ( Önem: 8/10 Kaynak : Js )


Nedir : İnternet sitelerinde Ajax, dolayısıyla Javascript kutuphanelerinin kullanımının artmasıyla sayfaların yuklenme zamanı bir hayli artıyor. 25-30 kb’lık bir HTML dosyası icin 80-90 kb Javascript ve CSS dosyası kullanılıyor.


Cozum : Css ve Javascript dosyalarımızdaki boşluk ve yorum satırlarını temizleyerek dosya boyutlarını duşurebiliriz.


Uzman Yorumu : Yapılması geliştirme suresinde biraz zorluk oluştursa da yapılmalıdır.


Minimize Redirects ( Önem: 5/10 Kaynak : Content )


Nedir : Yonlendirmelerin fazla olmasına denir.


Cozum : Yonlendirmeleri azaltmak ya da kısaltmak.


Uzman Yorumu : Genel olarak http olanların https veya www yonlendirmesinden kaynaklıdır. Bunu her seferinde tek yere yonlendirilmek gereklidir.


Add Expires Headers ( Önem: 2/10 Kaynak : Server )


Nedir : Tarayıcınızın en cok kullanılan dosyaları onbellekleme yapmasını sağlayan bir fonksiyondur.


Cozum : .htaccess dosyasına belirli kodların eklenmesi.


Uzman Yorumu : Sunucularımızda genel olarak bunu ayarlıyoruz. Statik icerikler icin zaman aşımı cloudflare ile de hazırlanıyor. Ancak bu uyarı genel olarak 3. parti yazılımlardan geliyor.


Make fewer HTTP Requests ( Önem: 8/10 Kaynak : Content )


Nedir : Sayfamızda bulunan CSS dosyalarını tek bir dosya altında toplamamızı isteyen uyarıdır.


Cozum : Css dosyalarını birleştirmek.


Uzman Yorumu : Yapılması geliştirme suresinde biraz zorluk oluştursa da yapılmalıdır.


Use a Content Delivery Network (CDN) ( Önem: 9/10 Kaynak : Server )


Nedir : CDN, statik iceriğinizin (resimler, CSS, JavaScript, videolar ve benzeri) ziyaretcinize en yakın yerden gondererek ve hızlı bir şekilde dağıtımını sağlayarak sunucu yanıt suresini buyuk olcude azaltır.


Cozum : CDN kullanımı.


Uzman Yorumu : Cloudflare kullanımı bu sorunu cozmektedir. Ayrıca sunucu yukunu ve trafiğini azaltır.


Use Cookie-free Domains ( Önem: 5/10 Kaynak : Cookie )


Nedir : Her dinamik altyapılı (IIS, Apache vb) web sunucu otomatik olarak state icin cookie bırakır.


Cozum : Tum dosyaları actığımız bu subdomain uzerinden cağırmak.


Uzman Yorumu : Server tarafında golge yonlendirme ile yeni yazılımlar icin yapılabilir. Resimler cağırılırken mp_asset ile cağırılması gerekmektedir.


Reduce DNS lookups ( Önem: 8/10 Kaynak : Content )


Nedir : DNS aramaları, bir ana bilgisayara ilk istekleri geciktirir. Cok sayıda farklı ana bilgisayara istek yapmak performansa zarar verebilir.


Cozum : Ana makinelerinin sayısını azaltın ayrıca harici bir kaynağa referans verilen dosyaları indirin ve bunları kaynak sunucunuzda veya CDN'de barındırın.


Uzman Yorumu : 3. parti yerlerden cok fazla istek atılmaması gerekir. JS ve CSS kaynaklarını websitesinde tutmak bu durumu azaltır. Ancak youtube videosu, twitter apisi, facebook eklentisi bunları oldukca arttırır ve site hızını duşurur. Ayrıca eklenen mouseflow, analytics gibi uygulamalar bunu etkiler.


Minify JavaScript and CSS ( Önem: 8/10 Kaynak : Css / Js )


Nedir : Css ve Javascript dosyalarımızdaki boşluk ve yorum satırlarını temizleyerek dosya boyutlarını duşurebiliriz.


Cozum : Css ve Javascript dosyalarını kucultmek.


Uzman Yorumu : Yapılması geliştirme suresinde biraz zorluk oluştursa da yapılmalıdır.


Optimize Images ( Önem: 8/10 Kaynak : Images )


Nedir : Sayfadaki goruntulerin gorsel kalitelerini onemli olcude etkilemeden dosyalarını kucultmek icin optimize edilebileceğini tespit ettiğinde tetiklenir.


Cozum : Vektor bicimlerini tercih edin, svg varlıklarını kucultun ve sıkıştırın, en iyi tarama resim bicimini secin, tarama bicimleri icin en uygun kalite ayarlarıyla deneyler yapın, gereksiz resim meta verilerini kaldirin, olceklenmiş resimler sunun ve otomatikleştirin.


Uzman Yorumu : Yapılması geliştirme suresinde biraz zorluk oluştursa da yapılmalıdır. Ancak bu sadece bizimle ilgili bir durum değildir. Slider resimleri muşteri tarafından eklendiğinde zamanla burada yeni resimler sorun cıkarmaktadır.


Inline Small Javascript ( Önem: 8/10 Kaynak : Js )


Nedir : JavaScript dosyalarına giriş yapmak, bu kucuk dosyaların alınma yukunu kaydedebilir.


Cozum : JavaScript’i sıralamak icin iyi bir alternatif, harici JavaScript dosyalarını birleştirmektir.


Uzman Yorumu : Yazılımla oluşturulmayan scriptlerin dosyada yer alması gerekmektedir.


Remove Query Strings from Static Resources ( Önem: 8/10 Kaynak : Content )


Nedir : Sorgu dizelerinin siteden kaldırılması gerekmektedir.


Cozum : Kod ekleyerek kaldırma işlemi, W3 Total Cache Remove query strings ayarları, Remove Query Strings From Static Resources eklentisi, Query Strings Remover eklentisi, Speed Booster Pack işlemleri ile cozumleyebiliriz.


Uzman Yorumu : Yapılması geliştirme suresinde biraz zorluk oluştursa da yayın sırasında yapılmalıdır.


Enable Gzip Compression ( Önem: 9/10 Kaynak : Server )


Nedir : Gzip, web sayfalarınızı ve stil sayfalarınızı tarayıcıya gondermeden once sıkıştırır. Bu, dosyalar cok daha kucuk olduğu icin aktarım suresini buyuk olcude azaltır.


Cozum : Tarayıcıya aktarıldıkları hızı artırmak icin sunucunuzdan gonderilen dosyaların boyutunu azaltın. Sayfaların boyutlarını da % 70'e kadar azaltın. Bu sayfa hızını artırır. Maliyet-fayda oranı yuksektir. Htaccess dosyalarına veya sunucu yonetim dosyalarına erişim gerekir.


Uzman Yorumu : Sunucu tarafında yapılması zorunludur.


Compress Components With Gzip ( Önem: 8/10 Kaynak : Server )


Nedir : Sıkıştırma, HTTP yanıtının boyutunu azaltarak yanıt surelerini azaltır.


Cozum : Mumkun olduğu kadar cok dosya turune sahip olmak, sayfa ağırlığını azaltmanın ve kullanıcı deneyimini hızlandırmanın kolay bir yoludur.


Uzman Yorumu : Yazılım tarafında zorunludur.


Avoid URL Redirects ( Önem: 5/10 Kaynak : Content )


Nedir : Fazla URL yonlendirmeleri kullanılmasından kaynaklı uyarıdır.


Cozum : Sayfa yonlendirmelerine ek gecikmeler eklediklerinden URL yonlendirmelerini kullanmaktan kacının.


Uzman Yorumu : Genel olarak http olanların https veya www yonlendirmesinden kaynaklıdır. Bunu her seferinde tek yere yonlendirilmek gereklidir.