Tasarım ve erişimden ödün vermeden web sitenizin hızını nasıl artırıyorsunuz?
Web sitelerinin tasarımı ve erişilebilirliği öldürmeden yükleme hızını nasıl artırıyorsun? Dosya sıkıştırma, CDN, Gzip? Bunu yapmak için en iyi araçlar nelerdir?
Örneğin, Google tasarımdan ödün vermeden sitelerini optimize etti. Ayrıca, birçok web sitesi resimlerinin saflığını sıkıştırma ile öldürebilir.
Tasarım ve erişilebilirlikten ödün vermeden hızı arttırmanın en iyi ya da en iyi yolu, bir yolu var mı?
Not: Çok belirsiz olduğum için üzgünüm ama bu soruyu nasıl ifade edeceğimi bilmiyorum.
Gzip muhtemelen yapabileceğiniz en sert şeydir.
Tüm css ve js dosyalarınızın simge durumuna küçültülmüş olduğundan emin olmanıza yardımcı olur. İhtiyacınız olmayan js kütüphanelerini veya css dosyasını yüklemediğinizi kontrol edin. Çoğu kullanıcı bunları önbelleğe alır, bu nedenle ilk sayfadan sonra bu kadar etkileyici değildir.
Bunun dışında, önbelleklemenin düzgün çalıştığından emin olun, ayrıştırılması gerekmeyen her istek için bir sayfayı yeniden ayrıştırmamak gibi. yine de gerekli olursa
Hemen hemen tüm Yahoo'nun En İyi Uygulamalar , site tasarımına hiçbir şekilde dokunmadan bile uygulanabilir. Tüm CSS'yi bir dosyada ve tüm JS'yi bir dosyada birleştirerek HTTP isteklerini en aza indirin. Gzip kullanın. İyi Expires başlıklarını ayarlayın.
Bu kurallar tasarımı etkileyebilir:
- DOM Öğelerini azaltın - bakmaya değer, tasarımı aynı tutarken HTML boyutunu küçültebilmelisiniz.
- Iframe Sayısını En Aza İndir - bu mümkün olan yerlerde bunları önlemek için muhtemelen en iyisidir.
- Görüntüleri Optimize Etme - görüntüleri mümkün olduğunda optimize etmelisiniz, ancak tasarımınızın pahasına aşırıya kaçmayın.
CSS/JS'yi küçültmekten daha fazlasını, her bir format için mümkün olduğunca tek bir dosyada birleştirin. Daha az indirme, daha iyi. Bu mümkün değilse, bunları aynı sunucuda veya bir CDN'de barındırılan diğer etki alanı adlarına taşıyın.
Gzip, dediği gibi inanılmaz derecede güçlü.
JS'nizi belgenin altına taşıyın ve tüm CSS'lerin head içinde olduğundan emin olun. Satır içi JS ve CSS'den kaçının.
Her şeyi cehennemden uzaklaştırın ve Expires başlıkları ve ETag'leri ayarlayın.
Sayfa Hızı. Bu, FireBug için Google’ın eklentisidir. Sitenizde çalıştırırsanız, geliştirmeniz gereken yeri size söyleyecektir. Çoğunlukla, Yahoo'nun En İyi Uygulamaları'nın verdiği tavsiyelere uyar, ancak nerede geliştirmeniz gerektiğini size söyleyecektir.
Resimlerimin boyutunu düşürürken en büyük hız geliştirmeyi gördüm . Bunu başarmak için Photoshop'ta "Web ve Aygıtlar İçin Kaydet" seçeneğini kullanabilirsiniz VEYA resimlerinizi azaltabilecek başka bir iyi Mac programı ImageOptim .
Yahoo Best Practices (YBP) 'nin çizgileri boyunca YSlow Firefox Add-on ' a bakmak isteyebilirsiniz. Size bir sitenin YBP ile ilgili olarak nasıl bir performans gösterdiğini hızlıca anlatacak.
Hız optimizasyonu hakkında faydalı bulabileceğiniz ayrıntılı bir makale yazdım.
http://www.elevatelocal.co.uk/blog/17-rules-of-speed-optimisation-0501511
Javascript, css ve görüntüler gibi statik dosyalar için bir CDN kullanın. Hem RackspaceCloud hem de Amazon oldukça ucuz olanlara sahip.
- HTTP isteklerinin sayısını en aza indirin - örneğin mümkün olduğunda resim sprite kullandığınızdan emin olun, her sayfa için birden fazla javascript veya css dosyası yüklüyor mu? Bunları bir araya getirin
- Ortadan kaldırabileceğiniz yönlendirmeler var mı?
- Stil sayfalarını belgenizin üstüne, alttaki javascript'i yükleyin.
- Siteniz büyükse, coğrafi olarak en büyük kullanıcı tabanınıza yakın sunucular sağlayın.
ASP.NET'te önbelleğe almayı kullanıyorum ve bu yinelenen veritabanı çağrıları, işlev çağrıları ve hatta sayfalardan kaçınarak zamandan tasarruf sağlayabilir.