Web performansı, sayfaların yüklenme hızına ve kullanıcı girişlerine ne kadar duyarlı olduklarına odaklanan, web geliştirmenin çok önemli bir yönüdür. Web sitenizi performans için optimize ettiğinizde kullanıcılara daha iyi bir deneyim sunmuş olursunuz. Daha iyi kullanıcı deneyimleri, web siteniz için düşündüğünüz hedeflere ulaşmanıza yardımcı olmada son derece önemlidir.
Web performansı niş bir konu gibi görünebilir, ancak aslında hem geniş hem de oldukça derin bir konudur. Bir uzmanlık alanı olarak derinliği göz önünde bulundurulduğunda, web performansıyla ilgili bir kursun hem ulaşılabilir hem de bilgilendirici olması hayati önem taşır. Bu kursun ilk sürümü, yeni başlayanların bilgilendirici bulacağı web performansıyla ilgili temel bilgilere odaklanıyor.
Bu serideki her modülün amacı, mümkün olduğu durumlarda her modülün içeriğini tamamlayan ve temel performans kavramlarını gösteren bir dizi demoya sahip olmaktır. Bu kurs bir ilk kurs olduğundan, önümüzdeki aylarda ek modüllerin yayınlanması planlanmaktadır.
Performansı Öğrenme özelliğinin ilk kursunda şu konular ele alındı:
Hız neden önemlidir?
Öğrenme performansına başlamadan önce, özelliğin kullanıcı deneyimindeki rolünü ve bunun kullanıcılar için nasıl daha iyi sonuçlar sağlayabileceğini anlamanız gerekir. Bu kurs, bu konuların kısa bir tanıtımıyla başlıyor ve performansı öğrenmenin neden önemli olduğuyla ilgili hayati bir bağlam sunuyor.
HTML performansıyla ilgili genel hususlar
Her web sitesi, bir HTML belgesi isteğiyle başlar. Bu isteğin, web sitenizin yüklenme hızı üzerinde büyük bir rolü vardır. Bu modül HTML önbelleğe alma, ayrıştırıcı engelleme ve oluşturma engelleme gibi önemli kavramları kapsar. Böylece web sitenizin HTML'siyle ilgili ilk isteğin doğru yolda olduğundan emin olabilirsiniz.
Kritik yolu anlama
Kritik oluşturma yolu, web performansında kullanılan bir kavramdır ve bir sayfanın ilk oluşturulmasının tarayıcıda ne kadar hızlı göründüğüyle ilgilenir. Bu modül, kritik oluşturma yolunun arkasındaki teoriyi ele alarak oluşturma engelleme ve ayrıştırıcı engelleme kaynakları gibi kavramları ve bunların bir sayfanın tarayıcıda görünme hızında nasıl önemli bir rol oynadıklarını ele almaktadır.
Kaynak yüklemeyi optimize edin
Bir sayfa yüklenirken, birçok kaynağa kendi HTML'sinde başvurulur. Bu kaynaklar, sayfanın görünümünü ve düzenini CSS üzerinden ve etkileşimli olarak sunan bir sayfaya sağlanır. Bu modülde, söz konusu kaynaklarla ilgili bir dizi önemli kavram ve bu kavramların sayfanın yüklenme süresini nasıl etkilediği ele alınmaktadır.
Kaynak ipuçlarıyla tarayıcıya yardımcı olun
Kaynak ipuçları, HTML'de bulunan ve tarayıcının kaynakları daha erken yüklemesine yardımcı olabilecek ve hatta muhtemelen daha yüksek kaynak önceliğine sahip olan bir dizi özellik toplamıdır. Bu modülde sayfalarınızın daha da hızlı yüklenmesine yardımcı olabilecek birkaç kaynak ipucunu ele aldık.
Resim performansı
Görseller, günümüzde birçok web sayfasına aktarılan verilerin büyük bir kısmını temsil etmektedir. Bu modülde, resimlerin nasıl optimize edileceği ve verimli bir şekilde nasıl sunulacağı ele alınmaktadır. Bu sayede, kullanıcının cihazından bağımsız olarak boşa giden baytları en aza indirebilirsiniz.
Video performansı
Video, web sayfalarında sıklıkla kullanılan bir medya türüdür. Ancak bunların verimli bir şekilde nasıl sunulacağını bilmek, performansın göz ardı etmemeniz gereken bir yönüdür. Bu modülde, videoları web sitenizin hızlı kalabileceği şekilde yerleştirmeye yönelik bazı temel tekniklerin yanı sıra bunların kullanımı sırasında ortaya çıkabilecek performansla ilgili önemli hususlar anlatılmaktadır.
Web yazı tiplerini optimize edin
Web yazı tipleri web'de yaygın olarak kullanılan bir kaynaktır ve haklı olarak da web sitesinin tasarımına diğer kaynakların ekleyemeyeceği şekilde eklemeler yapar. Buna rağmen web yazı tiplerinin bir performans maliyeti vardır. Bu modülde, web yazı tipleriyle ilgili bir dizi performans noktası ve teknik açıklanmıştır.
Kod bölmeli JavaScript
Bazı kaynaklar, web sayfasının ilk yüklenmesinde önemli değildir. JavaScript, kod bölme olarak bilinen bir teknikle ihtiyaç zamanı gelene kadar ertelenebilen bu tür bir kaynaktır. Böylece, bant genişliğini ve CPU anlaşmazlığını azaltarak performansı artırabilirsiniz. Bu, başlatma sırasında hem ilk sayfa yükleme hızını hem de giriş duyarlılığını iyileştirmek için son derece önemlidir.
Resimleri ve <iframe> öğelerini geç yükle
Görüntüler ve <iframe> öğeleri, bant genişliği ve CPU işleme süresini önemli ölçüde tüketebilir. Bununla birlikte, tüm resimlerin ve <iframe> öğelerinin ilk sayfa yüklemesinde yüklenmesi gerekmez ve bu işlem, kullanıcının bunları görme olasılığının en yüksek olduğu sonraki bir zamana ertelenebilir. Bu teknik, geç yükleme olarak bilinir. Bu modülde, sayfalarınızın daha hızlı yüklenmesini sağlamak ve bant genişliğini ve işleme süresini yalnızca gerektiğinde kullanmanızı sağlamak için geç yükleme resimleri ve <iframe> öğeleri açıklanmıştır.
Önceden getirme, önceden oluşturma ve hizmet çalışanı önceden önbelleğe alma
Performans büyük kısmı gereksiz kaynakları optimize etmek ve ortadan kaldırmak için yapabileceklerinizle alakalı olsa da bazı kaynakların ihtiyaç duyulmadan önce yüklenmesini önermek biraz abartılı gelebilir. Bununla birlikte, belirli kaynakları önceden yüklemenin uygun olabileceği bazı durumlar da vardır. Bu modülde önceden getirme, önceden oluşturma ve hizmet çalışanı önbelleğe alma konuları ele alınırken performansın bu yönü incelenir.
Web çalışanlarına genel bakış
Kullanıcının tarayıcıda gördüğü şeylerin çoğu, ana iş parçacığı olarak bilinen tek bir iş parçacığında gerçekleşir. Ancak ana iş parçacığının kullanıcıların karşılaştığı önemli görevleri barındırabilmesi için işlem yükü açısından pahalı işler yapmak üzere yeni iş parçacıkları başlatabileceğiniz fırsatlar vardır. Bunu yapan API Web Worker API olarak bilinir. Bu modülde, API ile ilgili temel bilgiler ele alınmaktadır.
Somut web işçileri kullanım alanı
Web çalışanları ve yetenekleri ile sınırlamaları hakkında temel bilgilere sahip olduğunuza göre artık web çalışanlarının somut bir kullanım alanına göz atabilirsiniz. Bu demoda bir web çalışanı JPEG dosyasını getirmek, meta verilerini çıkarmak ve kullanıcının dosyayı tarayıcıda görebilmesi için tekrar ana iş parçacığına göndermek için kullanılır.
Web performansını öğrenmeye hazır mısınız? İlk olarak Hız neden önemlidir? başlıklı makaleyi okuyarak işe koyulun.