Giriş
Hızlı bir web uygulaması, başarılı bir web uygulamasıdır. Geliştirici olarak işiniz, uygulamanızın hem gerçek hem de algılanan performansını optimize edene kadar bitmez. Bu, kullanıcılarınızın mükemmel bir deneyim yaşamasını sağlamak için doğru bir adımdır. Ayrıca, optimizasyon yapmak için çok pratik ve önemli iş nedenleri de vardır. Amazon, site gecikmesinin her 100 milisaniyesinde satışlarda% 1 düşüş, Google ise her 0,5 saniyelik gecikmede trafikte% 20 düşüş tespit etti (alıntı). Bunlar, işletmeniz ve web uygulamanız için gerçek sonuçlara yol açan gerçek sayılardır.
Web hızı o kadar önemlidir ki Google'ın web'i hızlandırmaya adanmış bir çalışması bile vardır. Uygulamanızın performansını optimize etmek için başka bir nedene ihtiyacınız varsa Google, sayfa hızının sıralama algoritmasına eklendiğini duyurdu.
Web uygulamanızın performansını optimize etmek için yayınlanmış birçok en iyi uygulama vardır. Bu uygulamalar arasında iki mükemmel kitap (Yüksek Performanslı Web Siteleri ve Daha da Hızlı Web Siteleri) da yer alır. Sunucudaki teknikler (doğru önbelleğe alma denetimi üstbilgilerini uygulama) ve istemcideki teknikler (resim genişliği ve yüksekliği özelliklerini sağlama) performansı optimize etmek için uçtan uca bir stratejide birleştirilir. Bu kadar çok ipucu ve püf noktası olduğunda, bunların gerçek hayatla ve gerçek web uygulamanızla nasıl eşleştiğini değerlendirmek bazen zor olabilir.
Neyse ki Chrome Geliştirici Araçları (her Chrome örneğine dahildir), web uygulamanızı inceleyen ve performansı artırıp gecikmeyi azaltmak için özelleştirilmiş öneriler sunan mükemmel bir araç sağlar. Bu makalede, çok popüler YSlow aracına benzer kapsama sahip olan Denetim Paneli ve bu paneli web sitenizi hızlandırmak, gecikmeyi azaltmak ve kullanıcı memnuniyetini artırmak için nasıl kullanabileceğiniz ele alınmaktadır.
Denetim paneli aracının şu anda yalnızca Chrome'da kullanılabildiğini ancak diğer WebKit tarayıcılarında da entegre edileceğini umuyoruz.
Başlarken
Denetim panelinin web uygulaması performansı iyileştirmeleri önerebileceğini göstermek için aracı kendi www.html5rocks.com sitemize çevireceğiz. Sitemizi daha da hızlandırmak için denetim panelini kullanacağız.
DevTools'u başlatmak için Chrome simgesini (Chrome penceresinin sağ üst kısmı) kullanarak Araçlar > Geliştirici Araçları'nı seçmeniz yeterlidir.
Geliştirici Araçları'nı kullanmaya başlama hakkında daha fazla bilgi için lütfen resmi dokümanları okuyun.
Denetim paneli, ana araçlar düğme panelinde bulunur. Seçildikten sonra Denetim Paneli'nin web uygulamanızla ilgili analizini henüz tamamlamadığını fark edeceksiniz. Tüm sezgisel kuralların çalıştırılması, özellikle Gmail gibi büyük bir web uygulaması için yavaş olabilir. Bu nedenle araç varsayılan olarak devre dışıdır.
Başlat düğmesini tıklayarak başlayalım. Bu düğme, web uygulamasını performans sezgileri etkinleştirilmiş şekilde yeniden yükler. Sayfa yeniden yüklendikten sonra aşağıdaki ekran görüntüsüne benzer bir öneri listesi görürsünüz.
Denetim panelinde önerilerin önem derecesine göre sınıflandırıldığını, en önemli önerilerin kırmızı noktayla, orta önem derecesine sahip önerilerin ise sarı noktayla işaretlendiğini görürsünüz. Bu renk kodlaması, önerileri öncelik sırasına koymanıza yardımcı olur. Öncelikle en önemli (ve en büyük kazançları) önerilere odaklanırsınız.
Öneri sonrasında parantez içinde görünen sayı, Denetim Aracı'nın tespit ettiği örnek sayısıdır. Örneğin, "Tarayıcı önbelleğe alma özelliğinden yararlanın" ifadesi 12 kez kullanıldı. Bu sayede, önerinin ne sıklıkta uygulanabileceği hakkında fikir edinebilirsiniz.
Hız Stratejileri
Daha önce de belirtildiği gibi, web uygulaması performansını optimize etmek için iyi bilinen ve çokça test edilmiş birçok strateji vardır. Bu makalede bunların tümünü ayrıntılı olarak ele almayacağız ancak daha fazla bilgi ve ayrıntı bulmak kolaydır. Web uygulaması optimizasyonunun ayrıntıları hakkında daha fazla bilgi edinmek için Web'i hızlandıralım eğitimlerini ve Yüksek Ölçeklenebilirliğin Gecikmesi Her Yerde ve Satışlarınızı Etkiliyor başlıklı makaleyi inceleyebilirsiniz.
Denetim paneli, önerilerini Ağ Kullanımı ve Web Sayfası Performansı olmak üzere iki kategoriye ayırır.
Denetim paneline göre, ağ kullanımını iyileştirmek için şunları yapmamız gerekir:
- tarayıcı önbelleğinden yararlanma
- Proxy önbelleğe alma özelliğinden yararlanma
- Çerez boyutunu en aza indirin
- Çerezsiz bir alandan statik içerik yayınlama
- Resim boyutlarını belirtin
Web sayfası performansını iyileştirmek için:
- Stillerin ve komut dosyalarının sırasını optimize etme
- Kullanılmayan CSS kurallarını kaldırın
htmlrocks.com'un performansını artırmak için odaklanabileceğimiz stratejilerden birine göz atalım.
Tarayıcı Önbelleğine Alma Özelliğinden Yararlanma
Örneğin, önce tarayıcı önbelleğe alma özelliğinden yararlanma önerisini inceleyelim. Bu ne anlama geliyor? Kullanıcı arayüzünde bu seçeneği açtığımızda aşağıdaki ayrıntılar gösterilir:
- Aşağıdaki kaynaklarda önbelleğin geçerlilik süresi eksik. Süre sonu belirtilmeyen kaynaklar tarayıcılar tarafından önbelleğe alınamaz.
- Aşağıdaki önbelleğe alınabilir kaynakların tazelik süresi kısadır.
- Aşağıdaki kaynaklar açık bir şekilde önbelleğe alınamaz. Mümkünse bu dosyaları önbelleğe alınabilir hale getirin.
Kaynakları önbelleğe almak, ağ kullanımını iyileştirmenin mükemmel bir yoludur. Bu da geliştirici için daha düşük bant genişliği faturalarına ve kullanıcı için daha hızlı yanıt sürelerine yol açar. Maalesef araç tam olarak ne yapmanız gerektiğini belirtmiyor. Bu nedenle, önerileri biraz daha ayrıntılı incelememiz ve bu önerileri uygulamak için web uygulaması performansı optimizasyonları hakkındaki bilgilerimizi kullanmamız gerekiyor.
Önbelleğe alma
HTTP önbelleğe alma işlemine derinlemesine girmeden bazı temel bilgilerden bahsedebiliriz. HTTP protokolü, önbelleğe alma talimatları içerir. Bu sayede sunucu ve istemci, kablo üzerinden aktarılması gereken veri miktarını azaltabilir. Örneğin, sunucu istemciye kaynağı belirli bir süre boyunca yerel olarak kaydetmesini söyleyebilir. Böylece kaynağı tekrar istemek gerekmez. İstemci, sunucunun kaynağının yerel olarak depolanan kaynaktan daha yeni olup olmadığını da sorabilir. İdeal olarak, bir kaynak statikse sunucu, istemciye kaynağı yerel olarak saklamasını ve gelecekte kaynak için sunucuya başvurmamasını söylemelidir. Tahmin edebileceğiniz gibi, HTTP önbelleğe alma ile ilgili inanılmaz miktarda ayrıntı vardır ancak genel tema "kaynakları istemcide yerel olarak depolayarak ağ üzerinden gönderilen veri miktarını azaltma"dır.
Önbelleğe alınamayan kaynakları düzeltme
Bir öneriyi ayrıntılı olarak inceleyip denetim önerisini DevTools'taki diğer araçlara nasıl bağlayacağınızı öğrenelim. Özellikle, "Aşağıdaki kaynaklar açıkça önbelleğe alınamaz." hatasının nasıl düzeltileceğine bakalım.
Önbelleğe alma işlemi HTTP protokolü üzerinden gerçekleştirildiğinden http://www.html5rocks.com/ kaynağının HTTP isteğine ve yanıtına bakmamız gerekir. Orijinal istek ve yanıt üstbilgilerini ve ayrıntılarını görüntülemek için kaynağı tıklamanız yeterlidir.
Ardından, daha fazla bilgi içeren Ağ, Kaynaklar veya Kaynaklar paneline (tıklanan kaynağın türüne bağlı olarak) yönlendirilirsiniz. Bu durumda Ağ paneline yönlendiriliriz.
Sunucunun istemciye "html5rocks.com ana sayfasını önbelleğe alma" dediğini doğrulamaya çalışıyoruz. Bunu yapmak için kaynağı tıklayarak yanıt üstbilgilerine bakarız. Bunlar, sunucu tarafından gönderilen üstbilgiler ve talimatlardır.
Cache-Control üstbilgisi.Sunucu, istemciye "Cache-Control: no-cache" üst bilgisini gönderdi. Tahmin edebileceğiniz gibi bu, istemciye kaynağı her zaman istemesini ve yerel olarak önbelleğe almamasını söyler. Daha açık belirtmek gerekirse, "no-cache" için HTTP spesifikasyonunda şu ifade yer alır:
"no-cache yönergesi bir alan adı belirtmezse önbellek, kaynak sunucuyla başarılı bir şekilde yeniden doğrulama yapmadan sonraki bir isteği karşılamak için yanıtı KULLANMAMALIDIR. Bu sayede kaynak sunucu, istemci isteklerine eski yanıtlar döndürecek şekilde yapılandırılan önbellekler tarafından bile önbelleğe almayı önleyebilir."
Tam da bu nedenle, Denetim Paneli'nde önbelleğe alma özelliğinin etkinleştirilmesi önerilir. Aksi takdirde sunucu ve istemci gereksiz olabilecek bilgiler gönderir.
Denetim önerisinin temel nedenini doğruladığımıza göre bu sorunu nasıl düzeltebiliriz? Bu durumda çözüm, sunucu tarafı yapılandırması veya kodunu içerir. Kurulumunuza bağlı olarak, web sunucunuzun yapılandırması veya web uygulama çerçevenizdeki yapılandırmalar aracılığıyla önbelleğe almayı etkinleştirebilirsiniz. Daha açık belirtmek gerekirse, önbelleğe alınmasını istediğiniz tüm kaynaklar için bir Expires üstbilgisi ve Cache-Control: private ile max-age parametresi eklemeniz gerekir.
Öneriler, öneridir
Denetim panelinin, genel sezgisel kurallara dayalı iyileştirmeler önerdiğini unutmayın. Bu öneriler, yıllar içinde edinilen en iyi uygulamaları belirli web uygulamanıza uygular. Çoğu zaman bu öneriler tam olarak doğrudur ve dikkate alınmalıdır.
Ancak önerinin doğru olabileceği ancak aslında herhangi bir iyileşmeye yol açmayacağı birkaç durum vardır. Örneğin, sayfanızda yalnızca tek bir büyük resim varsa Denetim Paneli, <img> etiketine genişlik ve yükseklik özellikleri eklemenizi önerir (böylece oluşturma motoru, resmi indirip incelemek zorunda kalmadan resim boyutlarını bilir). Bu genel olarak iyi bir tavsiye olsa da resim sayfadaki tek öğeyse pek faydalı olmaz.
Bu önerileri anladıktan sonra uygulamayı unutmayın. Ayrıca, gerçekten bir iyileşme olduğundan emin olmak için değişikliklerden önce ve sonra performansı ölçmeyi unutmayın.
Özet
Denetim Paneli, web uygulamanızın performansını nasıl optimize edeceğinizi hızlı bir şekilde gösteren mükemmel ve kullanımı kolay bir araçtır. Birçok şirket, performans ile gelir veya etkinlik arasında doğrudan bir ilişki bulduğundan hız, web uygulamaları için önemli bir özelliktir. Uygulamanızın performansını optimize etmek yalnızca kullanıcılarınız için değil, işletmenizin kârlılığı için de doğru bir karardır.