Site Hızını Artırmak için Nelere Dikkat Etmeliyiz?

Sayfa açılış hızını optimize etmek için görsel sıkıştırma, önbellekleme ve kritik render yolu iyileştirmeleri.

Konuşmacılar: Okan Çakır

İçerik yazarı

Okan ÇakıriçindeZeo Answers

24 Ağu 2017

Video Transkripti

⏱ 3 dk okuma• 458 kelime

Konuşma metnini inceleyin veya dil değiştirin

Site hızını düşüren faktörleri 4 ana başlık altında toplayabiliriz. Bunlardan ilki ve belki de en kolay aksiyona geçebileceğimiz sorun, imaj dosyalarının optimize olmamasıdır. Yani site performansı için görselleri sitenize yüklemeden önce sıkıştırma ve yeniden boyutlandırma işlemleri yapmalısınız. Bu sayede dosya boyutlarını küçülterek görsellerin daha hızlı yüklenmesini sağlayabilirsiniz. Ayrıca görselleri uygun olan formatta yüklemelisiniz: SVG formatını geometrik şekiller, JPEG formatını fotoğraf ve ekran görüntüleri, PNG formatını ise yüksek kaliteli görseller ve transparan öğeler için tercih edebilirsiniz. Görsellerin sayısını asgari seviyede tutmaya özen göstermelisiniz; CSS kullanarak veya gereksiz görselleri kaldırarak veri aktarım boyutunu düşürebilirsiniz. İmajların responsive olmasını sağlamalısınız; böylece görseller her cihaz ve boyutta düzgün görüntülenebilirler.

İmaj dosyalarının yanı sıra kaynak dosyaların optimize olmaması da site hızını olumsuz etkileyen faktörler arasındadır. Bunun önüne geçmek için CSS ve JavaScript'leri aynı dosyada tutabilirsiniz; tarayıcıların önbellekleme özelliğinden faydalanarak bu dosyaları daha hızlı yükletebilirsiniz. Her ne kadar front-end tarafında insanın işini kolaylaştırsa da, CSS ve JavaScript kodlarında yorum ve boşluk gibi gereksiz satır kullanımlarından kaçınmalısınız. Kaynak dosyaları olabildiğince minimalize etmek, tarayıcıların kodları daha hızlı çözümleyebilmesine yardımcı olacaktır. JavaScript'leri HTML kodlarında üst kısım yerine body kısmının kapanış etiketinin hemen öncesinde yerleştirebilirsiniz; böylece sayfa içerikleri kaynak dosyalar tetiklenmeden önce yüklenmeye başlayacaktır. Bu yöntemin yanı sıra dosyaları ilk açılışta yükletmek yerine erteletmeli olarak yükletmek için async attribute'unu da kullanabilirsiniz.

Site performansını düşüren bir diğer durum ise veri aktarım hızının düşük olmasıdır. Bu konuda iyileştirme yapmak için tarayıcının önbellekleme özelliğinden, yani cache özelliğinden faydalanabilirsiniz. Bu özellik sayesinde belirlenen süre boyunca sitenize tekrar gelen kullanıcılar için imaj ve kaynak dosyalar önbellekten çekilerek daha hızlı sayfaya yüklenmesini sağlayacaktır. Dosyalarınızı HTTP sıkıştırma yöntemi ile sunabilirsiniz. Gzip biçiminde yapabileceğiniz bu sıkıştırma işlemi sayesinde verilerin boyutlarında tasarruf edebilir, daha hızlı veri aktarımı elde edebilirsiniz. Content Delivery Network adı verilen sunucu sistemini kullanarak sayfa kaynaklarınızın farklı sunuculardan yüklenmesini sağlayabilirsiniz. Bu sistem sayesinde kullanıcı ile server arasındaki fiziksel uzaklık nedeniyle hız kaybı yaşamaz, kaynakların en yakın serverdan yüklenmesini sağlayabilirsiniz. Ele alabileceğim son ana sorun ise HTTP isteklerinin fazla sayıda olmasıdır. Gereksiz HTTP isteği oluşturmamak için gereksiz yönlendirmelerden ve yönlendirme zincirlerinden kaçınmalısınız.

Bunun yanı sıra 404 kodu döndüren sayfaları site içi linklerden kaldırmalısınız. 404 durum koduna sahip kaynak dosyalar varsa, bu dosyaları düzeltmeyi deneyebilir veya kullanabilir durumda değillerse HTTP istek sayısını azaltmak için bu dosyaları kaynak kodlardan kaldırmayı deneyebilirsiniz. Çok fazla sayıda CSS ve JavaScript dosyası kullanmak yerine, kaynak verileri mümkün olduğunca tek bir dosyada toplamak da etkilidir. Böylece sayfalar yüklenirken kaynak dosyaları için gönderilen HTTP isteğinde azalma olacak ve daha iyi site performansı elde edilecektir. Her sayfanıza tekrar eden ikon, logo, statik dosyalar için CSS sprite yöntemini kullanabilirsiniz. Bu yöntem ile her imaj için farklı HTTP isteğinin gönderilmesini engelleyebilirsiniz. Sitenizde bu maddelere yönelik iyileştirmeler yaptığınızda daha iyi performans elde edebilir, site hızını sıralamalarda bir metrik olarak kabul eden Google'ın gözünde daha iyi görünürlüğe sahip olabilirsiniz.

Bu transkript, yapay zekâ destekli konuşma tanıma modeli ile oluşturulmuş ve dil kurallarına göre doğrulanmıştır.

İçerik yazarı

Okan Çakır

author

İletişim

Verilerinizi nasıl işliyoruz

Tam sayfada aç