Temel Web yaşamsallarınızı artırmanın 5 yolu

“Keşke asamı sallayıp süper hızlı bir web sitesine sahip olsaydım!” Bu muhtemelen zihninizi de aştı, değil mi? Site hızını ve kullanıcı deneyimini optimize etmek çok iş gerektirir ve teknik ve karmaşık hale gelir – gerçekten hızlı. Çoğu site sahibi veya yöneticisi, işlerin yapılması için geliştiricileriyle hızlı bir şekilde konuşmalıdır. Şimdi, yeni Core Web Vitals metrikleri neyi düzeltmeniz gerektiğine dair daha fazla bilgi ve işaret sunuyor. Core Web Vitals puanınızı yükseltmek için yapabileceğiniz beş şeyi gözden geçirelim.

İlk olarak, bir feragatname

Bakın, belirli bir sorunu çözeceği garanti edilen tek bir şey yok. Sitenizi optimize etme konusunda daha geniş bir görüş almalısınız. Pek çok küçük düzeltme büyük sonuçlar verir. Size burada çalışabileceğiniz beş şey verirken, bu kesin bir yere yakın değil. Google bile birçok öğenin puanlar bulmak için birlikte çalıştığını söylüyor, bu yüzden bunu yaparsanız kesin olarak belirlemek zor, o zaman puan yükselecek.

Google’ın size sağladığı şey, yavaşlayan şeylere veya kullanıcı deneyimine neyin zarar verdiğine ilişkin bilgilerdir. Birçok araç, malzemelerin nasıl düzeltileceği konusunda da tavsiyelerde bulunur. Örneğin Web.dev/measure derinlemesine sonuçlar vermez, ancak belirli bir düzeltmenin etkisinin ne olduğu hakkında bir fikir verir.

Sizin veya geliştiricinizin yapabileceği beş şey

Yıllar boyunca, site hızının ve kullanıcı deneyiminin önemi hakkında sürekli bir konuşma yapıldı . Ancak, sitenizi nasıl optimize edeceğiniz konusunda bir ton malzeme olsa da, bu bilgiyi uygulamaya koymak zordur. Geçtiğimiz birkaç ay içinde, Google, gelecek yıl sayfa deneyimi güncellemesinin hızlanmasıyla bir kez daha hız kazandı. Buna hazır olmanıza yardımcı olmak için, size içgörüler ve okunacak birçok belge sunmak için araçlar geliştirdi.

Birçok konu için tavsiye gerçekten bu kadar değişmedi. Her şey ana içeriği kullanıcılarınıza mümkün olduğunca hızlı bir şekilde almak için kaynar. Sitenizin nasıl performans gösterdiğini görmek için testi yapın, düzeltmelere öncelik vermeyi deneyin ve başlayın! Aşağıda, sitenizi geliştirmenin eski ve yeni yollarının bir karışımını bulacaksınız.

Resimlerinizi optimize edin

Bu listeden altın bir ihtiyarla başlayacağım: görüntüleri optimize etme. Siteniz için yapabileceğiniz en önemli şeylerden biri, görüntülerinizi düzgün bir şekilde optimize etmektir. Evet, bunu milyonlarca kez söyledik ama tekrar söyleyeceğiz: yap. Ana sayfanızdaki veya açılış sayfanızdaki optimize edilmemiş büyük bir resim size zarar verebilir. Büyük görüntüler genellikle herhangi bir site için en büyük içerikli boyadır (LCP) . Bu yükü hızlı hale getirerek ziyaretçilerinize uygun bir karşılama yaptığınızdan emin olun!

Görüntü SEO’unda , bu görüntüyü hızlı bir şekilde yüklemek için neler yapabileceğinizi açıklayan popüler bir makalemiz var . Ancak kısacası, gerekli boyutta servis ettiğinizden ve iyi sıkıştırdığınızdan emin olun. Bunu yapmanıza yardımcı olacak birçok araç var. Şahsen, squoosh.app ile aldığım sonuçları seviyorum . Bu görüntünün en yaygın ekranlarda keskin olması için bu büyük çözünürlüğü korumanız gerektiğini düşünmeyin.

Ayrıca WebP gibi modern formatları benimsemeye çalışın. Bu biçimler daha düşük boyutta yüksek kaliteli görüntüler sunabilir. WebP iyi destekleniyor ve Apple bile gemiye sıçradı! Yakında çıkacak Safari 14 sürümü – hem MacOS’ta hem de iOS’ta – WebP’yi destekleyecek. Evet, Chromium destekli Microsoft Edge tarayıcısı da WebP’yi destekliyor.

CMS’niz ayrıca yükleme resimlerini iyileştirmenize yardımcı olacak bir araçtır. Ağustos ayında WordPress 5.5 görüntülerin tembel olarak yüklenmesini destekleyecek. Bu, yalnızca ekranda görünen görüntüleri yükleyeceği ve kullanıcı bu ekranla etkileşime girdiğinde gerisini yükleyeceği anlamına gelir. Bu, tarayıcıya büyük resimleri yalnızca gerektiğinde yüklemesini söyler.

Her zaman yeşil bir site hızı tavsiyesi parçası bir CDN kullanımıdır , ancak özellikle görüntüler için bir CDN kullanabileceğinizi biliyor muydunuz? Bir görüntü CDN’si , nasıl sunmak istediğiniz ve bunların nasıl görünmesini istediğiniz üzerinde daha fazla kontrol sahibi olmanızı sağlar. Görüntü CDN’si tarafından itilen bir görüntü, URL’sinde tarayıcıya görüntünün nasıl davranması gerektiğini bildiren bir dizi özellik alır.

Resimler ve benzerleri için yer belirterek yüklemeyi dengeleyin

Yeni metriklerden biri kümülatif düzen kayması veya kısaca CLS’dir. Bunun bir örneği, mobil bir sayfanın hazır göründüğü ve yalnızca bir düğmeye basmak istediğinizde içerik kayması ve o yerde yavaş yükleme reklamının gösterilmesidir. Bu sık sık olur ve kullanıcılar için hayal kırıklığının ana nedenlerinden biridir. Artık CLS’nizi optimize etmek, sayfanızı daha hızlı hale getirmeyecek, ancak daha hızlı hissettirecektir .

CLS, CSS’de boyutları olmayan görüntülerden kaynaklanır. Ayrıca boyutsuz reklamlardan ve yerleştirmelerden veya dinamik olarak enjekte edilen içerikten kaynaklanabilir. Boyutlar düzgün bir şekilde verilmediğinde, bu öğeler yükleme işlemi sırasında biraz atlama eğilimi gösterir ve sarsıntılı ve kararsız görünür. Bunun nedeni, yeni içeriğin mevcut içeriğin üzerine eklenmesi olabilir. Bunu, belki de kullanıcı tarafından açık bir etkileşimden sonra yapmayın.

CLS’yi önlemenin yollarından biri, CSS’deki görüntüler için genişlik ve yükseklik eklemektir. Bu şekilde, tarayıcı bu resim için muhtemelen metinden daha sonra görünecek alan ayıracaktır. Şimdi, sarsıntı kaybolacak çünkü tarayıcı bir şeyin zamanında ekleneceğini biliyor. Bir anın hızlı bir şekilde görünmesini istiyorsanız, bir tür düşük çözünürlüklü yer tutucu eklemeyi düşünebilirsiniz.

Bu nedenle, resimlerinizin uygun genişlik ve yükseklik özelliklerinin ayarlandığından emin olun. Tabii ki, bunu düzenli duyarlı görüntülerle de yapabilirsiniz. Tüm boyutlar için aynı en boy oranını kullandığınızdan emin olun.

<img src="mountain.jpg" width="640" height="360" alt="Mountain underneath a cloudy sky">

Atlama reklamlarıyla veya enjekte edilen içerikle başa çıkmak için lütfen bunlar için de yer ayırın. Sonunda, CLS’niz biraz düşebilir.

Yükleme süresini kısaltmak için sunucunuzu hızlandırın

Sunucunuz isteklere ne kadar hızlı yanıt verirse o kadar iyidir. Bu sunucunun daha hızlı yanıt vermesini sağlamak, çok sayıda site hızı metriğini iyileştirir. Karmaşık sitelerde, sunucu istekleri işlemek ve dosya ve komut dosyaları sunmakla meşgul olduğundan, bu işlemleri en iyi duruma getirmek en iyisidir.

Sunucunuzu optimize etmek birkaç bölümden oluşur. İlk olarak, barındırma planınızı yükseltin. Barındırma konusunda eksik olmayın. Uygun fiyata iyi performans sunan birini seçin. Ayrıca, sunucunun nasıl kurulduğuna dair bir iş var – PHP’nin yeni bir sürümünü kullanın! – ve hangi donanımı seçtiniz. Belki de eksik olduğunu fark ederseniz donanımı yükseltmelisiniz. Ayrıca, veritabanlarınızın nasıl çalıştığını araştırmanız ve iyileştirmeler yapıp yapamayacağınızı görmeniz gerekir. Sitenizdeki sorguları analiz etmek için Query Monitor WordPress eklentisi gibi araçları kullanın .

Sunucunuzun dosyaları istemcilere nasıl aktardığını da inceleyebilirsiniz. Bu işlemi geliştirmenin birkaç yolu vardır, link rel=preloadörneğin veya HTTP / 2 sunucu aktarımı. Bunlar, sunucunuzun isteklere nasıl yanıt vereceğini ayarlamanıza olanak tanıyan daha gelişmiş çözümlerdir. Burada yine bir CDN harikalar yaratabilir.

Ekranın üst kısmındaki içeriğin daha hızlı yüklenmesi için kritik CSS’ye bakın

Tarayıcı bir sayfa yüklediğinde, HTML’yi alması, oluşturması, CSS’yi alması, oluşturması, JavaScript’i alması, oluşturması, vb. Sitenizi ne kadar çok dosya yüklerseniz ve bunlar ne kadar büyük olursa, siteniz o kadar yavaş yüklenir. Genellikle, tarayıcı bir şeyler yapmakla meşgulken, arka planda bir şey yükleyemez. Bazı öğeler işlemi engeller . Oluşturma engelleme JavaScript ve CSS olarak adlandırılan her şeyi etkiler.

CSS çok geç yüklendiğinden, ekranda bir şeyin görünmesi biraz zaman alabilir. Tasarımınızın kritik parçalarını (ana CSS dosyasının dış kısmının üstünde görünen kısım) alıp kodunuzda satır içine alarak ekranda daha hızlı bir şey elde edebilirsiniz. Bunu bir kez daha düzeltmek, sitenizi daha hızlı yapmaz, ancak daha hızlı görünmesini sağlar. Tüm bunlar as kullanıcı deneyimi için.

Bir dizi kritik CSS elde etmek için, bir dizi araç arasından seçim yapabilir veya bunu elle yapabilirsiniz. Buna ek olarak, WP Rocket gibi WordPress önbellek eklentilerini kullanabilirsiniz . WP Rocket, CSS dağıtımını optimize et adlı basit bir düğmeye sahiptir . Bunu etkinleştirmek, oluşturma engelleme CSS’sinin ortadan kaldırılmasına ve sitenizin yüklenmesinin geliştirilmesine yardımcı olur. Tabii ki, WP Rocket ayrıca CSS ve JavaScript’i küçültme ve JavaScript’in yüklenmesini erteleme gibi harika şeyler de yapıyor.

Üçüncü taraf komut dosyalarının yüklenmesini iyileştirme

Birçok site için yavaşlık dışarıdan da gelir. Örneğin, siteniz reklam komut dosyalarına dayanıyorsa, temel olarak reklam sağlayıcısının elindesinizdir. Yalnızca reklamlarını performans göstermelerini umabilirsiniz. Reklamları gerçekten yavaş yükleniyorsa, belki başka bir sağlayıcı bulma zamanı gelmiştir.

Üçüncü taraf komut dosyalarının sitenizi yavaşlattığını fark ederseniz, buna bakmalısınız. Kendinize sorun, o reklama gerçekten ihtiyacım var mı? Bu komut dosyalarının değeri nedir? Sunucunuz için biraz daha optimize edilmiş ve daha az stresli olan farklı bir seçenek olabilir. Belki de dene?

Mümkünse, komut dosyasını kendiniz barındırmayı deneyebilirsiniz. Bu şekilde yükleme işlemlerini biraz daha kontrol edersiniz. Bunu yapamıyorsanız, daha hızlı önyükleme yapıp yapamayacağınıza bakın.

En azından komut dosyalarını eşzamansız olarak yüklediğinizden emin olun veya son ana kadar erteleyin. Bu şekilde, tarayıcı harici komut dosyasını almadan ve çalıştırmadan önce sayfayı oluşturabilir. Yüklediğiniz komut dosyası, analitik komut dosyası gibi önemliyse, zaman uyumsuzluğu kullanın. Daha az kritik kaynaklar için ertelemeyi kullanabilirsiniz. Üçüncü taraf komut dosyalarını optimize etme konusunda çok sayıda belge var .

Temel Web Yaşamlarını Artırın: Tüm küçük iyileştirmeler önemlidir

Yaklaşan sayfa deneyimi güncellemesiyle Google, site hızını ve kullanıcı deneyimini tekrar ön plana çıkardı. Her zaman SEO’ya bütünsel olarak baktık – birçok hareketli parça var ve orada en iyi siteyi oluşturmak için hepsinde çalışmalısınız. Yukarıda belirtilen ipuçları bu puanları artırmanıza yardımcı olsa da, ziyaretçilerinize daha iyi bir deneyim sunmak için bunu gerçekten yapmalısınız.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun. Bizi Twitter ve Facebook’ta da bulabilirsiniz.