Core Web Vitals Nedir, Nasıl Optimize Edilir: Site Hızınızı Geliştirmek İçin 12 İpucu

Last Updated on 16 Ağustos 2021 by Yıldırım SERTBAŞ

İngilizce literatürde Core Web Vitals olarak geçen kullanıcıyı odağa alan kullanıcı odaklı hız metrikleri ile ilgili yapılacak optimizasyon çalışmalarını derlediğim yazıma hoş geldin.

Bu sayfada Core Web Vitals optimizasyonu için 12 çeşit çalışmayla ilgili çeşitli detayları bulacaksın.

Google’ın, web sitesi sahiplerinin sitelerini daha kullanıcı dostu bir şekilde, site hızını temel bir değerlendirme haline getirerek geliştirmeleri için yaptığı büyük itici güç, son birkaç yılda daha da ivme kazandı.

Sadece daha iyi site hızına sahip olmanın sağladığı küçük sıralama artışından bahsetmiyorum.

Google’ın geliştiricilerin sitelerini daha hızlı yapmalarına yardımcı olmak için çıkardığı yeni kaynakların, içeriğin ve araçların miktarına bir göz atın.

• web.dev – Erişilebilirlik, en iyi uygulamalar ve hız optimizasyonu hakkında kılavuzlar
• Pagespeed – Kullanıcı merkezli performans metriklerinden yararlanan sayfa hızı analizi aracı
• WebP – geleneksel jpeg ve PNG’den daha küçük dosya boyutları sunan bir görüntü formatı
• Guess.js – Sayfaların makine öğrenimi dayalı önceden getirilmesi
• Developer.google.com – ayrıntılı performans optimizasyonu kılavuzları
• AMP – mobil hız optimizasyon frameworkü
• Brotli – Gzip sıkıştırmasında bir geliştirme
• PageSpeed Modülü – Google’ın Apache & NGINX modülü ile, kullanıcıların CSS’yi, JavaScript’i otomatik olarak optimize etmesine, görüntüleri optimize etmesine ve lazy loading yapması.

Bunun da ötesinde, Cloudflare gibi büyük oyuncular bu tür şeyleri kendi sunucu ağlarında ve çoğunlukla ücretsiz olarak uygulanmasını kolaylaştırarak web Dünya’sına ayrı bir soluk getiriyor.

2020 için, paylaşılan bilgi miktarının her zamankinden daha iyi ve uygulamanın daha kolay hale geldiği sayfa hızı optimizasyonu için de altın bir çağda olduğumuzu söyleyebiliriz.

Peki bu hız konusunu neden önemsemeliyim?

Doğru sayfa hızı optimizasyonunun web siteleri ve satışları üzerindeki etkisi çok büyük. Son veriler, sayfa yükleme sürelerini 5,7 saniyeden 2,4 saniyeye düşürdüyseniz, dönüşüm oranınızın üç kattan fazla artabileceğini gösteriyor.

Büyük hedefleri olan büyük işletmeler için, sitenizden elde edilen geliri üç kat daha fazla artırmak kulağa hoş geliyor değil mi? Tabii ki öyle!

Site hızı optimizasyonunun siteniz üzerindeki potansiyel etkisini görmek istiyorsanız, ana sayfanızı Google’ın bu aracı üzerinden çalıştırın. Sitenizi değerlendirdikten sonra, kullanışlı bir rakip analizi aracı ve hızın iyileştirilmesi durumunda potansiyel gelir artışını tahmin eden bir gelir tahmin aracı vardır.

Bu nedenle, site hızı optimizasyonu (Gzip sıkıştırma, tarayıcı önbelleği, düzgün barındırma, vb.) Söz konusu olduğunda temel işlemleri yaptıysanız ve sitenizin hızını tam olarak nasıl iyileştireceğiniz konusunda daha gelişmiş ipuçları arıyorsanız doğru yerdesiniz.

Aktaracağım şeyler, kullanıcı merkezli performans metriklerini ve kritik oluşturma yolunu (critical rendering path) iyileştirmeye odaklanarak, site hızı optimizasyonunun faydalarından temellerin dışında çıkarak yararlanabileceğiniz bazı başka yollar olacak.

Detaylara inmeden önce WordPress site hızlandırma nasıl yapılır içeriğime de göz atmanızı kesinlikle tavsiye ederim.

Core Web Vitals Nedir?

Core Web Vitals, sayfa içeriğinin ne kadar hızlı yüklendiğini, bir web sayfasını yükleyen tarayıcının kullanıcının girişine ne kadar hızlı yanıt verebildiğini ve içeriğin tarayıcıya yüklenirken ne kadar kararsız olduğunu özetle bir kullanıcının bir web sayfasını yükleme deneyimini puanlayan üç metriğe genel olarak verilen isimdir.

Kritik Oluşturma Yolu Nedir?

Kritik oluşturma yolu, bir tarayıcının bir web sayfasında içerik oluşturmak ve görüntülemek için tamamladığı adımlardır.

Kritik oluşturma yolunun ne olduğu konusunda herhangi bir fikriniz yoksa aşağıdaki makalelere iyice göz atmanızı tavsiye ederim:

• Varvy’den bir rehber
• Google’dan bir rehber

Site hızı optimizasyonuna bakarken, odaklandığınız şeyin kritik oluşturma yolunun olması çok önemlidir. Lighthouse gibi araçlarla ölçülen kullanıcı merkezli metrikler yerine sayfa yükleme süresini optimize ediyorsanız, tamamen yanlış yapıyorsunuz demektir!

Örneğin, altı saniyelik bir sayfa yükleme süreniz varsa, ancak kullanıcı sayfayı bir saniye içinde görebiliyor ve onunla etkileşim kurabiliyorsa, bu çok da kötü değildir.

Altı saniyelik bir sayfa yükleme süreniz varsa, ancak kullanıcı beş saniye geçene kadar herhangi bir içeriği göremiyor veya sayfayla etkileşime girmiyorsa, bu, kullanıcının bakış açısından oldukça zayıftır.

Bu örneklerin anlamanız açısından yeterli olduğunu düşünüyorum. Kritik oluşturma yolunu optimize ederek, bir kullanıcı için gerçekten önemli olan tek şey olan algılanan yükleme sürelerine odaklanırsınız.

Şimdi, sayfa yükleme sürelerinin nasıl iyileştirileceği ile ilgili ipuçlarına bakalım.

Dosya Optimizasyonu

Oluşturmayı Engelleyen Dosyaları Kaldırma

Core Web Vitals optimizasyonu içinde oluşturmayı engelleyen dosyaları kaldırmak, kritik oluşturma yolunu ve First Contentful Paint (FCP) gibi önemli ölçümleri iyileştirmek için yapabileceğiniz en iyi şeylerden biridir. Geliştirmek istediğiniz bir siteniz varsa, bunu listenizin en üstüne koyun!

Oluşturma Engelleme Ne Anlama Gelir?

Oluşturma engelleme, harici olarak bağlanmış JS ve CSS dosyalarının tarayıcının HTML’yi okumasını bitirmesini ve kullanıcıya sayfanın içeriğini göstermesini engellediği zamandır.

Bir tarayıcı HTML’yi ayrıştırıp harici olarak bağlanmış CSS ve JS dosyalarını bulduğunda, HTML’yi ayrıştırmayı durdurur ve bu dosyaları istemeye, almaya, indirmeye ve ardından ayrıştırmaya başlar. Bu dosyalar indirilip ayrıştırılana kadar sayfa boş kalacaktır.

Bu, özellikle CSS veya JS’nin indirme boyutları daha büyük olduğunda, oldukça büyük gecikmelere neden olabilir.

Bunu düzeltmek için üç önemli adım vardır.

1. Kritik CSS Dosyalarını Satır İçine Alma

Bunu düzeltmek için yapmak isteyeceğiniz ilk şey, sayfanın <head> bölümüne herhangi bir kritik CSS’yi satır içi yapmaktır. Tahmin edebileceğiniz gibi, kritik CSS, kullanıcıya ekranın üst kısmındaki içeriği göstermesi gereken CSS’dir.

Bu CSS, sayfanın en üstünde içinde satır içine alındığında, tarayıcı onu ayrıştırır ve ardından bir oluşturma engelleme dosyasına ulaşmadan önce bulduğu herhangi bir HTML’ye uygular.

2. Kritik Olmayan CCS Dosyalarını Erteleme

Artık kritik CSS yüklendiği için, ekranın üst kısmındaki içeriği oluşturmak için gerekli olmayan herhangi bir CSS’yi ertelememiz gerekiyor.

Bunu yapmak için, aşağıda görüldüğü gibi rel = preload özelliğini kullanarak CSS dosyalarını normalden biraz farklı bir şekilde yüklemeniz gerekir.

<link rel=”preload” href=”styles.css” as=”style” onload=”this.onload=null;this.rel=’stylesheet'”> <noscript><link rel=”stylesheet” href=”styles.css”></noscript>

Ön yükleme, CSS’nin eşzamansız olarak yüklenmesine neden olur ve onload özelliği, sayfanın yüklenmesi tamamlandığında CSS’nin yüklenmesine neden olur.

Noscript etiketi, CSS’nin JavaScript yürütmeyen tarayıcılar için hala yüklenmesini sağlamak için gereklidir.

UYARI: Kritik CSS’nizi ilk önce satır içi yapmadan bunu yapmayın. Bunu yapmazsanız, bir FOUT (şekillendirilmemiş içerik ) alacaksınız. (Kısa bir süre için sitenin çıplak HTML’sinin görünmesi de diyebiliriz)

Bonus ipucu: Henüz preload özelliğini desteklemeyen tarayıcılar için, loadCSS kitaplığını kullanarak JS polyfill yapabilirsiniz. Tarayıcı desteği gelişiyor, ancak dikkat çekici bir şekilde Firefox şu anda henüz desteklemiyor.

3. Kritik Olmayan JS Dosyalarını Erteleme

Ardından, içeriğin tarayıcı tarafından oluşturulmasını engelleyen herhangi bir JS’yi düzeltmemiz gerekiyor. JS yükleyen bir tarayıcının varsayılan davranışı aşağıdaki gibidir.

JS’yi erteleyerek, tarayıcı davranışı bu şekilde değişir.

Bunu yapmak, etikete “defer” eklemek kadar basittir.

<script defer src=”example-script.js”>

Sayfa yüklemesi için gerekli olan küçük bir JS dosyası varsa, kritik CSS için yaptıklarınıza benzer bir şekilde satır içine almayı düşünün.

4. Oluşturmayı Engelleyen Dosyaları Etiketin Sonuna Taşıyın

Şimdi, harici olarak bağlantılı CSS dosyalarının içeriğin oluşturulmasını engellemediğinden emin olmak için kritik olmayan CSS dosyalarınızı sayfanın en sonuna, </body> etiketini kapatmadan hemen önce taşıyın.

Bunu ertelenmiş JS dosyalarınız için de yapmanızı tavsiye ederim. Erteleme özelliğini destekleyen modern tarayıcılar için bunun bir fark yaratmaması gerekirken, bazı eski tarayıcılar bunu desteklemez ve bu nedenle JS’yi oluşturmayı engelleyen bir şekilde yükleyebilir.

5. Kullanılmayan CSS Dosyalarını Kaldırın

Dosya optimizasyonunu yapmanın aslında en temel mantığı, kullanılmayan her şeyi kaldırmaktır. CSS, CSS dosyalarının o sayfada aslında gerekli olmasa bile, site genelinde genel olarak yüklendiğinden bunun en büyük suçlulardan biridir.

Örneğin, bir e-ticaret sitesinde, ana sayfaya yüklenen ödeme sayfası için CSS gerçekten gerekli değildir.

Kullanılmayan CSS Dosyaları Nasıl Bulunur?

Kişisel olarak, dosyaların içinde kullanılmayan baytları bulmak için Chrome Dev Tools kullanırım. Kesinlikle harika bir araçtır. Bunu yapmak için, Chrome Geliştirici Araçlarını (Mac’te CMD + ALT + I) açın ve ardından Kapsam raporuna gidin.

İçeri girdikten sonra kayıt düğmesine tıklayın ve sayfanızı yenileyin.

Daha sonra sayfaya yüklediğiniz her dosyadaki kullanılmayan yüzdesini gösteren güzel bir görselleştirilmiş veri grafiği alacaksınız.

Kullanılmayan CSS Dosyalarını Kaldırma Araçları

CSS’nizi optimize etmek için birden fazla araç vardır, bu nedenle yalnızca o sayfada tam olarak gerekli olanı içerir.

• Unused CSS
• Purify CSS
• UnCSS

Unutmayın: Bunun sayfa sayfa yürütülmesi ve çok sayıda test yaparak kullanılması gerekir. Çoğu araç, yalnızca işaretlendiğinde DOM içinde bulabilecekleri için geçerli olan temiz CSS dosyaları verir. Bu süreden sonra DOM’a pop-up gibi bir şeyle ek HTML enjekte ediyorsanız, örneğin, açılır pencerenin stilini belirleyen CSS, temiz CSS dosyası içinde olmayacaktır.

6. Fontları Optimize Edin

Yazı tipi simge paketleri, tasarımcıların ve geliştiricilerin harika görünen ikonografi olmadan sitelerine hayat vermelerini önemli ölçüde kolaylaştırdı.

Ancak, bu simgelerin popüler kitaplıklardan çağrılma biçimleri nedeniyle, bir siteye önemli miktarda kullanılmayan varlık ekleyebilirler. Örneğin, popüler simge kitaplığı FontAwesome, Gzip ile sıkıştırıldığında ve beraberindeki Java Script dosyalarıyla bir sayfaya eklendiğinde sayfaya yaklaşık 300 kb ekleyebilir. Yalnızca CSS dosyası ve yazı tipi dosyaları için, 100kb’ye daha yakın bakıyorsunuz.

Yine de bunun etrafından dolaşmanın yolları var!

Kişisel favori çözümüm, Fontello veya Fontastic gibi bir hizmeti kullanarak kendi simge yazı tipi dosyalarınızı oluşturmaktır. Bu hizmetler, kendi simge yazı tipi dosyalarınızı oluşturmayı, istediğiniz SVG veya web yazı tipi dosyalarını siteye sürükleyip bırakmak, yazı tipi dosyalarını oluşturmak ve ardından bunları kendi sitenize yüklemeyi oldukça kolaylaştırır.

Bunu yaptıktan sonra, yalnızca sitenizin gerçekten kullandığı yazı tipi simgelerini kullanacaksınız, bu da kullanıcılar için daha hızlı yükleme süreleri anlamına gelir.

7. Web Fontlarını Optimize Edin

Web’deki özel yazı tipleri giderek daha popüler hale geliyor. Google Fonts gibi ücretsiz font kütüphaneleri ve Adobe Fonts (önceden Typekit olarak adlandırılırdı) gibi ücretli seçenekler sayesinde, bir sitenin kendi tipografinizle harika görünmesini sağlamak çok daha kolay hale gelir.

Maalesef yazı tipleri, yavaş yüklenmeleri durumunda, özellikle de kendi sunucunuzdan daha yavaş olabilecek üçüncü bir taraftan yüklüyorsanız, kritik oluşturma yolunu bozabilir.

FOUT (stilize edilmemiş metin ) veya FOIT (görünmez metin) gibi bazı çirkin senaryolar elde edebilirsiniz. Burası, tarayıcının yazı tipini tam olarak yüklemeden önce, ya yedekleme sisteminizin varsayılan yazı tiplerini gösterdiği, böylece metin biçimlendirilmemiş olduğu veya yazı tipinin herhangi bir şey göstermeden önce indirmenin bitmesini beklediği yerdir.

Özellikle FOIT ile, kritik oluşturma yolunu düşünüyorsanız, bir sorunu fark etmiş olabilirsiniz.

Bir fontu kullanıcılara göstermeden önce tamamen indirilmesini bekliyorsak, kullanıcı yükleme tamamlanana kadar neredeyse boş bir sayfa göreceğinden, algılanan yükleme süreleri önemli ölçüde artar.

FOUT ile, biçimlendirilmemiş metin göstermek de harika değildir, ancak en azından kullanıcı bir şey görür! Her tarayıcı varsayılan olarak FOUT veya FOIT arasında seçim yapar, farklar şunlardır:

• Chrome, metni üç saniyeye kadar gizler. Ardından, hazır olana kadar bir sistem yazı tipi kullanır.
• Firefox, metni üç saniyeye kadar gizler. Ardından, hazır olana kadar bir sistem yazı tipi kullanır.
• Edge bir sistem kullanır, ardından özel olan hazır olduğunda yazı tiplerini değiştirir.
• Safari, özel yazı tipi hazır olana kadar sayfadaki tüm metni gizler.

Neyse ki, varsayılan davranışı değiştirmenin ve aynı zamanda web yazı tiplerinizi hazırlarken optimize etmenin yolları vardır.

Web yazı tiplerinin nasıl optimize edileceğine dair harika bir kılavuz bu bağlantıda bulabilirsiniz. Ancak ne yapmanız gerektiğini özetlemek gerekirse:

• Font-display özelliğini kullanın ve “swap” olarak ayarlayın. Bu, tarayıcıya stilize edilmemiş bir yazı tipini hemen görüntülemesi talimatını vererek kritik oluşturma yolunu iyileştirir.
• Sayfanın <head> bölümüne yazı tiplerinizi önceden yükleyin. Bu, tarayıcıya yazı tipini hemen yüklemeye başlamasını söyleyerek kullanıcının stilsiz yazı tiplerini göreceği süreyi azaltır.
• Farklı tarayıcılar farklı yazı tiplerini sever, bu nedenle tüm yazı tiplerini listelememiz ve ardından format özelliğini kullanarak kaynak ipuçları vermemiz gerekir.
• Yazı tiplerinizi kendi kendine barındırmayı düşünerek bir CDN kullanıyorsanız, daha sonra ne kadar hızlı yüklendiklerini ve daha yavaş olabilecek üçüncü taraflarca barındırılan bir yazı tipinden etkilenmeyeceklerini kontrol edebilirsiniz. Bunu yoğun bir şekilde test edin, yüklemeyi nasıl etkilediğini görmek için Light House raporlarını veya Chrome Geliştirme araçları ağ sekmesini kullanın.
• Cloudflare kullanıyorsanız, Google Fonts’ları anında otomatik olarak barındırmak için bir Cloudflare Worker kullanmayı düşünün.
• WordPress kullanıyorsanız, bu eklentiye bir göz atın. Google yazı tiplerini kendi üzerinde barındırır, önceden yükler, biçimlendirir ve sizin için yazı tipi görüntüleme özelliğini uygular. Harika bir eklentidir!

8. Görsel Optimizasyon İpuçları

WebP

Resimler, sayfa boyutunu en çok etkileyen şeylerden biridir. Genel sayfa boyutunu azaltmak, kritik oluşturma yolunu optimize etmenin harika bir yoludur.

Ne yazık ki, yüksek çözünürlüklü görüntüler ve büyük afişler, özellikle daha yavaş bir 3G veya 4G bağlantısında olabileceğiniz mobil cihazlarda her zaman sayfa hızını düşürmüştür.

Google WebP tarafından geliştirilen WebP resimlerini kullanın. Kişisel olarak daha fazlasını görmeme rağmen, desteklenen tarayıcılarda resim dosyası boyutlarını yaklaşık % 25 – 35 oranında azaltır. Görüntü ağırlıklı bir e-ticaret siteniz varsa, sunucu bant genişliği kullanımını azaltırken aynı zamanda sitenin daha hızlı yüklenmesini sağlayacağı için WebP kullanmak oldukça mantıklıdır.

Google’ın, görüntüleri WebP’ye dönüştürmek için sitenize uygulayabileceğiniz bir WebP dönüştürme kütüphane listesi vardır. Ayrıca burada anlatılan Node.js kütüphanesini de kullanabilirsiniz.

WebP ile ilgili tek sorun tarayıcı desteğidir. Henüz desteklemeyen tarayıcılar için, site genelinde WebP görüntülerini kullanmaya yeni başlarsanız, desteklenmeyen bir tarayıcıya sahip olan herkes boş görüntüler alacaktır.

Çözüm? <picture> etiketi.

Harika CSS hileleri makalesinde, bu etiketi WebP’yi destekleyen ve desteklemeyen tarayıcılarda nasıl kullanacağınızı bulabilirsiniz.

SVG

SVG, ölçeklenebilir bir vektör formatıdır (kalite, boyuttan bağımsız olarak aynı kalır), aynı zamanda çok performans dostudur ve onu animasyon olarak da kullanabilirsiniz.

SVG formatını kullanarak, dosya diyagramlarının, logoların ve resimlerin önemli ölçüde daha küçük olmasını bekleyebilirsiniz. Özel illüstrasyonların tasarım eğilimi göz önüne alındığında, SVG, web geliştirme araç setinizde sahip olduğunuz bir şey olmalıdır.

SVG’nin gücünü görmek ister misiniz? Stripe sitesini ziyaret edin; onları her yerde kullanıyorlar.

Bazı resimlerinizi, logolarınızı ve diyagramlarınızı kontrol edin. SVG biçiminde değillerse, sayfa boyutunu küçültmek için değiştirin.

Lazy Load

Bu muhtemelen daha bariz ve şu anda pek çok sitenin yaptığı bir şeydir.

Görüntülerin boyutu göz önüne alındığında, bunları yalnızca gerektiğinde yüklemek mantıklıdır, örneğin, görüntü tarayıcı görünüm alanında gösterildiğinde.

Lazy loading tam da bunu yapar. Sayfa yüklenirken, yalnızca sayfanın üst kısmındaki resimler yüklenir. Kullanıcı kaydırdığında ve daha fazla resim göründüğünde, yüklenecektir. Basit ve etkili! Google’ın kılavuzunu okuyun ve ayrıca Intersection Observer API’sini kullanan bir framwork kullanın.

Bu, lazy loading uygulamasının daha performans dostu bir yoludur ve Googlebot’un yeni güncellenmiş sürümü tarafından desteklenmesinin ek avantajına sahiptir.

9. Daha İyi Bir DNS Çözümü Seçin

Kendi sitenizdeki DNS arama sürelerini iyileştirmek, sayfa yüklendiğinde yapılması gereken ilk şey olduğundan, tüm kullanıcı merkezli hız ölçümlerinin yükleme sürelerini iyileştirmenin harika bir yoludur.

Barındırma sağlayıcınız tarafından size verilen varsayılan DNS’yi kullanıyorsanız, kritik oluşturma yolunu iyileştirmek için harika bir fırsatı kaçırıyorsunuz demektir.

DNS yönetimi için varsayılan seçimim Cloudflare. Var olan en hızlı DNS sağlayıcısıdır. Harika bir yönetici alanına sahiptir ve ücretsizdir. Daha iyi bir DNS sağlayıcısı seçme konusunda yardım istiyorsanız, DNSPerf’e bir göz atın, bu size hangisinin daha hızlı olduğu konusunda bazı bilgiler verecektir.

10. Animasyonları Kaldırın

Web tasarımında animasyonlar giderek daha fazla kullanılıyor. Doğru kullanıldığında, kullanıcı deneyimini iyileştirebilir ve tarama deneyimini her yerde daha iyi hale getirebilirler.

Bununla birlikte, öğeler ekranın üst kısmında kaybolduğunda, bu, kritik oluşturma yolunu optimize etmek için harcadığınız tüm zor işi mahveder. 0,3 – 0,6 saniyelik hızlı bir geçiş süresine sahip olsanız bile, ekranın üstündeki bir öğeyi hareket ettiriyorsanız, First Meaningful Paint sürenizi geciktirmiş olursunuz.

Bu öneri oldukça basittir. Önemli içeriği ekranın üst kısmında hareketlendirmekten uzak durun. Kullanıcılar, yakında sıkıcı hale gelecek süslü bir animasyon yerine içeriği hızlı bir şekilde görmeyi tercih edecekler.

Ben de işini aldığım bir hukuk sitesinde ilk yaptırdığım iş slider’ı kaldırıp yerine sabit bir tasarım koydurmak olmuştu.

11. Kaynakları Önceden Yükleyin

Önceden Yükleme Nedir?

Önceden yükleme, tarayıcıya gelecekte kullanılabilecek kaynaklar hakkında ipucu vermenin bir yoludur. Bir kaynak önceden yüklendiğinde, tarayıcı, kaynak içeriğini yerel bir önbellekte depolar, kullanıcı kaynağı talep ettiğinde, kaynak tarayıcı önbelleğinden sunulur, böylece sayfaların yüklenmesi ve işlenmesi hızlandırılır.

Yazı tipi yükleme optimizasyonunu anlatırken daha önce bir ön yükleme yönteminden bahsetmiştik.

Ne İçin Kullanılabilir?

Ön yükleme aşağıdakiler için kullanılabilir:

• DNS araması yapma
• Tüm web sayfaları
• JavaScript dosyaları
• CSS dosyaları
• Herhangi bir medya dosyası (yazı tipleri, ses, video, resimler vb.)

Kaynakları önceden getirmenin birçok farklı yolu vardır. Hemen aralarındaki farklara bakalım.

• Presolve – Bir sonraki sayfa için DNS araması gerçekleştirir
• Preconnect – Yukarıdakiler gibi, ancak aynı zamanda TCP el sıkışmasını ve isteğe bağlı TLS anlaşmasını da gerçekleştirir.
• Prefetch – görüntüler ve diğer dosyalar için yararlı olan HTTP isteğini de gerçekleştirir, örneğin tarayıcıya belirli bir görüntünün mevcut sayfanın başlarında yüklenmesi gerektiğini bildirebiliriz.
• Prerender – Prerendering, bir belgeyi ve bir belgede bulunan tüm kaynakları yüklemenizi sağlar. Tamamen farklı bir ön oluşturma türü olan prerender.io ile karıştırılmamalıdır!

Farklı ön getirme türleri hakkında daha fazla ayrıntı istiyorsanız, buradaki bağlantıya gidebilirsiniz.

Anlık Yükleme İçin Prerender Kullanılması

Bu bölümde, özellikle prerender’ın nasıl uygulanacağına odaklanacağız. Aşağıda sitenize eklemeniz gereken kodun nasıl göründüğüne ilişkin bir örnek:

<link rel=”prerender” href=”https://www.example.co.uk/example1″>

Prerender, sayfa yükleme sürelerinin bir kullanıcı için neredeyse anında görünmesini sağlayabileceğiniz için site hız optimizasyonu kitinizde bulunabilecek harika bir araçtır. Bunun nedeni, tarayıcının kullanıcı sayfaya gitmeden önce sayfayı yüklemek için tüm varlıkları zaten tam olarak yüklemiş olmasıdır.

Yapmanız gereken tek şey, daha sonra hangi sayfayı tıklayacaklarını tahmin etmek ve ardından, onlar tıklamadan önce o sayfayı önceden oluşturmaya başlamaktır.

Bu kesin olarak yükleme süreleri için harika olacak olsa da, bu araç dikkatli kullanılmalıdır. Çok sayıda URL’yi önceden oluşturmaya başlarsanız, hızlı bir şekilde bir kullanıcının veri planını ve aynı zamanda sunucu kaynaklarını boşa harcamaya başlarsınız, özellikle de kullanıcı URL’ye hiç gitmemişse.

Önceden oluşturma stratejisini uygulamanın birkaç farklı yolu vardır:

“Tam zamanında” ön yükleme – Bu, kullanıcı tıklamadan hemen önce bir bağlantının üzerine geldiğinde bir dokümanı önceden oluşturmaya başladığınız yerdir. Bir kullanıcının bir bağlantının üzerine gelmesiyle gerçekte onu tıklaması arasında yaklaşık 300ms – 400ms vardır.

Öyleyse, yapabileceğiniz şey, kullanıcı gezinirken sonraki URL’yi önceden oluşturmaya başlamaktır. Ardından, kullanıcı merkezli metrikleri küçük bir miktar iyileştirebilir ve başka bir optimizasyon yaptıysanız, sayfa yüklenme sürelerinizin anında hissedilmesini sağlayabilirsiniz.

Tahmine dayalı ön yükleme – Burası, kullanıcıların bir sayfayı ziyaret ettikten sonra neyi tıklama eğiliminde olduklarına ilişkin geçmiş verileri kullandığınız yerdir. Örnek olarak, bunu yapmak için Google Analytics verilerini kullanabilirsiniz. Bu şekilde, bir kullanıcı ana sayfaya gelirse ve daha sonra genellikle belirli bir kategori sayfasına giderse, onu arka planda yüklemeye başlayabiliriz.

Boşta ön yükleme – Bir kullanıcının tarayıcısındaki görüntü alanı boştayken, kullanıcının görüntü alanı içindeki URL’lere bağlı tüm bağlantıları önceden getirebilirsiniz.

Neyse ki, prerender özelliğini kullanmaya hızlı bir şekilde başlamak için kullanabileceğiniz birkaç farklı araç var.

Instant.page ile Tam Zamanında Önyüklemeyi Uygulayın

Instant.page adlı bir araçla tam zamanında bir önyükleme stratejisini gerçekten kolayca uygulayabilirsiniz. Kurulum, komut dosyasını sayfanıza eklemek kadar basittir.

Guess.js ile Predictive Prefetching

Guess.js, Google Analytics verilerini kullanarak tahmine dayalı ön getirmeyi uygular. Bunun bir alfa ürünü olduğunu unutmayın, bu nedenle henüz bir geliştirme evresinde olan ürünlerde kullanmayın.

Quicklink ile Idle Prefetching Uygulama

Google ekibinden Quicklink adlı harika bir ücretsiz araç daha var. Yine, kurulum hızlı ve basittir.

Quicklink, sonraki sayfalara yapılan gezinmelerin daha hızlı yüklenmesini sağlamaya çalışır.

• Görüntü alanı içindeki bağlantıları algılar (Intersection Observer kullanarak)
• Tarayıcı boşta kalana kadar bekler (requestIdleCallback kullanılarak)
• Kullanıcının yavaş bir bağlantıda olup olmadığını (navigator.connection.effectiveType kullanarak) veya veri tasarrufunun etkin olup olmadığını (navigator.connection.saveData kullanarak) kontrol eder
• Bağlantılara URL’leri önceden getirir ( veya XHR kullanarak). İstek önceliği üzerinde bir miktar kontrol sağlar (destekleniyorsa fetch () seçeneğine geçebilir).

Kişisel olarak, bir kullanıcının ağı ve ayrıca veri tasarrufunun etkinleştirilip etkinleştirilmediği için bu ön getirmeyi uygulama yöntemini gerçekten seviyorum.

Ayrıca, sitenizde bunun çalışmasını sağlamak adına kullanışlı bir WordPress eklentisi de var ama uzun süredir güncelleme almadığı için tavsiye etmiyorum. Eklenti adı: Quicklink For WordPress

12. Cloudflare Cache Kullanın

Cloudflare’nin büyük bir hayranıyım, ancak CDN’i uyguladığınızda fark edebileceğiniz bir şey, TTFB’nizin (ilk bayta kadar geçen süre) gerçekten düştüğüdür.

Bunun nedeni, Cloudflare’nin varsayılan olarak HTML’yi önbelleğe almamasıdır. Bir kullanıcı sitenizdeki bir sayfayı her ziyaret ettiğinde, Cloudflare, sayfanın HTML’si için sunucunuza bir talepte bulunacaktır.

Bu, TTFB’nize yaklaşık 100 ms gecikme ekleyebilir. Daha yavaş bir TTFB, istediğiniz bir şey değildir çünkü bu, ilk anlamlı boyama ve ilk zengin içerikli boyama gibi diğer tüm kullanıcı merkezli metriklerinden önce gelir ve bu da haliyle gecikecektir.

Kaynak sunucunuzda herhangi bir HTML / sayfa önbelleği uygulamazsanız bu durum daha da kötüleşir.

Bununla birlikte, Cloudflare, her şeyi önbellek sayfa kuralıyla HTML önbelleğe almayı (veya sayfa önbelleğe almayı) destekler. Bunu yaptıktan sonra, Cloudflare, önbellek temizlenene kadar kaynağın yanıt HTML’sini önbelleğe almaya başlayacak ve böylece kaynak ile Cloudflare arasındaki gecikmeyi tamamen ortadan kaldıracaktır.

Her şeyi önbelleğe alma sayfa kuralıyla, sitenize kurallar ekleyebilir ve ardından site yönetici alanınız gibi daha dinamik sayfalar için önbellek düzeyini “bypas” olarak ayarlayan başka sayfa kuralları oluşturabilirsiniz.

Dinamik Öğelerle İlgili Sorunlar

Ancak, bunun işe yaramayacağı senaryolar var. Örneğin, alışveriş sepeti, başlık, ödeme ve hesap sayfaları gibi dinamik öğelere sahip bir e-ticaret siteniz varsa, Cloudflare, bu sayfaların / bölümlerin dinamik öğesini kaldırarak kullanıcılara önbelleğe aldıkları her şeyi gösterecektir. En kötü durumda, kullanıcılar diğer kullanıcıların alışveriş sepetini ve hesap sayfalarını görmeye başlayacaktır!

Tabiki çözümler var. Birincisi, bu dinamik öğeleri AJAX kullanarak istemci tarafına yüklemektir. Buna güzel bir örnek WooCommerce ile verilebilir, çünkü alışveriş sepeti öğelerinin çoğu aslında AJAX tabanlı. Bunu kullanırsanız, Cloudflare HTML’yi kullanıcıya sunacaktır, ancak daha sonra tarayıcı sitenin dinamik bölümlerini doldurmak için asenkron olarak kaynak sunucuyla çalışacaktır.

Ancak durum böyle değilse, ya bir kullanıcı önbelleği oluşturmanız ya da kullanıcının oturum açıp açmadığını belirleyen bir tanımlama bilgisine dayalı olarak uç önbelleği atlamanız gerekecektir.

Neyse ki, çoğu CMS, önbelleği atlamak için kullanabileceğiniz bir tanımlama bilgisine sahiptir. WordPress için bunun bir örneğini burada görebilirsiniz. Kötü haber şu ki, bu bir business hesap özelliğidir. Bu özelliğe sahip olmak için ayda 200 dolar gibi bir ücreti ödemek zorundasınız.

Sonuç

Umarım, web sitesi hızınızı ve dönüşüm oranlarınızı artırmak için yukarıdakilerden bazılarını uygulayabilmek adına itici bir güç oluştururum. Temel web sitesi hız geliştirme tekniklerinin aksine yukarıda açıkladığım teknikleri kullanırsanız büyük ihtimalle diğerlerine nazaran daha yüksek sayfa hızlarına erişebileceksiniz.