Sayfa Yükleme Hızını Optimize Etmek 6 Öneri

Dengeli beslenmenin büyük bir savunucusuyum. Dengeli beslenmenin bizim için ne kadar önemli olduğunu hepimiz biliyoruz. Dengeli beslenmenin bazı temel bileşenleri olduğunu hepimiz biliyoruz. Dengeli beslenme sizi sağlıklı tutar. Sağlıklı kalmak için, aralarında yeterli aralıklarla dengeli beslenmeniz gerekir. Dengeli bir diyetin bileşenleri şunları içerir: karbonhidratlar, proteinler, vitaminler, yağlar, mineraller, su. Dengeli beslenme konusunda neden bu kadar endişeliyim? Neden sadece uzun uzadıya konuşuyorum?

Dengeli beslenme kavramını vurgulamamın nedeni, önlemenin tedaviden daha iyi olduğuna inanmamdır. Şişman bir insan, fiziksel veya duygusal her yönden her zaman risk altındadır. Şişman olmakla ilgili algı hiçbir zaman “sağlıklı” olarak görülmez.

Şimdi, bir web sitesinin “şişman” olup olmadığını hayal edin. Elbette etkilenecek ilk şey hızı olacaktır. Şişman ve yavaş web sitesi sorunu kuruluşların performansını engellemeye devam ediyor ve sorun büyük işletmeleri rahatsız etmeye devam ediyor. Şişman bir web sitesi sağlıklı değildir. Şişman bir web sitesi tembeldir. Şişman ve yavaş bir web sitesi hiç iyi değil. Kimse şişman ve yavaş bir web sitesini sevmez. ŞİŞMAN VE YAVAŞ BİR WEB SİTESİ KÖTÜ BİR WEB SİTESİDİR!

Bu blogda, bir web sitesinin yavaş performansının ardındaki nedenlerin ayrıntılı bir açıklamasını sunacağım. Web sitesinin “şişmanlığına” ve “yavaşlığına” katkıda bulunan faktörleri de tartışacağım. Son olarak, bir web sitesinin performansı için ciddi bir tehdit oluşturmaya devam eden bu konuyla ilgili önerilerde bulunacağım.

Bir web sitesinin (yavaş) performansını etkileyen faktörler

Belirli bir web sitesinin performansını etkileyen birçok farklı faktör vardır. Bu bölümde, bu faktörleri ayrı başlıklar altında tek tek vurgulayacağım ve sözde “egzersiz rejimi” – web geliştiricilerinin web sitelerinin performansının bozulmamasını sağlamak için almaları gereken önlemler. Başlamak için web sitenizin performansını  Cloudways’in Sayfa Deneyimi Denetleyicisi aracıyla analiz edin veya Google Developers’ın Page Speed ​​Insights’ını  kullanabilirsiniz  . Bu araç bize web sitesi performansı için en iyi uygulamaları sağlar.

Google PageSpeed ​​Insights Puanınızı Nasıl Artırırsınız? 11 Yolu

Artırılmış Sayfa Yükleme Süresi

İster inanın ister inanmayın, tüm web sitelerinin %55’i ya şişman ya da yavaş. Bu gerçekten yıldırıcı bir endişe. Bu, başlatılan web sitelerinin yarısından fazlasının, tek bir sayfanın yüklenmesi için gereken yükleme süresi göz önünde bulundurularak optimize edilmediği anlamına gelir. Bir web sitesi ne kadar uzun sürerse ziyaretçileri için o kadar can sıkıcı olacaktır. Bugünkü duruma göre, bir web sitesinin yüklenmesi yaklaşık 7,25 saniye sürüyor (medyan değer), bu da bir ziyaretçinin beklentilerinin çok ötesinde. Bu istatistiğin aksine, ziyaretçilerin %65’i bir web sitesinin sadece 2 saniyede yüklenmesini beklemektedir.

KISSMetrics tarafından yapılan bir araştırma raporuna göre , site yükleme süresindeki 1 saniyelik gecikmenin aşağıdaki etkileri vardır:

• Sayfa görüntülemelerini %11 azaltır
• Dönüşümü %7 ila 15 oranında azaltır
• Ziyaretçi memnuniyetini %16 azaltır
• Ziyaretçilerin %40’ından fazlası, ortalama bir web sitesinin yüklenme süresi hakkında olumsuz bir görüşe sahiptir.

Yukarıdaki istatistikler yalnızca mobil uyumlu olmayan web sitelerini kapsar.

Mobil duyarlı web sitelerinin istatistikleri söz konusu olduğunda, yukarıdakiyle aynı hikayeyi anlatırlar. Web sitelerinin sadece %28’inin mobil uyumlu olduğu bir gerçektir. Akıllı telefon kullanıcılarının %60’ından fazlası bir web sitesinin yüklenmesinin 4 saniyeden kısa sürmesini bekliyor. Web sitesi kullanıcılarının %85’i, web sitelerinin mobil cihazlarda masaüstü bilgisayarlara kıyasla daha hızlı yüklendiği görüşündedir.

öneriler

Bir web sitesinin performansı, sayfa yükleme hızıyla ölçülür. Açık olan bir şey var ki, web sayfalarınızı tüm engelleri kaldıracak ve sayfa yükleme hızlarını artıracak şekilde optimize etmeniz gerekecek

Web sitelerinin çoğu değişmeyen statik kaynaklara sahiptir. Bu statik kaynaklar, resim dosyalarını, CSS dosyalarını, Java Script dosyalarını vb. içerir. Bu dosyaların yüklenmesi çok zaman alır. Bu dosyaları önbelleğe almak gereklidir. HTTP sunucularıyla optimize edilmiş önbelleğe alma işi sizin yerinize yapacaktır.

Optimize edilmiş önbelleğe almanın maksimum faydalarını elde etmek için, tüm sunucuları özelleştirilmiş başlıklarla ayarlamanız ve tüm statik kaynakları orada tutmanız gerekir. Statik kaynakları asla önbelleğe almayan bazı tarayıcılar vardır.

Tarayıcı önbelleğinden yararlanmak için şunları yapmanızı öneririz:

• Tüm statik kaynaklar için agresif önbelleğe almayı ayarlayın.
• Dinamik önbelleğe alma için parmak izi kullanmayı unutmayın .
• Internet Explorer için başlığı doğru ayarlayın.
• Mozilla Firefox’ta çakışan URL’lerden kaçının.

Bir HTTP sunucusu kullanıyorsanız, kaldıraçlı proxy önbelleğe almayı kullanabilirsiniz. Tercihen size şunları öneriyoruz:

• Tarayıcıda sorgu dizeleri kullanmayın.
• Proxy önbelleğe alma için tanımlama bilgileri ayarlayan statik kaynakları kullanmayın.
• CSS ve JS dosyalarını önbelleğe almadan önce sorunlara dikkat edin.

 

Analitik Komut Dosyaları

Sayfa kodu ve kodun nasıl çalıştığı dahil olmak üzere web sitesi analitiğini dikkate almanız gerçekten önemlidir. Bir web sitesini barındırmaya karar vermeden önce, kodun perde arkasında nasıl çalışacağını her zaman aklınızda bulundurmalısınız. Google Analytics (GA) kullanıyorsanız, bu komut dosyaları için endişelenmenize gerek yok. Google, bir web sitesini yüklemek için eşzamansız izleme mekanizmasını kullanır. Canlı ziyaretçi verisi sağlayan diğer analitik servisler için asenkron takip mekanizması uygulanmaz. Web sitenizin daha verimli olmasını istiyorsanız, ziyaretçi verilerinizi sergilemek istemiyorsanız, bu sözde analitik komut dosyalarından kurtulun.

öneriler

Kod satırı sayısı web sitesinin ağırlığı ile doğru orantılıdır. Ağır komut dosyaları, şişman ve yavaş web siteleri oluşturma eğilimindedir. Bu soruna nasıl karşı koyulur? Merak etme! Sizin için zaman içinde test edilmiş bazı önerilerimiz var.

Gidiş-dönüş sürelerini (RTT) en aza indirin

Bir sunucuya sorgu gönderdiğinizde ve sunucu sorgunuzun yanıtını getirdiğinde her zaman bir zaman gecikmesi faktörü söz konusudur. Buna gidiş-dönüş süresi denir. İndirilen dosyalara veya aranan sayfa sayısına bağlı olarak web sitenizin yavaşlamasına katkıda bulunan önemli bir faktördür. RTT’yi azaltmak için aşağıdaki yöntemleri kullanabilirsiniz:

DNS aramalarını en aza indirin

Bir web sitesi barındırmak, adım adım ilerleyen bir süreçtir. Bir web sitesini barındırmadan önce, ana bilgisayar adlarını tanımlamanız gerekir. Daha az sayıda benzersiz ana bilgisayar adına sahip olmak, RTT’yi azaltmak için faydalıdır. Şunları yapmanızı öneririz:

• Eksiksiz URL’ler kullanın, ancak ana bilgisayar adlarını mümkün olduğunca kullanmaktan kaçının.
• JS dosyaları için, ana belgede kullanılanla aynı ana bilgisayar adını kullanın.

 

Yönlendirmeleri en aza indirin

Bir URL’yi yeniden yönlendirmek kötü bir uygulama değildir. Web siteleri, ziyaret edilen sayfaları takip etmek amacıyla bir URL’den diğerine yeniden yönlendirilir. Yönlendirmeler, belirli bir web sitesinde kullanıcı dostu yaklaşım için birden fazla alana izin verir. Ama bir sorun var! Daha fazla sayıda yönlendirme, genel sayfa yükleme hızını etkileyen yanıt süresi gecikmelerinin acısına katkıda bulunur. Buna karşı koymak için şunları öneriyoruz:

• Kullanıcı tarafından yazılan her URL için, sunucu yeniden yazma işlemlerini kullanın.
• Arka planda web sitesi trafiğini takip edin.
• JS veya Meta yönlendirmeleri yerine HTTP (301 veya 302) yönlendirmelerini kullanın.

 

Kötü isteklerden kaçının

Kırık bağlantılar web siteniz için kötüdür. Onlardan kaçınmak daha iyidir. Yasak istek 404 /414, hatalı istek örnekleridir. Bozuk linkler için yönlendirme kullanmamanız tavsiye edilir.

Harici JavaScript’i birleştirin

JavaScript dosyaları, sayfa yükleme hızınızı engeller. Harici JavaScript dosyalarını mümkün olduğunca az dosyada birleştirmek size çok zaman kazandıracaktır. Şunları yapmanızı öneririz:

• JS dosyalarını optimize etmek için JS küçültme tekniklerini kullanın.
• JavaScript dosyalarının belge başlığında doğru konumda tutulduğundan emin olun.

 

Harici CSS’yi birleştirin

Tıpkı JavaScript dosyaları gibi, harici Basamaklı Stil Sayfaları (CSS) da bir web sitesinin hızını yavaşlatırken onu şişmanlatmaya katkıda bulunur. Harici CSS dosyalarını mümkün olduğunca az sayıda dosyada birleştirmek, çok sayıda RTT’yi azaltacaktır. Öneririz:

• Stil sayfaları için bölümler oluşturmak üzere optimizasyonu kullanın.
• JavaScript dosyalarının belge başlığı içinde doğru konumda tutulduğundan emin olun

 

CSS karakterlerini kullanarak görüntüleri birleştirin

Çok fazla resim dosyası web sayfanız için zararlıdır. Sadece web sitenizin performansını yavaşlatırlar. Maksimum web sitesi hızı elde etmek için bunları mümkün olduğunca az dosyada birleştirmeniz gerekir. Şunları yapmanızı öneririz:

• Bir sayfaya yerleştirilecek görüntüleri birleştirin.
• Önce GIF ve PNG dosyalarını seçin.
• Önbelleğe alınabilir görüntüleri öncelikli olarak birleştirin.
• SpriteMe gibi canlandırma hizmetini kullanın.
• Görüntülerdeki boş alanları en aza indirin.
• Aynı renk düzenine sahip görüntüleri birleştirin.

 

Stillerin ve betiklerin sırasını optimize edin    

Stillerin ve komut dosyalarının daha iyi paralelleştirilmesi için bunları optimize etmeniz gerekir. Optimizasyon, web sitenize birkaç dakika içinde açılması için gereken hızı verir. Size şunları öneriyoruz:

• Harici komut dosyalarından önce harici stil sayfalarına öncelik verin.
• Satır içi betiklerden önce diğer kaynakları yönetin.

 

Document.write’dan kaçının

Harici kaynaklar elde etmek için işlevin kullanılması, document.write()bir web sayfasının yüklenmesi için gereken toplam süreyi artıracaktır. Şunları yapmanızı öneririz:

• HTML’deki tüm kaynaklardan doğrudan başlıkta bahsedin.
• Eşzamansız kaynaklar kullanın.
• Dostça kullanın iFrames.

 

Mümkün olduğunda CSS @import’tan kaçının    

Tıpkı document.writeişlev gibi, harici stil sayfası için CSS @importişlevi de web sitenizin sayfa yükleme hızını yavaşlatır. Şunları yapmanızı öneririz:

• <link>CSS yerine etiketi kullanın @import.

 

Eşzamansız kaynakları tercih et

Web sayfanızı hızlı ve herhangi bir tıkanıklık olmadan yüklemek istiyorsanız, size şunları öneririz:

• Bir komut dosyası DOM öğesi kullanın.
• Google Analytics’i eşzamansız olarak yükleyin.

 

Ana bilgisayar adları arasında indirmeleri paralelleştirin

Web sitenize kaynak sunmak için iki farklı ana bilgisayar adı kullanıyorsanız, indirilen sayfaların paralelleştirilmesini artıracaktır. Birden çok ana bilgisayar adı kullanabilirsiniz, ancak şunları yapmanızı öneririz:

• Paralelleştirilebilir kaynakları ana bilgisayar adlarına eşit olarak dağıtın.
• Harici JS dosyalarının paralel indirmeleri engellemediğinden emin olun.
• Aynı ana bilgisayar adından bir kaynak kullanın.

araç çubukları

Çok fazla aşçı suyu bozar. Aynen bunun gibi, çok fazla araç çubuğu web sitesini bozar. Araç çubukları, web sitenize site çapında işlevsellik eklemek için kullanılır, ancak işlevsellikler gerektiği gibi tek tek sayfalara eklendikçe araç çubuklarını kullanma eğilimi azalmaktadır. Birçok araç çubuğu bazen baş ağrısına dönüşebilir.

öneriler

Yeni bir internet oturumu başlatmak için her yeni sekme veya araç çubuğu etkinleştirildiğinde, tarayıcının bir web sayfasını yüklemesi daha fazla zaman alır. İşlevselliklere sahip araç çubuklarını yalnızca ihtiyaç duyulduğunda kullanmanız veya araç çubuklarını hiç kullanmaktan kaçınmanız önerilir.

İstek ek yükünü en aza indirin

Bir seferde üretilen çok fazla istek, bir web sayfasının yüklenme süresi üzerinde olumsuz bir etkiye sahip olacaktır. Benzer şekilde, çok fazla araç çubuğu web sitesinin hızını yavaşlatma eğilimindedir. Bu sorunu çözmek için, TCP protokolü yavaş başlatma algoritmasını kullanır. Sayfanın hızlı yüklenmesini sağlamak için yüklenen baytları minimumda tutmanızı öneririz.

İstek boyutunu en aza indirin

Hızlı sayfa yüklenmesini sağlamak için çerez sayısını minimumda tutmalısınız. HTTP isteği, 1.500 bayt sınırıyla 1 paketi geçmemelidir. Şunları yapmanızı öneririz:

• Çerez yükünün çoğu için sunucu tarafı depolamayı kullanın.
• Kullanılmayan veya yinelenen çerez alanlarını kaldırın.

 

Çerezsiz bir alandan statik içerik sunun

Kaynakları getirmek için çerezsiz bir etki alanı kullanmak, sonuçta web sayfasının yüklenme süresini azaltır. Bir resim dosyasını indirmek için çerez gerekmediği bir gerçektir. Bunun nedeni, görüntü dosyasının bir tür statik içerik olmasıdır. Alternatif bir yol, kaynakları getirmek için çerezsiz sunucuyu destekleyebilecek CDN’yi kullanmaktır. Ancak şunları yapmanızı öneririz:

• Proxy önbelleğe almayı etkinleştirin.
• Çerezsiz etki alanından erken yüklenmiş harici JS dosyaları sunmayın.

 

Güven Mühürleri

Güvenlik, web sitelerinin en önemli sorunlarından biridir. Neredeyse tüm web siteleri bilgisayar korsanlarına veya virüs saldırılarına karşı savunmasızdır. Ziyaretçilerin çoğu, hız ve performansı değiştirmeden web sitelerini korumak için hangi güven mühürlerini, yani anti-virüs yazılımını kullanmaları gerektiğini bilmediklerinden, sorun gözetimsiz kalır. Güven mühürlerinin web sitenizi yavaşlatma eğiliminde olduğu bir gerçektir. Baymard Institute tarafından yapılan bir ankete göre, ankete katılanların %36’sı Norton’u, %23’ü ise McAfee’yi tercih ediyor. İlginç olan, bu katılımcıların anti-virüs yazılımının web sitesinin performansını nasıl etkilediği hakkında herhangi bir teknik bilgiye sahip olmamasıdır. Ancak bir şey açık: koruyucu kalkan daha ağır, web sitesi daha yavaş. Şimdi, mevcut çeşitli güven mühürleri arasından seçim yapmanızı bekleyen zorluk burada.

Öneri

Yalnızca en çok ihtiyaç duyulan güven mühürlerini kullanmanızı öneririz.

Reklam Ağı JS’si

Hiç web sitenize bir reklam yerleştirmeyi denediniz mi? Ne oluyor? Yüklemek zaman alır.

Daha fazla reklam, bir web sitesinin yüklenmesi için daha fazla zaman demektir. Birden çok reklam, web siteleri için milyonları getirebilir, ancak bunun zaman ve hız pahasına olacağını unutmayın.

Öneri

Minimum miktarda reklam yayınlamanızı ve pop-up kullanmaktan kaçınmanızı öneririz.

Sosyal Düğmeler

Daha önce de belirtildiği gibi, sosyal düğmelerin kullanılması sayfa yükleme hızı süresini artırır. Görüşümün arkasındayım. Ama bir dakika bekle. Sosyal düğmeler de web sitenizi engelleyebilir. Hayati bir faktör olarak sayılan bir şey hedef kitledir. Hiçbir web sitesi herkes için değildir. Bu nedenle, web sitenizi sosyal medya dostu hale getirmeden önce kimi hedefleyeceğinizi düşünün. Farklı sosyal ağ sitelerinde farklı kitleler bulunur, hangisinin ihtiyaçlarınıza en uygun olduğunu belirlemeniz gerekir. Viral olmak için tüm sosyal medyayı seçmenize gerek yok. Aslında bu kötü ve yararsız bir taktiktir.

Zengin medya

Yüksek kaliteli resimler ve videolar web siteleri için iyidir. Ancak bunlardan çok fazla olmaması gerekir. Dikkat! Gerçek tuzak onlar. Bunlar web sitenizi yokuş aşağı götürebilir. Bunun nedeni, yüksek kaliteli resimlerin ve videoların web sitenizi şişmanlatma ve sonunda yavaşlatma eğiliminde olmasıdır. İnfografiklerin günümüz web sitelerinin içerik karışımında önemli bir bileşen olduğu bir gerçektir. Bu infografikler, taktik olarak kullanılırlarsa web sitelerinize değer katabilir. Aynı şey video eğitimleri için de söylenebilir. Ancak infografikler ve videolar da doğru kullanılmazsa geri tepebilir.

Öneri

Medya dosyalarınızı daha küçük boyutta kullanmanızı öneririz. (Küçük boyutlar için HD kalitesinde görüntüler kullanmanıza gerek yoktur.) Ayrıca bir CDN hizmetine yatırım yapabilirsiniz.

Web Sitenizi Uygun Hale Getirin!

Bu blog gönderisinde amacımız, web sitelerini yavaş ve şişman yapan yaygın rahatsızlıklar hakkında eğitim vermekti. Her sorunun bir çözümü vardır. Fit olmak için bir spor salonuna yazılmalıdır. Benzer şekilde, web sitenizi doğru yola sokmak ve hızlı performans sağlamak için bir tür rejim tasarlamanız gerekir.  Apache+Varnish+Nginx+Memcached. Bu formül, web sitelerinin uygun, hızlı ve güçlü olmasına yardımcı olur.