Giriş
Hızlı bir web uygulaması başarılı bir web uygulamasıdır. Uygulamanızın hem gerçek hem de algılanan performansını optimize edene kadar geliştirici olarak işiniz bitmiş sayılmaz. Bu, kullanıcılarınızın mükemmel bir deneyim yaşamasını sağlamak için yapılması gereken doğru şeyin yanı sıra, optimize etmeniz gereken çok pratik ve önemli iş nedenleri de vardır. Amazon, her 100 ms'lik site gecikmesi için satışlarda% 1'lik bir düşüş ölçtü.Google da her 0,5 saniyelik gecikme için trafikte% 20'lik bir düşüş ölçtü (alıntı). Bunlar, işletmeniz ve web uygulamanız için gerçek sonuçları olan gerçek sayılardır.
Web hızı o kadar önemlidir ki Google, web'i daha hızlı hale getirmek için büyük bir çaba harcar. Uygulamanızın performansını optimize etmek için başka bir nedene ihtiyacınız varsa Google'ın duyurduğu sayfa hızı sıralama algoritmasına eklendi.
İki mükemmel kitap (Yüksek Performanslı Web Siteleri ve Daha Hızlı Web Siteleri) dahil olmak üzere web uygulamanızın performansını optimize etmeye yönelik yayınlanmış birçok en iyi uygulama vardır. Sunucudaki (doğru önbellek denetimi üst bilgilerini uygulayın) ve istemcideki (resim genişliği ve yüksekliği özellikleri sağlayın) teknikler, performansı optimize etmek için uçtan uca bir stratejide birleştirilir. Pek çok ipucu ve püf noktası sayesinde, bunların gerçek hayata ve gerçek web uygulamanızla nasıl eşleştiğini ölçmek bazen zordur.
Neyse ki Chrome Geliştirici Araçları (Chrome'un her örneğinde bulunur), web uygulamanızı inceleyen ve performansı iyileştirip gecikmeyi azaltmak için özelleştirilmiş öneriler sunan mükemmel bir araç sunar. Bu makalede, oldukça popüler YSlow aracına benzer bir kapsam olan Denetimler Paneli ve bu aracı web sitenizi hızlandırmak, gecikmeyi azaltmak ve kullanıcı memnuniyetini artırmak için nasıl kullanabileceğiniz ele alınmaktadır.
Denetim Masası Aracı şu anda yalnızca Chrome'da kullanılabilir, ancak diğer WebKit tarayıcılarının ilerleyen zamanlarda bu aracı entegre edeceğini umuyoruz.
Başlayın
Denetimler Paneli'nin web uygulaması performans iyileştirmeleri konusunda nasıl öneride bulunabileceğini göstermek için aracı kendi www.html5rocks.com adresimize yöneleceğiz. Sitemizi daha da hızlı hale getirmek için Denetimler Paneli'ni kullanacağız.
Geliştirici Araçları'nı başlatmak için Chrome simgesini (Chrome penceresinin sağ üst köşesinde) kullanıp Araçlar > Geliştirici Araçları'nı seçmek yeterlidir.
Geliştirici Araçları'nı kullanmaya başlama hakkında daha fazla bilgi için lütfen resmi belgeleri okuyun.
Denetimler Paneli, ana araçlar düğme panelinde bulunur. Denetim Masası'nın seçildikten sonra web uygulamanızın analizini henüz tamamlamadığını fark edeceksiniz. Özellikle Gmail gibi büyük bir web uygulaması için tüm buluşsal yöntemlerin çalıştırılması yavaş olabilir. Bu nedenle araç varsayılan olarak devre dışıdır.
Çalıştır düğmesini tıklayarak ayrıntıları inceleyelim. Bu düğme, performans bulguları açık durumdayken web uygulamasını 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.
Denetimler Paneli'nin önerileri önem derecesine göre sınıflandırdığını göreceksiniz. En önemlisi kırmızı nokta ile, orta önem düzeyi önerileri ise sarı nokta ile işaretlenmiştir. Bu renk kodlaması, önce en önemli (ve en büyük kazanımlara) odaklanarak önerilere öncelik vermenize yardımcı olur.
Önerinin ardından parantez içindeki sayı, Denetim Aracı'nın algıladığı örnek sayısını belirtir. Örneğin, 12 "Tarayıcı önbelleğinden yararlanma" örneği vardı. Bu, önerinin ne sıklıkta uygulanabileceği hakkında size bir fikir verir.
Hız Stratejileri
Daha önce de belirtildiği gibi, web uygulaması performansını optimize etmeye yönelik iyi bilinen ve yoğun şekilde test edilmiş birçok strateji vardır. Bu makalede bunların hepsini ayrıntılı olarak ele almayacağız, ancak daha fazla bilgi ve ayrıntı bulmak kolaydır. Web uygulaması optimizasyonunun özellikleri hakkında daha fazla bilgi edinebileceğiniz yararlı kaynaklar arasında Let's make the web work (Web'i daha hızlı hale getirelim) eğiticiler ve High Scalability's Latency is Everywhere and It Costs You Sales yer alır.
Denetimler Paneli, önerilerini iki kategoride gruplandırır: Ağ Kullanımı ve Web Sayfası Performansı.
Denetimler Paneli'ne göre, Ağ Kullanımını iyileştirmek için şunları yapmalıyız:
- tarayıcı önbelleğinden yararlanma
- proxy önbelleğe alma özelliğinden yararlanın
- çerez boyutunu en aza indir
- çerezsiz bir alandan statik içerik sunma
- resim boyutlarını belirtin
Web Sayfası performansını iyileştirmek için şunları yapmalıyız:
- 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 bakalım.
Tarayıcı Önbelleğine Alma Özelliğinden Yararlanma
Örneğin, ilk olarak tarayıcı önbelleğinden yararlanma önerisini inceleyelim. Bu durum tam olarak ne anlama geliyor? Kullanıcı arayüzünde bu seçeneği açtığınızda aşağıdaki ayrıntılar gösterilir:
- Aşağıdaki kaynaklarda önbellek son kullanma tarihi yok. Geçerlilik bitiş tarihi belirtilmeyen kaynaklar, tarayıcılar tarafından önbelleğe alınmayabilir.
- Aşağıdaki önbelleğe alınabilir kaynakların güncellik ömrü kısadır.
- Aşağıdaki kaynaklar açıkça önbelleğe alınamaz. Mümkünse bunları önbelleğe alınabilir hale getirin.
Kaynakların önbelleğe alınması, ağ kullanımını iyileştirmenin mükemmel bir yoludur. Bu sayede geliştirici daha düşük bant genişliği faturalarında, kullanıcı ise daha kısa sürede yanıt alabilir. Maalesef araç, tam olarak ne yapmanız gerektiğini söyleyemeyeceğinden, önerileri biraz daha ayrıntılı olarak ele alıp, bu önerileri uygulamak için web uygulaması performansı optimizasyonlarıyla ilgili bilgimizi kullanmamız gerekiyor.
Önbelleğe alma
HTTP önbelleğe alma işlemini gerçekleştirmeden, bazı temel konuları ele alabiliriz. HTTP protokolü önbelleğe alma talimatlarını içerir. Bu sayede, sunucu ve istemcinin kablo üzerinden aktarılması gereken veri miktarını azaltmasına olanak tanır. Örneğin, sunucu istemciye kaynağı belirli bir süre için yerel olarak kaydetmesini söyleyebilir ve böylece tekrar kaynak isteğinde bulunma ihtiyacını ortadan kaldırabilir. İ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 depolamasını söylemeli ve gelecekte sunucudan kaynağı istemekten kaçınmalıdır. Tahmin edebileceğiniz gibi, HTTP önbelleğe alma işlemiyle ilgili inanılmaz miktarda ayrıntı var ancak genel tema "kaynakları istemcide yerel olarak depolayarak kablosuz üzerinden gönderilen veri miktarını azaltmak"tır.
Önbelleğe Alınamayan Kaynakları Düzeltme
Bir öneriyi ayrıntılı olarak inceleyelim ve Denetim önerisini Geliştirici Araçları'ndaki diğer araçlara nasıl bağlayacağınızı öğrenelim. Özellikle, "aşağıdaki kaynaklar açık bir şekilde önbelleğe alınamaz" sorununun nasıl düzeltileceğine bakalım.
Önbelleğe alma HTTP protokolü aracılığıyla yapıldığından, http://www.html5rocks.com/ kaynağının HTTP isteğine ve yanıtına bakmamız gerekir. Orijinal isteği ve yanıt başlıklarını ve ayrıntılarını görüntülemek için kaynağı tıklamanız yeterlidir.
Ardından, daha fazla bilginin yer aldığı 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 sitesinin ana sayfasını önbelleğe alma" dediğini onaylamaya çalışıyoruz. Bunu yapmak için kaynağı tıklayarak Yanıt Başlıkları'na bakarız. Bunlar sunucu tarafından gönderilen üstbilgiler ve talimatlardır.
Cache-Control başlığı.Tabii ki, sunucu istemciye "Cache-Control: no-cache" üst bilgisini gönderdi. Tahmin edebileceğiniz gibi bu işlem, istemciye kaynağı her zaman istemesini ve onu yerel olarak önbelleğe almamasını söyler. Özellikle, "no-cache" için HTTP spesifikasyonunda şöyle yazar:
"No-cache yönergesi bir alan adı belirtmiyorsa önbellek, kaynak sunucuyla başarılı bir yeniden doğrulama olmadan sonraki isteği karşılamak için yanıtı KULLANMAMALIDIR. Bu, kaynak sunucunun, istemci isteklerine eski yanıtlar döndürecek şekilde yapılandırılmış önbellekler tarafından bile önbelleğe almayı önlemesine olanak tanır.
Denetim Masası tam olarak bu nedenle önbelleğe almanın etkinleştirilmesini önerir. Aksi takdirde, sunucu ve istemci yedek olabilecek bilgiler gönderebilir.
Denetim önerisinin temel nedenini doğruladığımıza göre bu sorunu nasıl düzeltebiliriz? Bu durumda, çözüm, sunucu tarafı yapılandırma veya kod içerir. Kurulumunuza bağlı olarak, önbelleğe almayı web sunucunuzun yapılandırması veya web uygulaması çerçevenizdeki yapılandırmalar üzerinden etkinleştirebilirsiniz. Önbelleğe alınmasını istediğiniz herhangi bir kaynak için max-age parametresiyle birlikte bir Expiration üst bilgisi ve bir Cache-Control: private (max-age) eklemeniz gerekir.
Öneriler Tam da Bu, Öneriler
Denetimler Paneli'nin genel buluşsal yöntemlere dayalı olarak iyileştirmeler önerdiğini unutmayın. Yıllar içinde öğrenilen en iyi uygulamaları kendi web uygulamanıza uygulamaktır. Çoğu zaman bu öneriler dikkate alınır ve dikkate alınmalıdır.
Bununla birlikte, önerinin doğru olabileceği ancak gerçekte herhangi bir iyileşme sağlamayabileceği birkaç durum vardır. Örneğin, sayfanızda yalnızca tek bir büyük resim varsa Denetim Masası, <img> etiketine genişlik ve yükseklik özelliklerini eklemenizi önerir (böylece, oluşturma motoru, resmi indirmek ve denetlemek zorunda kalmadan resim boyutlarını bilir). Bu genellikle çok iyi bir tavsiye olsa da sayfadaki tek öğe resim olduğunda pek işe yaramaz.
Bu önerileri anladıktan sonra uygulamayı unutmayın. Gerçekten bir iyileşme olduğundan emin olmak için, değişikliklerden önceki ve sonraki performansı ölçmeyi unutmayın.
Özet
Denetim Paneli, web uygulamanızın performansını nasıl optimize edeceğinizi hızlı bir şekilde gösterecek mükemmel ve kullanımı kolay bir araçtır. Birçok şirket performans ile gelir veya etkinlik arasında doğrudan bağlantılar bulduğundan hız çok önemli bir web uygulaması özelliğidir. Uygulamanızın performansını optimize etmek yalnızca kullanıcılarınız için yapılması gereken doğru bir şey değildir, işletmenizin kârlılığı için de yapılması gereken doğru bir şeydir.