Web Sitenizi Bugün Hızlandırmak için 7 İpucu
Herkes harika bir yükleme animasyonunu seviyor, değil mi? Ancak bu divot bir veya iki saniyeden fazla sürerse, sadece web sitesinin yavaş yükleniyor olduğuna dikkat çeker. Ve bu bir web sitesi katili.
Kullanıcılar web sitelerinin hızlı ve verimli bir şekilde yüklenmesini bekler. Tasarımın sadece görsel olarak hoş değil, aynı zamanda yüzde 100 işlevsel olmasını sağlamak sizin işiniz. Siteniz biraz sürükleniyorsa, endişelenmeyi bırakabilirsiniz, çünkü web sitenizi tasarıma küçük değişiklikler yaparak hızlandırmanıza yardımcı olacak yedi ipucumuz var. (Yayında sergilenen web sitelerinin her birini ziyaret ettiğinizden emin olun; harika görünüyorlar ve şimşekleri hızla yüklüyorlar.)
Envato Elements'i keşfedin
1. Animasyonlara Dikkat Edin
Web sitesi tasarımındaki animasyon, 2015'in “it” trendlerinden biridir. Sadece yüklenmeyen devasa dosyalar oluşturarak geride kalmayın. Bu tür efektlerle çalışmaya başlarken daha küçük animasyonlu dokunuşlarla başlayın ve genel web sitesi çerçevenizle nasıl çalıştıklarını ve çalıştıklarını iyi hissettikten sonra daha büyük animasyonlara geçin.
Animasyonların anahtarı, web sitenize bir grup video dosyası yüklemiyor. Animasyon ne kadar küçük olursa, küçük bir alan kaplayan bir şey oluşturmak o kadar kolay olur. Peki nereden başlıyorsunuz?
Animasyonlu bir fareyle üzerine gelme durumu oluşturmak gibi basit ve eğlenceli bir şey yapın. Bir düğmenin rengini değiştirmek veya genişletmek, CSS'de ustalaşmanıza ve daha büyük öğelere geçmeden önce temel animasyon için iyi bir fikir edinmenize yardımcı olacak şık bir efekttir. AJAX veya paralaks yükleme animasyonlarını da düşünebilirsiniz. Bu seçeneklerden herhangi biri hakkında güzel olan şey, kullanıcı fark etmeden bile öğeleri yüklemek için zaman vermenizdir. Kullanıcılar kaydırdıkça öğeler yüklendiğinden, her şeyi hazırlamak için birkaç değerli saniye kazanırsınız.
2. Görüntüleri Optimize Edin
Kullanıcılara sunulan HD ve retina ekranların sayısı ile, web sitenizi oluştururken tüm görüntülerinizi yüksek çözünürlükte tam boyutlu olarak yüklemeye cazip gelebilirsiniz. Bu tuzağa düşmeyin. Bu görüntülerin çoğu, sitenizin verimli bir şekilde işlenmesi için çok büyük olabilir.
Dosya türlerinizi öğrenin. Web'deki görüntüler için en yaygın dosya biçimleri JPG, PNG, GIF ve SVG'dir.
- JPG: Fotoğraflar için en uygun JPG dosyalarının boyutu çok küçükten büyüğe değişebilir. JPG dosyalarını web sitesi kullanımı için kaydederken, optimize edilmiş bir dosyayı kaydettiğinizden emin olun. (Adobe Photoshop'ta, Dosya> Dışa Aktar> Farklı Dışa Aktar altındaki dışa aktarma ayarlarını kullanarak web için görüntüleri en iyileştirebilirsiniz.)
- PNG: Metin içeren görüntüler için bu dosya biçimini kullanın, böylece yazı iyi sonuç verir. Bu genellikle oldukça küçük bir dosyadır.
- GIF: Her zaman popüler animasyonlu meme stili görüntü gibi daha küçük animasyonlu öğeler için tercih edilen dosya formatı. Ancak dikkatli olmamanız durumunda bu dosya biçiminin ağırlığı artabilir.
- SVG: Web için bir vektör görüntüsüne ihtiyacınız varsa, bu en iyi seçenektir. Simgelerden logolara kadar her şey için kullanılabilir.
3. Mümkünse Kodu Kullanın
Web siteniz için bir grup şık simge ve resim oluşturmak ve her birini ayrı bir öğe olarak yüklemek cazip olabilir. Bu bazı sorunlara neden olabilir. Bunun yerine, mümkünse bu öğeleri çağırmak için kodu kullanın.
Arka plan resimlerini de yüklemek için CSS'yi kullanın. Bu, sitenizi diğer her şeyi arka planın önüne yüklemeye zorlar, böylece kullanıcılar sitedeki diğer öğeleri ve metinleri hemen görmeye başlayabilir. W3Schools, bunun nasıl yapılacağı konusunda harika ve basit bir eğiticiye sahiptir.
Font Awesome simgelerinden, hafif eğlenceli efektlerle harika öğeler oluşturmak için kullanabileceğiniz diğer CSS ve JavaScript kitaplıklarına kadar birçok araç vardır. (CSS Tasarım Ödülleri, denemek için 30 düğmenin ve form öğelerinin özellikle güzel bir koleksiyonuna sahiptir.)
4. Videoları Kısa Tutun
Bir başka modaya uygun web tasarım öğesi, ana sayfanızda tam ekran video kullanımıdır. Bu başka bir yükleme süresi tuzağı olabilir. Kendinizi video kalitesi, video içeriği ve hız arasında sıkışmış bulacaksınız ve bir yerde fedakarlık yapmak zorunda kalacaksınız.
En iyi videolar süper kısa - sadece birkaç saniye - ve döngü durur, böylece eylem durmaz. Ses veya başka efektler eklemenize de gerek yoktur.
Dosya boyutunuzu mümkün olduğunca küçültmek için birkaç püf noktası deneyebilirsiniz.
- Bir renk katmanı düşünün veya daha düşük çözünürlüklü bir videoda bulanıklaşın. Yine de düzgün görünebilir, ancak bant genişliği gerektirmez.
- Tam ekran boyutundan daha küçük bir video düşünün.
- Kullanıcıları sitenizi daha hızlı yüklediğini düşünmek için "kandırabilen" otomatik oynatmayı bırakın.
- Uzun videolara takılmayın. Birden çok video klip göstermek istiyorsanız, kullanıcıların bir siteyi her ziyaret ettiklerinde yeni bir şeyler görmeleri için bir video "kaydırıcı" öğesini düşünün veya videoları bir zamanlamaya göre manuel olarak değiştirin. (Klibiniz ne kadar iyi olursa olsun, birkaç kullanıcı birkaç saniyeden fazla izleyecektir, bu nedenle daha uzun klipler için yükleme süresinden ödün vermeyin.)
5. Tema Hakkında Düşünün
WordPress veya temalı başka bir içerik yönetim sistemi kullanıyorsanız, tüm temaların aynı inşa edilmediğini unutmayın. Büyük olasılıkla, bazıları kullanılmayan öğeleri "kapatmanıza izin veren" premium bir seçenekle daha fazla şansınız olsa da, kodu yakından inceleyin ve sitenizi tıkayan şey olmadığından emin olmak için derleyin.
6. Eklentilerinizi İzleyin
Sitenize bağlı bir ton eklenti veya üçüncü taraf uygulaması var mı? Hepsini aktif olarak kullanıyor musunuz? Verimliliği optimize etmek için kullanılmayan eklentileri kapattığınızdan emin olun.
WordPress kullanıcıları, hangi eklentilerin etkin olduğunu ve nasıl çalıştıklarını görmek için Eklenti Performans Profilcisi'nden yararlanabilir. Bu, sorunları gidermenize ve tanımlamanıza ve bu eklentileri kaldırmanıza veya yeniden yapılandırmanıza yardımcı olabilir. (Sık karşılaşılan bir sorun alanı genellikle sosyal paylaşım eklentileridir.)
7. Sıkıştır, Sıkıştır, Sıkıştır
Web sitenizin tek tek bileşenleri sıkıştırılmamalı, aynı zamanda siteyi hızlı bir şekilde çalışır durumda tutmanıza yardımcı olmak için bir bütün olarak sıkıştırabilirsiniz. Sıkıştırılabilecek öğeler arasında CSS ve JavaScript dosyaları, resimler ve video (yeniden boyutlandırarak) ve GZIP gibi bir araç kullanırken bir süre site bulunur.
Küçültülmüş dosyalar, eklentiler ve daha küçük dosyalar oluşturma konusunda en iyi yoldur. Ayrıca kodun site içinde nasıl tasarlandığını da kontrol etmek istersiniz. Maksimum hız için tüm JavaScriptler bir dosyada bulunmalı ve tüm CSS'ler başka bir dosyada bulunmalıdır. (Bir not daha: Bu kodu yerleştirdiğiniz yer de sayılır. Site hızınızı artırmak için CSS'yi sayfanın üst kısmına ve JavaScript'i alt kısmına bağlayın.)
Sonuç
Siteniz yeterince hızlı yükleniyor mu? Değilse, optimum yükleme sürelerini karşılamak için ayarlama zamanı. (Bu soruyu hiç düşünmeniz gerekiyorsa, siteniz muhtemelen yeterince hızlı değildir.)
Web siteleri, kullanıcıların hemen etkileşimde bulunabilmeleri için hızlı olmalıdır. Sayfanın yüklenmesi ne kadar uzun sürerse, cihazdan bağımsız olarak, kullanıcıların siteyi tamamen terk etmesi daha olasıdır. Bugün veya bu hafta birkaç dakikanızı ayırın ve sitenizin en iyi düzeyde performans gösterdiğinden emin olmak için bu listeyi gözden geçirin.
Image Source: Muhammed El-Sultan .
