Web Sitem Ne Kadar Yaşayacak?
Merhaba arkadaşlar,
Minik bir benzetmeyle konumuza giriş yapmak istiyorum.
Kalp damar hastalıklarının tanısı için kullanılan EKG, kalbin kasılması sırasında ortaya çıkan elektriksel aktivitenin grafiksel olarak kayıt edilmesini sağlayan bir cihazdır. Kalp atımı olarak da bilinen atriyum ve ventriküllerinin kasılması ve gevşemesi sırasında zayıf bir elektriksel aktivite oluşur. Bu aktivite, kalp ritmi, frekansı ve yayılımı hakkında pek çok veri içerir. Elektriksel aktivitenin ölçülmesi için elektrokardiyografi ya da farklı bir deyişle EKG cihazı kullanılır.
Özel bir hastane sitesinden aldığım yukarıdaki bilgi bize EKG cihazının ne işe yaradığından kısaca bahsediyor. Bir çoğumuz da zaten bu cihaza aşinayız.
Peki web sitelerinin de EKG’sini çekebilir miyiz?
https://medium.com/ adresine girdiğimizde neler yaşanıyor? Hangi metrikler sitenin sağlık durumu hakkında bilgi veriyor? Sitemizin nabzı nasıl atıyor? Hadi biraz kulak verelim :)
Öncelikle, daha önce web performansı hakkında yazdığım Medium yazılarımı incelemediyseniz, bu yazının hemen ardından diğer yazılarımı buradan okuyabilirsiniz.
Bir önceki paragrafta iliştirdiğim medium yazı serimde web sitemizin performansının nasıl ölçülebileceğinden bahsetmiştim. Kısaca özetlemek gerekirse, Google tarafından standartlaştırılmış ve kabul edilmiş Web Vitals adı verilen performans metrikleri bulunmaktadır. Bu metriklerin ilgi alanı aslında bir web sitesine girildiği andan itibaren, son kullanıcının ilk hamlesine kadar yaşanan olayların ölçümlenmesi ve optimize edilmesidir.
Belirtilen metriklerin ölçümlenmesi için bir çok yöntem bulunmaktadır. Önceki yazılarımda https://pagespeed.web.dev/ ve https://gtmetrix.com/’den bolca bahsetmiştim. Bu yazımda, biraz daha manuel kontroller sağlayacağız.
Bir developer olarak web sitemizdeki çeşitli alanlara özel ölçüm kriterleri eklemek istiyorsanız, Performance API’den yararlanabilirsiniz.
ScreenShot 1 görselinde performance arayüzünün en temel kullanım şeklini görebilirsiniz. Benzer veriyi, Chrome -> Developer Tools -> Network sekmesinde de görmeye alışıksınız :) Burada web sitesinin ilk olarak sunucudan ne kadar sürede, hangi yükle, hangi prokolle ve aslında tüm teknik detaylarıyla https://mstfbiccer.medium.com/web-sitem-ne-kadar-performansl%C4%B1-1bd950d09fac adresine girdiğinizde tarayıcınızda yaşanan ilk aksiyonun bir özetini görebiliyorsunuz.
ScreenShot 2 devam görselinde de, sayfaya yüklenen script’lerin image’ların ve ardından first-paint, first-contentful-paint gibi Web Vitals metrikleri olarak adlandırdığımız ve aslında hayal dünyanızda bir görselin oluşması aşamalarının detaylarını da inceleyebiliyorsunuz. Bu verilerin, bir çok detayına aşağıdaki ekran görüntüsünde bulunan Network ve Performance sekmelerinden ulaşabilirsiniz.
Makalenin bu kısmında sizlere hazırladığım kısa loom video’sunu izlemenizi rica edeceğim :)
Network ekranında gördüğümüz içerikleri birisiyle paylaşmak istiyorsak, HAR adı verilen bir dosya tipinde bu içeriklerin paylaşımını gerçekleştirebiliyorsunuz. Hata ve performans analizlerinde bu özellik işinize yarayacaktır. Aşağıdaki görselde, kırmızı kutucuk ile işaretlediğim download button’u ile HAR dosyaları elde edebilirsiniz. Farklı bir HAR dosyasını tarayıcıda incelemek isterseniz hemen solundaki upload button’unu kullanabilirsiniz.
HAR dosyalarınızı, yukarıdaki yöntem ile tarayıcınıza yükleyip, sanki o trafik sizin tarayıcınızdan gerçekleşmiş gibi analizler yapabilirsiniz. Benzer şekilde, HAR dosyasını inceleyebileceğiniz bir çok araç da bulunuyor. Bunlardan bir tanesine şuradan erişebilirsiniz.
Hadi birlikte HAR dosyası incelemesi gerçekleştirelim!
Evet biraz yorulmuş olabilirsiniz :) Fakat son kontrollerimizi yapıyoruz. Performance sekmesi aslında Google’ın 2017'de duyurduğu bir özellik. Aslında çok uzun bir süredir hayatımızda. Fakat bu makaleyi incelediğinizde zaman içerisindeki gelişimini gözlemleyebileceksiniz.
ScreenShot 5 ve 6 görsellerinde görebileceğiniz gibi web tarayıcımız üzerinden, web sayfasının tarayıcı tarafından anlamlı bir içeriğe dönüştürülürken yaşanan tüm olayların hikayelerini inceleyebiliyorsunuz.
Buradan yola çıkarak, web geliştirici iseniz, daha performanslı ürünler üretebilir; web analiziyle ilgilenen bir alandaysanız, analizlerinizi güçlendirebilirsiniz.
Son olarak, bu iki ekranı incelediğim kısa loom video’sunu da izleyerek makaleyi sonlandırabilirsiniz :)
Ek olarak,
Daha önceki yazılarımda da bahsettiğim gibi, web siteniz için aşağıdaki aksiyonları her zaman önemsemelisiniz:
- Kullanılmayan ve gereğinden büyük görsellerden kaçınmalısınız.
- Bir görselin web sitesine gerçekten ihtiyacımız olduğu anda yüklenmesini sağlamalısınız.
- Javascript, css, font ve benzeri dosyaların gerçekten minimalist bir yaklaşımda olduğundan emin olmalısınız.
- Düzenli olarak web sitelerimizin performanslarını yardımcı araçlarla takip etmeli ve raporlamalısınız.
Vakit ayırdığınız için teşekkürler,
Diğer makalelerimi okumak için profil sayfamı ziyaret edebilirsiniz.
