Web Performansı ve Optimizasyon

Konu Anlatımı

Sayfa Hızı Neden Ölçülür?

Kullanıcı bir sayfayı açtığında tarayıcı ister; sayfanın hızlı açılması kullanım süresini doğrudan etkiler. Hız ölçülmezse hangi kaynağın gecikmeye yol açtığı bilinmez. Bu yüzden önce ölçüm yapılır, sonra müdahale edilir.

Ölçüm üç katmanda yürür: önce gerçek kullanıcı verileri, ardından laboratuvar ölçümü, en sonunda profilleme aracıyla kaynak kırılımı. Katmanlar birlikte kullanıldığında hangi kaynağın sorumlu olduğu netleşir.

Ağ Şelalesi ve Kritik İstek Zinciri

Tarayıcı bir kaynağı işlemeden sonraki isteği başlatamazsa istekler bir zincir hâline gelir; bu görüntüye ağ şelalesi denir. Bir kaynağın doğrudan önceki kaynağa bağlı olmasına kritik istek zinciri denir ve her halka toplam gecikmeye eklenir. İlk boyayı bekleten halkalar en çok çalışılacak kısımdır.

Zinciri kırmanın yolu paralellik yaratmaktır: ön yükleme ipuçları, bağlantı ön kurma ve istek ön getirme ile kaynaklar birbirinin bitmesini beklemeden başlatılabilir.

Çekirdek Performans Ölçümleri

En Büyük İçerik Boyaması, sayfanın ana içeriğinin ilk kez çizildiği anı; Kümelenmiş Düzen Kayması, beklenmedik yer değişimlerinin etkisini; Etkileşim Sonrası Gecikme ise kullanıcı eylemine verilen yanıt süresini ölçer. Bu üçü birlikte, bir sayfanın kullanıcıya ne kadar çabuk ve ne kadar istikrarlı hizmet ettiğini anlatır.

Toplam engelleme süresi ise ana iş parçacığının meşgul kaldığı toplam süreyi ölçer; asenkron olmayan uzun betikler bu değeri şişirir.

Önbellek ve Doğrulama

Önbellek, ikinci ziyarette hiçbir verinin ağdan çekilmediği durumdur. Doğrulayıcı bilgilerle yapılan koşullu istekte sunucu, kaynak değişmediyse yalnızca değişmedi yanıtını döner ve gövde yeniden gönderilmez.

• Uzun süreli tazelik, parmak iziyle adlandırılan sürümlerde kullanılır.
• Hiç saklamama yönergesi, hassas veriler için gereklidir.
• Her kullanımda doğrulama isteyen yönerge, kısa ömürlü verilerde tercih edilir.

Aktarım Boyutunu Azaltma

Metin tabanlı varlıklar sıkıştırma algoritmalarıyla küçültülebilir. Görsellerde ise biçim seçimi önemlidir: yeni nesil biçimler aynı kalitede daha küçük dosya üretir. Yazı tipi dosyaları yalnızca kullanılan karakterleri içerecek şekilde daraltılabilir.

Kaynak kodundaki gereksiz boşluk, satır ve yorumların kaldırılmasına küçültme denir. Bu işlem işlevi değiştirmez; hata ayıklama için kaynak haritası üretilir.

Kritik Yol Kısaltma

Görünür alanın üst kısmındaki stil dosyası indirilene kadar ilk boya yapılamaz. Kritik olmayan kurallar geciktirilir, betikler ayrıştırma sırasını bozmadan sonraya alınır, ağır kütüphaneler ayrı parçalara bölünür.

Gecikmeli yükleme, görsellerin ekrana gelene kadar indirilmesini erteler. En-boy oranı önceden tanımlanarak düzen kayması önlenir. Kullanılmayan üçüncü taraf betikleri ise ölçümü bozduğu için önce kaldırılıp etkileri ölçülmelidir.

Web Optimizasyonu: Ölçümden Önceliklendirmeye

Bu bölümde bir web sitesinin hız ölçümünü nasıl yorumlayacağımızı ve çıkan sonucu optimizasyon adımlarına nasıl bağlayacağımızı öğreneceğiz. Web optimizasyonu, tahminle değil ölçümle yapılır: kullanıcı verisi, laboratuvar ölçümü ve profilleme birlikte kullanılırsa hangi kaynağın gecikmeye yol açtığı netleşir.

Optimizasyon adımları dört başlıkta toplanır: ağ şelalesinin kısaltılması, aktarım boyutunun azaltılması, ana iş parçacığının boşa çıkarılması ve önbellek kullanımı. Her adımın etkisi yeniden ölçülerek kaydedilir; etkisi ölçülmeyen bir adımın gerekçesi yazılmaz.

Günlük Hayattan Bir Örnek

Bir web sitesinde ilk boyama gecikti. Optimizasyon çalışması kritik olmayan bir betiğin ilk boyamayı bekletmesinden kaynaklandığını gösterdi; betik sonraya alındığında ölçüm tekrarlandı ve süre belirgin biçimde kısaldı. İyileşme iddiası, tahminle değil ölçüm farkıyla kanıtlandı.

Özet

• Web optimizasyonu ölçümle başlar ve ölçümle kanıtlanır.
• Ağ şelalesi kısaltmak ilk boyamayı hızlandırır.
• Aktarım boyutu küçültülerek yükleme kısalır.
• Önbellek ikinci ziyarette veri çekilmesini engeller.
• Her adımın etkisi yeniden ölçülerek kaydedilir.

Sık Yapılan Hatalar

1. Optimizasyonu tahminle yapmak: Hangi kaynağın yavaşlattığı ölçülmeden bilinmez. Ölçüm yapılmadan adım seçilmemelidir.
2. Yalnız ilk yüklemeye bakmak: İlk yükleme hızlı olsa da etkileşim sonrası gecikme kullanıcıyı yine rahatsız eder.
3. Önbelleği hiç kullanmamak: Doğrulayıcı bilgilerle yapılan koşullu istek, veri değişmediyse gövdeyi yeniden göndermez.

Ne Öğreneceğiz

Sayfa yükleme süresini ölçen metrikleri, istek zinciri analizini, önbellekleme, sıkıştırma ve varlık optimizasyon teknikleriyle hızlı web uygulamaları geliştirmeyi kapsar. Bu konuda ögrenme çıktıları:

• Ağ şelalesi ve kritik istek zinciri analizini yaparak gecikmenin kaynağını belirler.
• En Büyük İçerik Boyaması, Kümelenmiş Düzen Kayması ve Etkileşim Sonrası Gecikme ölçümlerini yorumlar.
• Önbellek başlıkları ve doğrulama mekanizmalarını kullanarak tekrar indirmeleri önler.
• Sıkıştırma, küçültme, kod parçalama ve gecikmeli yükleme tekniklerini uygular.
• Görsel, yazı tipi ve betik varlıklarını boyut ve öncelik açısından optimize eder.

Ön Bilgi

Bu konuya başlamadan önce temel kavram ve ön koşulları kavramanız yardımcı olacaktır. Konunun çerçevesinde şu kavramlar dikkat ister:

• Performans çalışması daima ölçümle başlar, tahminle değil.
• Ağ şelalesindeki en uzun çubuk, gecikmenin en büyük bölümünü gösterir.
• Doğrulayıcı bilgilerle yapılan koşullu istek, gövdeyi yeniden indirtmeden tazelik denetler.
• Parfme adıyla sürümlenen varlıklar uzun süreli önbellekten sunulabilir.
• Görsel ve yazı tipi dosyaları genellikle bir sayfanın toplam ağırlığının büyük bölümünü oluşturur.
• Gecikmeli yükleme, ilk ekrandaki görseller için kullanılmaz; ekrana gelene kadar bekletir.

İleri Örnek

Daha ileri bir uygulama:

Soru: Sayfa yavaş açılıyor ve ölçümde en büyük gecikmenin üst kısımdaki harici stil dosyasından geldiği görülüyor. İlk çözüm adımı nedir?

1. Gecikmeyi üreten öğeyi adlandır.
2. Kritik olmayan kuralları ayır.
3. Kalan kısmı küçült ve ölçümü tekrarla.

Sonuç/cevap: Kritik olmayan stiller ertelenir, gerekli kurallar belge başında tutulur ve dosya küçültülür. Ardından yeni ölçümde ilk boya süresi karşılaştırılır.

Adım Adım Çözülmüş Örnek

Toplam indirme bütçesini hesaplama konusunun adımları:

1. İlk ziyaretin indirilen boyutunu not et.
2. İkinci ziyaretin indirilen boyutunu not et.
3. Değerleri topla ve birimi koru.

Karşılaştırma Tablosu

Kendini Dene

Soru: Yönerge: Bir kurumsal eğitim sitesinin ana sayfası ilk açılışta 4,2 MB indiriyor ve mobil bağlantıda 6 saniye sürüyor. Bu sayfayı hızlandırmak için bir optimizasyon planı yaz: (I) ölçüm adımını, (II) sorumlu kaynakları bulma yöntemini, (III) uygulanacak en az beş tekniği, (IV) her teknik için beklenen kazancı, (V) sonrasında yapılacak yeniden ölçüm ve kabul ölçütünü madde madde açıkla.

Örnek cevap: Puanlama anahtarı: Ölçüm adımının ağ şelalesi ve profil araçlarıyla tanımlanması 4 puan; darboğaz kaynağının en büyük üç çubukla belirlenmesi 4 puan; en az beş tekniğin sayılması 6 puan; tekniklerin bütçe ve ilk boya gerekçesiyle açıklanması 5 puan; yeniden ölçüm ve kabul ölçütünün yazılması 6 puan. Toplam 25 puan. Model cevap: Önce gerçek kullanıcı verisiyle laboratuvar ölçümü karşılaştırılır, ardından ağ şelalesinde en uzun üç çubuk incelenir. Teknikler: üst kısımdaki kritik olmayan stilleri geciktirme, betikleri gecikmeli çalıştırma ile ayrıştırmayı bloklamaktan çıkarma, kod parçalama, görselleri gecikmeli yükleme, görsellere önceden ölçü verme, sıkıştırma ve küçültme, yazı tipi alt kümeleri, doğrulayıcı bilgilerle uzun süreli önbellek. Sonrasında indirme bütçesi tanımlanır ve aynı senaryoda tekrar ölçülür.