İçindekiler

    Daha önceki bu yazımızda, sayfa hızı ölçüm araçlarından bahsetmiştik. Şimdi de, sayfa hızı ile ilgili kapsamlı bir dosya hazırladık. Bu yazımızda en çok karşılaşılan page speed terimlerinin ne olduğunu, sayfa hızı anlamında önem derecesi ve nasıl düzeltileceğine dair detaylar bulacaksınız.

    İşte en sık rastladığımız ( karşılaşma sıklığına göre sıralanmıştır, detaylara ulaşmak için 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.

    Çözüm : JavaScript kodlarına defer etiketi eklenmesi.

    Uzman Yorumu : Bu konu her zaman sorun oluşturan bir durumdur. Genel olarak sitenin yapısına göre yapılması gerekmektedir. Örneğin site açı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 yüklenmeden  tarayıcı ön belliğinden yüklenmesidir.

    Çözüm : .htaccess dosyasına belirli kodların eklenmesi.

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

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

    Nedir : Atılan istekleri azaltmak.

    Çözüm : CDN kullanımı.

    Uzman Yorumu : Form gönderimlerini get yerine post ile yapmak ve bunları minimum derecede kullanmak. Gereksiz bilgilerden kaçı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.

    Çözüm : Sitenizin varsayılan adresi ile eklemiş olduğunuz URL yapısı farklı olduğu durumlarda bu hatayı düzeltmeniz istenir.

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

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

    Nedir : Web sitesinin kullanıcısı 400 x 400 boyutlu resim yüklemiş ancak, HTML / CSS kodlarında resim boyutu 40 x 40 olarak gösteriliyor ise bu, tarayıcının önce büyük dosyayı indirmesi ve görüntülemeden önce ölçeklendirmesi gerektiği anlamına gelir.

    Çözüm : Daha verimli bir yöntem, görüntüyü 40 x 40’a yeniden boyutlandırmaktır. Böylece tarayıcının görüntüyü verimsiz bir şekilde indirip ölçeklendirmesi gerekmez.

    Uzman Yorumu : Bu responsive olmayan işler için oldukça kolaydır ancak değişken yapılarda bunu ayarlamak için src set kullanılmalıdır. Masaüstü için 4 resim yanyana olarak 250px lik istenir ve mobil için 400px tek resim istenirse bunu ancak srcset ile ayarlamak gerekir ve oldukça 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ı göndererek hızı artırmak için kullanılır.

    Çözüm : Keep-Alive özelliğini etkinleştirmek için 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 açılışı esnasında pek çok resmi ayrı ayrı çağırmak yerine tek kaynaktan resimler istendiği için fark edilir derecede hız artışı sağlar.

    Çözüm : Css ile resimleri birleştirmek.

    Uzman Yorumu : Bu yapı resimler için değil css ile çağırılan arkaplan resimleri için geçerli. Site yayına alınırken yapılabilir. Oldukça faydalı bir uygulamadır. 

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

    Nedir : İnternet sitelerinde Ajax, dolayısıyla Javascript kütüphanelerinin kullanımının artmasıyla sayfaların yüklenme zamanı bir hayli artıyor. 25-30 kb’lık bir HTML dosyası için 80-90 kb Javascript ve CSS dosyası kullanılıyor.

    Çözüm : Css ve Javascript dosyalarımızdaki boşluk ve yorum satırlarını temizleyerek dosya boyutlarını düşürebiliriz.

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

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

    Nedir : Yönlendirmelerin fazla olmasına denir.

    Çözüm : Yönlendirmeleri azaltmak ya da kısaltmak.

    Uzman Yorumu : Genel olarak http olanların https veya www yönlendirmesinden kaynaklıdır. Bunu her seferinde tek yere yönlendirilmek gereklidir. 

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

    Nedir : Tarayıcınızın en çok kullanılan dosyaları önbellekleme yapmasını sağlayan bir fonksiyondur.

    Çözüm : .htaccess dosyasına belirli kodların eklenmesi.

    Uzman Yorumu : Sunucularımızda genel olarak bunu ayarlıyoruz. Statik içerikler için 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.

    Çözüm : Css dosyalarını birleştirmek.

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

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

    Nedir : CDN, statik içeriğinizin (resimler, CSS, JavaScript, videolar ve benzeri) ziyaretçinize en yakın yerden göndererek ve hızlı bir şekilde dağıtımını sağlayarak sunucu yanıt süresini büyük ölçüde azaltır.

    Çözüm : CDN kullanımı.

    Uzman Yorumu : Cloudflare kullanımı bu sorunu çözmektedir. Ayrıca sunucu yükünü 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 için cookie bırakır.

    Çözüm : Tüm dosyaları açtığımız bu subdomain üzerinden çağırmak.

    Uzman Yorumu : Server tarafında gölge yönlendirme ile yeni yazılımlar için yapılabilir. Resimler çağırılırken mp_asset ile çağırılması gerekmektedir. 

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

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

    Çözüm : 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 çok fazla istek atılmaması gerekir. JS ve CSS kaynaklarını websitesinde tutmak bu durumu azaltır. Ancak youtube videosu, twitter apisi, facebook eklentisi bunları oldukça arttırır ve site hızını düşürür. 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ı düşürebiliriz.

    Çözüm : Css ve Javascript dosyalarını küçültmek.

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

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

    Nedir : Sayfadaki görüntülerin görsel kalitelerini önemli ölçüde etkilemeden dosyalarını küçültmek için optimize edilebileceğini tespit ettiğinde tetiklenir.

    Çözüm : Vektör biçimlerini tercih edin, svg varlıklarını küçültün ve sıkıştırın, en iyi tarama resim biçimini seçin, tarama biçimleri için en uygun kalite ayarlarıyla deneyler yapın, gereksiz resim meta verilerini kaldirin, ölçeklenmiş resimler sunun ve otomatikleştirin.

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

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

    Nedir : JavaScript dosyalarına giriş yapmak, bu küçük dosyaların alınma yükünü kaydedebilir.

    Çözüm : JavaScript’i sıralamak için 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.

    Çözüm : 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 çözümleyebiliriz.

    Uzman Yorumu : Yapılması geliştirme süresinde 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 göndermeden önce sıkıştırır. Bu, dosyalar çok daha küçük olduğu için aktarım süresini büyük ölçüde azaltır.

    Çözüm : Tarayıcıya aktarıldıkları hızı artırmak için sunucunuzdan gönderilen 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ı yüksektir. Htaccess dosyalarına veya sunucu yönetim 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 sürelerini azaltır.

    Çözüm : Mümkün olduğu kadar çok dosya türüne 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 yönlendirmeleri kullanılmasından kaynaklı uyarıdır.

    Çözüm : Sayfa yönlendirmelerine ek gecikmeler eklediklerinden URL yönlendirmelerini kullanmaktan kaçının.

    Uzman Yorumu : Genel olarak http olanların https veya www yönlendirmesinden kaynaklıdır. Bunu her seferinde tek yere yönlendirilmek gereklidir. 

                                                                                https://www.aktifhost.net/