• 1

Web Sitenizin Sayfa Yükleme Hızını Artırmak için 8 İpucu

4 ay önce , Okuma süresi 6 dakika.

Web Sitenizin Sayfa Yükleme Hızını Artırmak için 8 İpucu
Temel unsurları ortadan kaldırarak, sitenizin yükleme hızını iyileştirmenin sekiz yolu

1. Görsellerinizi optimize ediniz:

Görüntü dosyası boyutu

Görseller, bağlam eklemenin, karmaşık konuları açıklamanın veya içerik blokları arasında nefes almanın harika bir yoludur. Ancak, ağır resimler sayfanızı yavaşlatacaktır.

Mümkün olan en küçük dosya boyutunu hedeflemelisiniz. Büyük resimler için iyi bir işaret, resim başına 150kb ila 500kb arasındadır . Sonuçta, muhtemelen birkaç resminiz olacak ve hepsi sayfanızın genel boyutuna katkıda bulunacak.

Bunları sıkıştırmanız gerekmektedir  bunun için birçok ücretsiz kullanabileceğiniz programlar bulunmaktadır. Görüntülerinizi sunucunuzdan indirin, sıkıştırın ve yeniden yükleyin.

İpucu: Adlarını, alt özelliklerini ve biçimlerini optimize etme fırsatını kullanın.

Dosya formatı

İçerik oluştururken PNG resimlerinin kullanılması alışılmadık bir durum değildir. Sonuçta, kullanımı daha kolay.

Sorun? Bunlar, yavaş yükleme hızlarına katkıda bulunan ağır görüntü türleridir. Resim uzantıları üzerinde tam bir tartışmaya girmeden, JPG'leri kullanmanızı öneririz. Bunlar, web'deki görüntüler için standart format haline geldi. Kaliteyi kaybetmezler ve dosya boyutları küçüktür.

Not: Çok dikkat çeken yarı yeni bir format WebP'lerdir. Bu format son derece kullanışlı ve JPG'lerden  %33kullanımı daha kolaydır. Dezavantajı, formatın bazı tarayıcılarla hala uyumluluk sorunları yaşıyor olmasıdır.

Resim boyutları

Görüntü çözünürlüğünüz önemlidir. Ancak, kullanıcılarınızın tüm ekran alanlarını kapsamadığı sürece, gerçekten 4000 x 4000 görüntüye ihtiyacınız yoktur.

Ölçekleme sırasında kaliteden ödün vermeyen düzgün bir resim yüklediğinizden emin olun. Yani, 800 x 1200 resimler makalelerde en yaygın olanıdır.

Ek olarak, resimlerinizin boyutlarını doğrudan resim etiketinin içinde belirtmelisiniz. Tarayıcı, yüklenmeden önce görüntü için "kaydetmesi" gereken alanı hesaplayarak sayfanızın CLS'sini (kümülatif mizanpaj kayması) azaltır.

Genişlik ve yükseklik niteliklerini ekleyebilirsiniz. Örneğin:

<! - 640: 360, yani 16: 9 - en boy oranı ayarlayın →

2. CSS ve JavaScript'inizi küçültün

CSS ve JavaScript dosyalarınızı küçültmek, tarayıcının sitenizi göstermesi için ihtiyaç duyduğu her öğeyi yüklemesi için gereken süreyi azaltmak anlamına gelir.

Makineler biçimsel seçimlere duyarlı olmadığından, beyaz boşlukları kaldırarak, yorumları silerek, daha kısa adlar kullanarak ve temelde kodumuzun herhangi bir bölümünü makinelerimizin çalıştırması için gereksiz hale getirerek daha küçük boyutlu dosyalar oluşturabiliriz.

Elbette, üzerinde çalıştığınız gerçek kodu küçültmek istemezsiniz, çünkü okumak neredeyse imkansız hale gelir.

3. Üçüncü taraf komut dosyalarına dikkat edin

Google Analytics gibi araçlar kullanıyorsanız, zaten üçüncü taraf komut dosyalarını kullanıyorsunuzdur.

Bu komut dosyaları, sitenize yeni işlevler eklemenize çok yardımcı olur. Yine de, bunlar hala istemci tarafında oluşturulması veya okunması gereken kod parçacıklarıdır ve sayfa hızının yüklenme süresine katkıda bulunur. Eklediğiniz kodun optimize edildiğinden ve gerekli olduğundan emin olun. Kullanılmayan her şeyi silin.

4. Bir VPS barındırma hizmeti kullanın

Barındırma sağlayıcınızın kullandığı sunucular site hızınız için çok önemlidir. Makineler bir kullanıcının isteğine yavaş yanıt veriyorsa, kullanıcının internet bağlantısı ne kadar hızlı olursa olsun tarayıcı bilgileri yavaşça alacaktır.

Diğer bir faktör de kullandığınız plandır. Barındırma sağlayıcısı aynı sunucuyu birkaç istemci için kiraladığından, bu da düşük trafikli siteler için fazlasıyla yeterli olduğundan, paylaşılan planlar genellikle ucuzdur.

Bununla birlikte, site hızınızı gerçekten iyileştirmeniz gerekiyorsa, sunucunuzdan daha fazla kaynağa erişmeniz gerekecektir. Dahası, sitenizin erişebildiği kaynakların miktarında tutarlılığa ihtiyacınız olacak.

Akla gelen ilk şey özel bir sunucudur. Temelde kendiniz için bir sunucunun tamamını kiralıyorsunuz. Ancak bu pahalı olabilir ve çoğu kullanım durumu için ihtiyacınız olandan çok daha fazlasıdır.

Öyleyse en iyi seçenek nedir? Bir VPS barındırma hizmeti.

Sanal Özel Sunucu, tam olarak göründüğü gibidir. Esasen, barındırma sağlayıcısı, sunucunun işletim sisteminde bir katman oluşturarak size sanal makinenizin kaynakları üzerinde tam kontrol sağlar ve onu diğer kullanıcılardan ayırır. Bu, diğer sitelerin sizden kaynak almasını engeller ve sunucunuzu ihtiyaç duyduğunuz şekilde özelleştirmenize olanak tanır.

5. Bir İçerik Dağıtım Ağı (CDN) kullanın

Yukarıda belirttiğimiz gibi, barındırma hizmetiniz, sitenizin verilerini depolayan ve bir tarayıcı talepte bulunduğunda bunları internet üzerinden ileten bir makineden başka bir şey değildir.

Sitenizin hızı için anlamı, barındırma işleminiz kullanıcıdan ne kadar uzaksa, verilerin teslim edilmesi o kadar fazla zaman alacaktır. İşte burada bir CDN veya içerik dağıtım ağı devreye giriyor.

Basit bir ifadeyle, CND sitede bulunan tüm bilgilerinizi (görüntüler, HTML dosyaları, JSON dosyaları ve daha fazlası gibi) son kullanıcılarınıza en yakın  sunucularından teslim eden dünya çapında bir sunucu ağıdır.

6. JavaScript yüklemesini erteleyin

Siteniz yüklendiğinde, tarayıcı, JavaScript dosyaları dahil olmak üzere web sitenizin ihtiyaç duyduğu her varlığı indirir.

Ancak, birincil odak noktanız, kullanıcınıza sayfada görmek istediği bilgileri sağlamak olmalıdır. Bu nedenle JavaScript'inizi ertelemek, sayfa yükleme sürelerini kısaltmak için çok yararlıdır .

Basit bir ifadeyle, bir dosyanın ertelenmesi, diğer (daha önemli) öğeler yüklenene kadar yüklenmesini engeller. Önce HTML ve CSS'nizin yüklenmesini sağlayabilirsiniz, böylece kullanıcı içeriğe daha hızlı erişebilir ve ancak o zaman komut dosyaları sayfanız için öngördüğünüz ekstra işlevselliği eklemek için yüklenir.

İpucu: Javascript'i verimli bir şekilde yüklemenin bir başka yolu da, gövde etiketini kapatmadan hemen önce komut dosyalarınızı eklemektir. Bu, tarayıcının komut dosyanızı getirip çalıştırmadan önce tüm siteyi ayrıştırmasını sağlayacaktır.

7. Tarayıcı önbelleğini etkinleştirin

Bir kullanıcı web sitenize her eriştiğinde, tarayıcının sayfanızı oluşturan tüm dosyaları indirmesi gerekir. Ya tarayıcının verileri saklamasını sağlayabilirseniz, böylece kullanıcı URL'nizi bir dahaki sefere yazdığında, tarayıcı içeriğini göstermek için ihtiyaç duyduğu tüm bilgilere zaten sahipse? Bunun için mevcut olan varlıklarımız için son kullanma tarihi belirleyerek .htaccess dosyasında tarayıcı önbelleği etkinleştirmemiz gerekir.

Bu, tarayıcıya bu dosyaları ayarlanan zamana kadar saklamasını söyleyecektir.

Not: Bu, geri dönen kullanıcılar için web sitenizin yükleme hızını artırmanın harika bir yoludur.

8. Geç yükleme kullanın

Şimdi ilk kez gelen ziyaretçiler için yükleme süresini kısaltalım, olur mu?

Sayfanın geri kalanını yüklemeden önce tarayıcının ilk olarak sayfanın üst kısmını (ekranın üst kısmındaki) görüntülemesini sağlamak istiyoruz.

Böylelikle sayfanın interaktif olması için tüm resim ve videoların yüklenmesini beklemek yerine, tarayıcı sitenin kullanıcının gördüğü ilk kısmının anında yüklenmesini sağlayacaktır. Bu işlem, tembel yükleme dediğimiz şeydir.

Bununla ilgili harika olan şey , resimlerimizdeki ve iç çerçevelerimizdeki loading özelliğini kullanarak onu yerel olarak uygulayabilmemizdir .

<img src=”myimage.jpg” loading=”lazy” alt=”…” />

<iframe src=”content.html” loading=”lazy”></iframe>

Bu öznitelikler, tarayıcıya öğeleri yalnızca kullanıcı öğeye kaydırdığında ve artık görüntü alanında görünür olduğunda indirmesini söyleyecektir.

Sonuç

Elbette, web sitesi performansını artırmanın tek yolu bunlar değildir.

Aslında, tarayıcıya bazı öğeleri önceden getirmesini söylemek için önceden getirme tekniklerini kullanmak gibi başka yöntemler de vardır . Yine de, bu sekiz adımı geçtikten sonra, web sitenizin sayfa hızı optimalin üzerinde olmalıdır.

Sitenin hızı hemen çıkma oranlarını düşürmek ve kullanıcıyı elde tutma oranını artırmak için hayati öneme sahip olsa da, örneğin PageSpeed ​​Insights'ta 85-90'a ulaştıktan sonra, önemli bir fayda görmeyeceksiniz. Sitenizi karşılaştırırken bunu aklınızda bulundurun ve kaynaklarınıza akıllıca yatırım yapın.

 

#Yazılım #javascript #css #Genel