Hız için Tasarlanmış Bir Arayüz Nasıl Tasarlanır
Web siteniz yavaş mı? Dürüst ol. Daha hızlı olabilir mi? Kullanıcılar hızlı yüklenen ve gecikmeden içerik sunmaya devam eden web siteleri ister. Web siteniz bu talebi karşılamada en az geride kalıyorsa kullanıcılar sitenizi terk edebilir (ve asla geri dönmeyebilirler).
Bugün, web sitesi arayüzünüzün hız için oluşturulduğundan emin olmanın yollarını araştıracağız, bu yüzden bir daha sayfa yükleme süreleri konusunda endişelenmenize gerek yok.
Envato Elements'i keşfedin
Web Sitenizi Test Edin
“Web sitemin yavaş olmasının bir yolu yok” durmadan önce test edin. Google'ın, URL'yi girerek herhangi bir web sitesini test etmek için herkesin kullanabileceği harika bir aracı vardır.
Sitenizin ne kadar hızlı hareket ettiğini ve nerede iyileştirilebileceğini anlatan şık bir rapor alırsınız. Her şeyin düzgün bir şekilde çalıştığından emin olmak için testi periyodik olarak yürütmek iyi bir fikirdir. (Ayrıca, mobil ve masaüstü cihazlardaki performansı bozar ve iyileştirme önerileri sunar.)
Rapor, aşağıdaki öğeler için düzeltilmeli, düzeltilmeli ve aktarılmalıdır - üç öneri sunar:
- Tarayıcı önbelleği
- Görüntü optimizasyonu
- Sunucu cevabı
- Ekranın üst kısmındaki komut dosyaları ve CSS
- Sıkıştırma
- Yönlendirmeler
- CSS, HTML ve JavaScript'in küçültülmesi
- Görünür içeriğe öncelik verme
Gereksiz Eklentileri Döküm
Sadece kullanmadığınız eklentileri mi yoksa eklentileri mi bekliyorsunuz? Onları boşaltma zamanı.
Kullanılmayan öğeler bile hızı sitenizden uzaklaştırıyor. (Bu özellikle WordPress gibi bir sistem üzerinde çalışıyorsanız geçerlidir.)
Temizleme moduna geçin ve kullanılmayan eklentileri kaldırın. Kullanılan eklentileri de düşünmeyi düşünmelisiniz ve gerçekten kullandığınızdan veya daha iyi bir seçenek bulamazlarsa genel kullanıcı deneyimine katkıda bulunduğundan emin olmalısınız.
Eklenti sayısına ek olarak, kalite de bir endişe kaynağıdır. Web sitenize sadece eski bir eklenti eklemeyin. Gerçek değer sağlayan ve yüksek puan alan öğeleri bulmaya çalışın. Eski, eski öğeler de sitenizi aşağı sürükleyebilir.
Yalnızca Gerektiği gibi paylaşın
Eklentileri düşünürken, web sitenizde kaç tane sosyal medya paylaşım düğmesi var? Şimdi dürüstçe cevap verin: Aslında kaç taneye ihtiyacınız var?
Bu düğmelerden çok fazla kullanıcı için kafa karıştırıcı olabilir - kaç tanesi zaten birden fazla platformda paylaşılacaktır - ve hızları ve yükleme süresini azaltır. (Bu, özellikle bir gönderinin her iki yönde çalışan sorgular ile kaç beğeni bulduğunu veya paylaştığını anlamaya çalışanlar için geçerlidir.)
Etkin olduğunuz ve kullanıcıların web sitenize düzenli olarak bağlandığı ve bu düğmeleri içerdiği bir veya iki ağ seçin. Gerisini hendekleyin. Sadece yoluna giriyorlar.
Görüntü Aşırı Yüklemesine Dikkat Edin
Video, illüstrasyonlar, fotoğraflar ve animasyonlar… oh, benim! Tüm bu harika görsel öğeler yükleme sürelerine katkıda bulunabilir. Akıllıca seçim.
Web sitenizin tasarımına herhangi bir görsel eklemeden önce değerini diğer öğelere göre tartın. Kullanıcılar için bir şey sağlıyor mu? Varsa, devam edin. Değilse, neden bu tasarım öğesini kullanıyorsunuz?
Tüm görüntüleri web için uygun şekilde optimize etmelisiniz. Genel bir kural olarak, görüntüler yalnızca gerektiği kadar büyük olmalıdır. Aşırıya kaçmayın ve tam boyutlu fotoğraflar yükleyin. Ön tarafta küçük bir çalışma gerektirir, ancak daha sonra yaptığınızdan memnun kalacaksınız (özellikle web siteniz büyümeye devam ederse).
Diğer numaralardan da yararlanın. Görüntü tabanlı simgeler yerine simge yazı tiplerini deneyin. Bir simge yazı tipi çalışmazsa öğeleri SVG'ye (ölçekli vektör biçimi) dönüştürün. Mümkün olduğu kadar çok HTML ve CSS “büyüsü” kullanın ve düğmeler, oklar ve diğer kullanıcı arayüzü araçları gibi fotoğraf olarak yüklenen öğelerle siteyi zorlamayın.
Daralan Araçlar ile Yükünüzü Çıkarın
Küçük dosyalar en yüksek hızın anahtarıdır. Denge, yüksek çözünürlüklü ekranların içeriği en yüksek kalitede paylaşmanıza ve sergilemenize izin verdiği fikrindedir. Daralan aletlerin devreye girdiği yer burasıdır.
Boyutlandırma ve daraltma yeteneğinizden emin değilseniz - veya istediğiniz sonucu almıyorsanız - dosyaları kullanılabilir en küçük boyutlara indirmek için bu seçeneklerden birini deneyin.
- WP Smush, WordPress kullanıcıları için görüntüleri küçültür
- Kraken görüntüleri tüm kullanıcılar için sıkıştırır
- TinyPNG ortak formatın boyutunu daha da azaltır
- Gzip, dosyaları en iyi sıkıştırma için paketler
- CSS'nizi Küçült, genel kod boyutunu azaltır ve bir API içerir
- SpriteMe, HTTP isteklerini kaydetmek için arka plan resimlerini bir CSS grafiğine dönüştürür
- CSS Kompresör genel kod boyutunu azaltır
Sadece Önbellekle
Web sitenizde önbelleğe almayı etkinleştirin.
Bunu yapmıyorsanız, kullanıcılarınız ücreti ödüyor. Dışarıda hala tartışabilecek birkaç kişi var, ancak kullanıcıların değeri bu argümanlardan ağır basmaktadır. Web sitenizin hızlı olması gerekiyor.
Önbellek, sayfalardan geçici bir dosya oluşturur, böylece kullanıcı geri döndüğünde tarayıcının siteyi "hatırlar". Bant genişliği kullanımını, sunucu yükünü ve gecikme süresini (gerçek veya algılanan) azaltır. Kullanıcılar, özellikle daha büyük web sitelerine erişim konusunda size teşekkür edecektir.
Düzenli Olarak Temizle
Evinizi düzenli olarak temizlemeniz gibi, web sitesi veritabanınızı, bağlantılarınızı ve dosyalarınızı temizlemeniz ve bakımını yapmanız gerekir.
Web sitenizdeki temizleme kontrol listesindeki öğeler:
- Veritabanınızı optimize edin. Zaman içinde veritabanınız düzeltmeler, kullanım dışı fotoğraflar ve kaydedilmiş verilerle tıkanabilir. Hepsini saklamak zorunda değilsiniz. Artık web sitesi planınızın parçası olmayan öğeleri temizleyin.
- Görüntüleri hotlink etmeyin. Başka birinin web sitesinden (ve sunucusundan) görüntüleri kendinize çekmek sadece kötü bir fikirdir. Ve yavaş. Aynı şey hemen hemen tüm diğer dış dosya istekleri için de geçerlidir. Bunları yalnızca gerektiğinde kullanın.
- Bağlantıları düzeltin. Bozuk bağlantılar sitenizi yavaşlatmayabilir, ancak kullanıcıların sitenizden başka yerlere yaptığı bağlantıyı yavaşlatır, bu da aynı derecede kötü olabilir. Bozuk bağlantıları kontrol etme ve düzeltme alışkanlığını edinin.
- Her şeyi güncel tutun. WordPress gibi bir platformda çalışıyorsanız, güncellemeleri alın. Herhangi bir türde bir tema veya kutulu elemanlar kullanıyorsanız, aynı durum geçerlidir. Güncellemeler, hızınıza katkıda bulunan ya da web sitenizi potansiyel tehditlerden koruyan yamalar içerebilir. (Hiçbir şey, saldırıya uğramış veya kötü amaçlı yazılım bulaşmış bir siteden daha yavaş değildir.)
Sonuç
Şimdi yukarıdaki listeyi inceleyin ve Google'ın Pagespeed Insights aracına geri dönün. Tekrar çalıştırın. Bir fark görüyor musunuz?
Hiçbir şey, bir kullanıcıyı harika ve hızlı bir deneyimden daha mutlu ve web sitenize geri döndürme olasılığını arttıramaz. Görsel tasarımın tüm aşamalarında, web sitenizin hız için tasarlanması için arayüz tasarımını da düşünmeyi unutmayın.
