Ön Uç Web Sitesi Performansı Nasıl Ölçülür?
Optimizasyon işleminden bahsetmek, yeni çağdaki web tasarımcıları arasında neredeyse yok. On yıl veya daha uzun süredir faaliyet gösteren birçok web tasarımcısı bile, site optimizasyonunun önemini tam olarak anlamıyor.
Uzun bir süre sonra bir web sitesi yavaşlamaya başlayacaktır. Ön uç dosyaları, abartılı kod blokları veya kilitli, gizli bitler içerebilir. Bu en sık JavaScript dosyalarında veya resimlerinde görülür. Kullanıcı deneyimi için hoş bir web sitesi oluşturmak önemli olabilir, ancak optimize edilmiş bir web sitesi olmadan tasarım sabırsız kullanıcılara tam olarak yüklenme şansına bile sahip olmayabilir..
Aşağıdaki ipuçları, ilgilenen başlangıç düzeyindeki ara web geliştiricileri içindir. sayfalarını optimize etmek sonuna kadar. Kullanılabilecek birçok teknik var ve web sitenizin yaşadığı sorunlara bağlı olarak her biri farklı davranacak. Birkaç alanı gözden geçirmeyi deneyin ve bu teknikleri kendi izlerinize uygulayıp uygulayamadığınızı görün.
HTTP İstekleri
Web siteniz her yüklediğinde, uzak bir sunucuya bir HTTP isteği gönderir. Bu veri aktarımı türüne ağ protokolü özellikle düz metin dosyalarını dağıtmak ve depolamak için kullanılır. Bunlar genellikle HTML, CSS ve JavaScript gibi temel ön kodunuzu içerir..
İstek gönderildikten sonra tarayıcınız her sayfa öğesini ayrıştıracaktır. Ayrıştırma motoruna bağlı olarak, her web sitesi farklı yüklenecek ve öğeler aktarım hızlarına bağlı olarak değişen sırada görünecektir. Örneğin, Internet Explorer web sayfalarını Chrome veya Safari'den farklı kılar ve bunların tümü Firefox veya Opera'dan biraz farklı ayrıştırma motorları çalıştırır.
Dikkate alınması gereken, her bir dosya için istek süresinin ne kadar sürdüğü ve bu eğilimin tutarlı bir şekilde geçerli olup olmadığıdır. Ayda 100 bin veya 1 milyon ziyaretçi almayı düşünün. Her sayfa öğesini bir araya getirmek ve harici dosyaları belleğe yüklemek tarayıcının işidir.
Genellikle bir web sitesinin optimize edilmiş hız referansını tutan tıknaz JavaScript unsurlarını veya büyük resim dosyalarını tutan faktörler. Verizon FiOS'un popülerleşmesiyle, İnternet hızlarının 600kbps'ye ulaşması ve tırmanmaya devam etmesi yaygındır! Maalesef bu bir norm değil ve hatta yüksek hızlı bağlantılarda bile optimizasyon hataları yaşamak mümkün.
Site Performansı için Çözümler
Web geliştirme ve ön uç optimizasyonu alanında yalnız değiliz. Doğru çalışmanın tamamlanması için, işi idare etmek için gerekli bazı araçlar vardır..
Google, geliştiricilerin web sitelerini optimize etmelerine ve en iyi performans seviyelerini kontrol etmelerine yardımcı olmak için geliştirilen Sayfa Hızı adlı bir proje yayınladı. Başlangıçta proje açık kaynaklı bir Firebug eklentisi olarak başladı ve şimdi web sitesi testi için 3. taraf referansı olarak kabul edildi..
Firebug kullanıcıları için bir diğer seçenek ise Yahoo! 'Nun YSlow eklentisidir. Komut dosyası, her web sayfası isteğini analiz eder ve performansı iyileştirmenin en yaygın yollarını önerir. Bu öneriler Yahoo! Web tasarımında en iyi optimizasyon uygulamaları için geliştiriciler kaynağı.
Program çok fazla bilgi içerdiğinden başlangıçta biraz aşındırıcı olabilir. Sadece temellere bağlı kalın ve basit dokümantasyona uyarak işlem bir parça kek olmalıdır..
Geliştiriciler daima kodu yıkmak için bir projeye atlamakla ilgilenirler, bu nedenle bu daha akıllıca olmamalıdır. Küçük bir yardım için YSlow yardım rehberine bakabilirsiniz..
Hız Teknikleri
Performansı hızlandırmak için hemen web sitenize uygulayabileceğiniz bazı basit hileler vardır. İlk ve en kolay yol, CSS ve JavaScript dosyalarınızı ayırmaktır..
CSS kodu, belgenizin başlığına aittir. Bu yararlıdır çünkü DOM yüklenirken CSS özelliklerinin ayrıştırılması gerekir. Bir web tarayıcısı başlıktaki CSS stillerinizi tanıdığında, tüm stiller yükleninceye kadar web sayfasını tamamen görüntülemek için bekler. Ayrıca simgeler veya arka plan tasarımları için kullanılan resimlerin yüklenmesi zaman alacaktır ve önce bunu yapmanız gerekir.
Tüm JavaScript dosyalarını site altbilginize taşıdığınızda kapak, kapatma sürelerini önemli ölçüde çözebilir. Birçok tarayıcı paralel indirmeleri engeller, bu da sayfayı bir kullanıcının web tarayıcısını dış JS tam olarak yüklemek için 4 saniye durdurabilir..
Bu her zaman mümkün değildir ve her web sitesi için her zaman gerekli değildir. Sayfalarınız, dosya yerleşimlerine bakılmaksızın eşit yanıt süreleriyle aynı şekilde yüklenirse, herhangi bir oyuna manevra yapma zahmetine girmeyin.
Dinamik içerik DOM'nin tamamı tamamlanıncaya kadar yüklenemez, ancak bazen bu hatalar verir. Herhangi bir optimizasyon avantajı getirip getiremeyeceğinizi görmek için CSS / JS içeriğini test edin.
Dosya boyutu sıkıştırma
Büyük dosyaları sıkıştırmak çok popüler oldu. Artık yükleme sürelerini azaltmak ve dosya boyutlarını çok düşük tutmak için web sayfalarında bile kullanılabilir. İşin çoğu zaten yapıldı ve YUI Kompresör gibi araçlarla mini boyutlu dosyalar enerji gerektirmiyor.
İnternette bu göreve yardımcı olacak birçok ücretsiz servis var.. CSS'yi küçült Süreci basitleştirmek için tüm bir CSS sıkıştırma arayüzü var. Aynı web sitesinde, aynı görevlerin çoğunu yerine getiren ancak komut dizilerini düzenli tutan özel bir JavaScript kompresörü de bulunmaktadır..
Web sayfalarınızdaki en büyük görüntüleri sıkıştırmayı da düşünebilirsiniz. Bu, görüntüyü daha düşük bir çözünürlükte yeniden örnekleyerek Adobe Photoshop veya GIMP gibi herhangi bir fotoğraf düzenleme yazılımıyla yapılabilir. PNG görüntüleri ortalama olarak jpg veya TIFF formatlarından daha küçük olacak. Sıkıştırma işleminde yardımcı olması için Image Optimizer gibi birçok çevrimiçi araç da bulunmaktadır..
Kaynak Kontrol ve Metrikleri
Bu, web geliştiricileri tarafından sıklıkla uygulanmayan ve şaşırtıcı sonuçlar alabilen bir rutindir. Web sitenizdeki tüm sayfa öğelerini analiz ederek hangisinin en uzun sürdüğünü ve her bir parçanın yüklendiği sırayı görebilirsiniz..
En popüler araç Mozilla Firebug, Firefox tarayıcısı için bir eklentidir. Bu uygulama, yanıtlama zamanlarını, başlık bilgilerini, sayfa öğelerini ve her web sitesinin komut dosyalarını kontrol etmek için tarayıcınızın altına küçük bir araç çubuğu yükler. Bu komut dosyası ayrıca Google Chrome’un bir uzantısı olarak Firebug Lite’a.
Mod_pagespeed ile Apache
Tüm ayarlar bir Apache web sunucusu çalıştırmayacak, bu nedenle bu seçenek her zaman mevcut değil. Bu modül doğrudan ile ilgilidir Google’ın Sayfa Hızı izleyicisi daha önce bahsedilen. Aslında, mod_pagespeed kodunun aslen Google Code veritabanlarından gelen pek çok kitaplığa dayanıyordu..
Apache, sunucu yöneticilerinin sunucularının performansını artırmak için modüller adı verilen küçük paketler yüklemelerine olanak tanır. mod_pagespeed Çalışma zamanında otomatik olarak optimizasyon teknikleri uygulayan bu modüllerden biridir. Ana uygulamalardan bazıları anında HTML / CSS / JS sıkıştırma ve görüntü önbelleğe alma dahil olmak üzere listelenecek çok fazla işlem var.
Proje şu anda Google’da bulunuyor ve geliştiricilere açık. Google, Apache HTTP sunucusunu çalıştıran tüm hosting hesaplarına mod_pagespeed uygulamak için GoDaddy ile çalışıyor..
Diğer pek çok seçenek mevcut olmasına rağmen, ön geliştirme çalışmaları en önemlilerinden bazılarıdır, özellikle de önemli web sayfaları için ön optimizasyon düşünülerek. Site başlıkları ve büyük resimler için en iyileştirme, çok sıkıcı ama aynı zamanda ödüllendirici bir görev olabilir..
Bu makalede anlatılan tekniklerden bazılarını göz önünde bulundurun ve bunların web projelerinize nasıl uygulanabileceğini görün. Genellikle geliştiriciler işlerini takdir etmek ve eski kod parçalarını temizlemek için yeterli zaman harcamazlar. Hala bazı ipuçlarını merak ediyorsanız, ön uç bakımı ve uygun performans iyileştirmeleri hakkındaki göstericiler için nihai web optimizasyon rehberimizi okumalısınız..
