#tarayıcının yerleşik araçları

[best4yousite]

Bu yazımızda site hızlandırma tekniklerini ele alacağız. Sayfa hızı uzun zamandır Google için bir sıralama faktörü olmuştur. 2010’daki ilk duyuruyla başlayıp 2018’de başka bir güncellemeyle güçlendirdi. Ardından 2020’de Core Web Vitals’in tanıtımıyla anlaşmayı imzaladı . Bu yazıda, bugün sayfa hızının ne olduğuna, nasıl ölçüleceğini ele alacağız. En önemlisi web siteniz için sayfa hızı puanlarının nasıl iyileştirileceğini ele alacağız.

Bu konulara yeterince hakim değilseniz, klavuz site hızlandırma konusunda kısmen yardımcı olur. Daha fazlası için lütfen web sitemizi ziyaret ediniz https://best4you.com.tr/

Sayfa hızı nedir?

Google, uzun süredir sayfa hızını ölçmekle uğraşıyor. Doğru metrikler nelerdir? Saha verilerini mi yoksa laboratuvar verilerini mi kullanıyorsunuz? Veya tüm sayfaya mı yoksa sadece üst kısma mı zaman ayırıyorsunuz? Sayfa hızına giren düzinelerce metrik var ve bunlardan hangisinin kullanıcı için gerçekten önemli olduğunu bulmak zor olmadı.

Google, artık sayfa hızı için en önemli olarak kabul edilen üç metrikten oluşan bir sete karar verdi: En Büyük İçerikli Boyama (LCP), İlk Giriş Gecikmesi (FID) ve Kümülatif Mizanpaj Kayması (CLS). Ortak Web Verileri olarak bilinen bu ölçümler, gerçek sayfa hızının aksine algılanan sayfa sorunlarını ölçmek içindir.

Largest Contentful Paint (En Büyük İçerikli Boya)

En Büyük İçerikli Boyama, görünüm alanındaki en büyük öğenin tamamen yüklenmesi için geçen süredir. Bu metriğe ilişkin ölçütler aşağıdaki gibidir;

En büyük öğenin bir görüntü olması yaygındır, bu nedenle görüntü optimizasyonu bu metriğe ana katkıda bulunandır. Bunun da ötesinde, LCP sunucu yanıt sürelerine, oluşturmayı engelleyen koda ve istemci tarafı oluşturmaya bağlıdır.

First Input Delay (İlk Giriş Gecikmesi)

İlk Giriş Gecikmesi, boyanmakta olan etkileşimli bir öğe ile işlevsel hale geldiği an arasındaki gecikmedir. Diyelim ki sayfada bir düğme boyanmış, üzerine tıklıyorsunuz ama henüz yanıt vermiyor.

Bu metriğe ilişkin ölçütler yukarıdaki gibidir. Kod bölme veya js küçültme ile problemleri çözebilirsiniz.

Cumulative Layout Shift (Kümülatif Düzen Kayması)

Kümülatif Düzen Kaydırma, sayfadaki öğelerin yükleme sırasında hareket edip etmediğini ölçer. Diyelim ki, bir sayfa kullanıma hazır gibi görünüyor, ancak daha sonra üstte yeni bir resim beliriyor ve içeriğin geri kalanı aşağı doğru itiliyor. Bu bir düzen kaymasıdır. Bu metriğe ilişkin ölçütler aşağıdaki gibidir:

CLS, kaynaklarınızın yukarıdan aşağıya belirli bir sırada yüklenmesine bağlıdır. Ayrıca resimlerin sıralı bir şekilde gelmesi önemlidir.

Web site hızı ölçme

Google tarafından sağlanan ve sayfa denetiminin bir parçası olarak Önemli Web Verileri sunan birçok araç vardır;

Google PageSpeed Insights

GTmetrix

Ask4SEO

Sorunlardan biri, bazı araçların saha verileri yerine laboratuvar verilerini kullanması ve Google’ın sayfalarınızı yalnızca saha verilerine göre sıralamasıdır. Ayrıca bu araçları, yalnızca alan FID metriğini laboratuvarda ölçülen TBT (Toplam Engelleme Süresi) metriğiyle değiştirdikleri için ayırt edebilirsiniz. Ayrıca bir sonraki aşamada web sitenizi hızlandırıyoruz.

Web sitenizde sayfa hızı nasıl artırılır?

Aşağıda, en yaygın optimizasyon fırsatlarından bazılarının yanı sıra bunlardan nasıl yararlanabileceğinize ilişkin tavsiyeler yer almaktadır.

1. Görüntü boyutlarını ayarlayın

Resim boyutlarını ayarlamadığınız zaman, tarayıcının resimlerinizi doğru şekilde boyutlandırması zaman alır. Veya site yükleme hızınız oldukça düşer. Bu, sayfanızdaki içeriğin etrafta dolaşacağı veya CLS puanınızı olumsuz etkileyeceği anlamına gelir.

Bu sorunu önlemek için, resimleriniz için her zaman genişlik ve yükseklik özelliklerini şu şekilde ayarlayın:

<img src=”seo.jpg” width=”640″ height=”360″ alt=”seo” />

Bu bilgilerle, herhangi bir tarayıcı görüntü boyutlarınızı hesaplayabilir veya sayfada yeterli yer ayırabilir. Ayrıca CLS sorunlarınız büyük ölçüde çözülmüş olur.

2. Görüntüleri yeni nesil formatlarda sunun

Güvenilir jpeg ve png formatlarımız artık AVIF, JPEG 2000, JPEG XR ve WebP’ye kıyasla çok daha kötü sıkıştırma ve kalite özelliklerine sahip.

Listelenen bu biçimlerden WebP, muhtemelen site hızlandırma için ilk düşünülmesi gereken biçimdir. Hem kayıplı hem de kayıpsız sıkıştırmayı destekler, ayrıca şeffaflık ve animasyona izin verir. Bunun da ötesinde , WebP dosyaları genellikle benzer kalitedeki PNG’lerden ve JPEG’lerden %25 ila %35 daha hafiftir .

Geçmişte WebP formatının bazı tarayıcılar tarafından desteklenmemesi yaygın bir endişe yaratıyordu. Son zamanlarda Safari, sürüm 14’te WebP desteğini eklemiştir, bu nedenle tarayıcılar arasındaki format için toplam destek artık %90’ın üzerindedir.

3. Görüntüleri sıkıştır

Yeni nesil resim formatlarını kullansanız da kullanmasanız da, resimlerinizi sıkıştırmak genel sayfa boyutunu küçültmenin geçerli bir yoludur. Yine web siteniz WordPress üzerine kuruluysa WP Smush gibi resim eklentileri ile resimlerinizi toplu olarak sıkıştırabilirsiniz . Çok fazla eklenti yüklemek ve web sitenizi yavaşlatma riskini almak istemiyorsanız, çevrimiçi resim sıkıştırıcıları kullanabilirsiniz. Son çare, resimlerinizi web sitenize yüklemeden önce sıkıştırmak için grafik düzenleyicileri kullanın.

4. Ekran dışı görüntüleri erteleyin

Ekran dışı görüntüler ekranın alt kısmında görünenlerdir. Kullanıcı ilk ekranın ötesine geçene kadar bunları göremez. Ekranın üst kısmındaki alan, Google’un sayfa hızınızı ölçmek için kullandığı alandır. Bu nedenle optimizasyon çabanızın çoğunun odaklanması gereken yer burasıdır.

5. GIF’leri videoya dönüştürün

Sezgisel gelebilir, ancak gifler genellikle videolardan daha büyük bir dosya boyutuna sahip olur. Hiç mantıklı değil, nasıl olduğunu bilmiyorum, ancak büyük bir gif’i videoya dönüştürmek, boyutta %500’e kadar veya daha fazla küçülme sağlayacaktır.

Google aslında iki video formatı oluşturmayı önerir: WebM ve mp4. WebM, daha hafif olması bakımından WebP’ye benzer, ancak henüz tüm tarayıcılar tarafından desteklenmemektedir. Bu yüzden videonuzu sayfaya eklediğinizde, önce WebM sürümünü, ardından mp4 sürümünü yedek olarak listelemelisiniz:

<video otomatik oynatma döngüsü sessiz playinline>  <source src=”animation.webm” type=”video/webm”>  <source src=”animation.mp4″ type=”video/mp4″> </video>

6. Kullanılmayan CSS’yi erteleyin

Kullanılmayan CSS, bir tarayıcının oluşturma ağacını oluşturmasını yavaşlatabilir. Site hızlandırma için mesele şu ki, bir tarayıcı tüm DOM ağacında gezinmeli ve her düğüm için hangi CSS kurallarının geçerli olduğunu kontrol etmelidir. Bu nedenle, ne kadar çok kullanılmayan CSS varsa, bir tarayıcının her bir düğüm için stilleri hesaplaması için o kadar fazla zamana ihtiyacı olacaktır.

7. JS ve CSS’yi küçültün

JS ve CSS dosyaları genellikle gereksiz yorumlar, boşluklar veya satır sonları ve kod parçaları taşır. Ayrıca çok daha küçük olmasına rağmen, bunları kaldırmak dosyalarınızı %50’ye kadar daha hafif hale getirebilir. Ücretsiz SEO araçları için Ask4SEO deneyin.

https://ask4seo.com/js-minifier

https://ask4seo.com/css-kucultme-online-css-minifier

8. Kritik CSS’yi çıkarın

Varsayılan olarak CSS, oluşturmayı engelleyen bir kaynaktır. Tarayıcı, oldukça zaman alıcı olabilen CSS dosyalarını alıp ayrıştırana kadar sayfanız oluşturulmayacak.

Bunu çözmek için, yalnızca sayfanızın ekranın üst kısmındaki alan için gerekli olan stilleri çıkarabilir ve bunları HTML belgenizin <head> bölümüne ekleyebilirsiniz. CSS dosyalarınızın geri kalanı eşzamansız olarak hareket eder. Sonuç olarak LCP puanlarınızı önemli ölçüde artıracak ve sayfalarınızın kullanıcılara daha hızlı görünmesini sağlayacaktır.

9. Sunucu yanıt süresini iyileştirin

Sunucu yanıt gecikmesi web siteniz için en tatsız olaylardan biridir. Örneğin, bunlar yavaş yönlendirme, yavaş uygulama mantığı, kaynak CPU yetersizliği, yavaş veritabanı sorguları, bellek yetersizliği gibi sorunlardır.

Bu sorunlara geliştirici olmayan kolay bir çözüm, daha iyi bir servera geçmektir. Bu, çoğu durumda paylaşılan bir barındırmadan yönetilen bir barındırma anlamına gelir. Yönetilen barındırma genellikle CDN ağları ve sayfa hızını olumlu yönde etkileyecek diğer içerik teslim yöntemleriyle birlikte gelir.

10. Erteleme/zaman uyumsuz üçüncü taraf JS

Sosyal paylaşım düğmeleri ve video oynatıcı yerleştirmeleri gibi üçüncü taraf kaynakları, kaynak tüketimi açısından çok ağır olma eğilimindedir. Ayrıca, tarayıcı bir JS parçasıyla karşılaştığında, JS ile ilgilenene kadar HTML yürütmeyi duraklatacaktır. Tüm bunlar, site hızlandırma çalışmalarında bir düşüşe sebep olur.

Sonuç olarak üçüncü taraf kaynaklarınız kullanılmıyorsa çıkartabilirsiniz. Üçüncü taraf kaynakları daha verimli bir şekilde yüklemek için zaman uyumsuz veya erteleme özniteliğini kullanabilirsiniz.

11. Üçüncü taraf kaynaklara önceden bağlanın

Kural olarak, özellikle güvenli bağlantılar kurmak çok zaman alır. Mesele şu ki, DNS aramaları, SSL anlaşmaları, gizli anahtar değişimi ve kullanıcının isteğinden sorumlu olan son sunucuya bazı gidiş gelişler gerektiriyor. Bu değerli zamandan tasarruf etmek için gerekli kaynaklara önceden bağlanabilirsiniz.

Web sitenizi üçüncü taraf bir kaynağa önceden bağlamak için sayfanıza bir bağlantı etiketi eklemeniz yeterlidir:

<link rel=”preconnect” href=”https://best4you.com.tr“>

12. Uzun görevleri bölün

Sayfanızın yürütülmesi 50 ms’den uzun süren bir JavaScript yığını olduğunda, kullanıcıya yanıt vermeyebilir. Bu sorunu çözmek için bu uzun görevleri aramanız, bunları daha küçük bölümlere ayırmanız ve eşzamansız olarak yüklemelerini sağlamanız önerilir. Bu şekilde, sayfa yükleme işleminizde yerleşik olarak kısa yanıt süreleri olacaktır.

Aşırı uzun görevleri belirlemek için Chrome Geliştirici Araçları’nı kullanabilirsiniz – bunlar kırmızı bayraklarla işaretlenmiş olanlardır:

bunları daha küçük görevlere ayırabilirsiniz.

13. Anahtar kaynakları önceden yükleyin

Önce hangi kaynakların yükleneceğine karar vermek tarayıcılara bağlıdır. Bu nedenle, örneğin komut dosyaları ve resimlerden önce genellikle CSS gibi en önemli kaynakları yüklemeye çalışırlar. Ne yazık ki, bu her zaman gitmek için en iyi yol değildir. Kaynakları önceden yükleyerek, daha sonra neye ihtiyacınız olacağını onlara bildirerek modern tarayıcılarda içerik yükleme önceliğini değiştirebilirsiniz.

<link rel=”preload”> etiketinin yardımıyla, ekranın üst kısmındaki içeriğin oluşturulmasından sorumlu kodun bir parçası olarak bir kaynağa ihtiyaç olduğunu tarayıcıya gösterebilirsiniz.

Etiketin nasıl kullanılabileceğine dair bir örnek:

<link rel=”preload” as=”script” href=”script.js” /> <link rel=”preload” as=”style” href=”style.css” /> <link rel=”preload” olarak =”image” href=”img.png” /> <link rel=”preload” as=”video” href=”vid.webm” type=”video/webm” /> <link rel=”preload” href= “font.woff2″ as=”font” type=”font/woff2″ crossorigin />

14. Tarayıcı önbelleğe almayı etkinleştirin

Tarayıcı önbelleğe alma olmadan, aynı sayfayı her ziyaret ettiğinizde tüm sayfa sıfırdan alınır. Önbellekleme ile, bazı sayfa öğeleri tarayıcı belleğinde yer alır. Doğal olarak, sayfa tekrar ziyaretlerde çok daha hızlı yüklenir

15. DOM boyutunu küçültün

Karmaşık stil kurallarına sahip çok büyük bir DOM ağacı, hız, çalışma zamanı ve bellek performansı gibi şeyleri olumsuz etkileyebilir. En iyi uygulama, toplamda 1500 düğümden az olan, maksimum 32 düğüm derinliğine sahip ve 60’tan fazla alt düğümü olan bir üst düğüm içermeyen bir DOM ağacına sahip olmaktır.

16. Çok fazla yönlendirmeden kaçının

En iyi uygulama, site hızlandırma için yönlendirmeleri tamamen kullanmamaktır. Ancak, umutsuzca bir tane kullanmanız gerekiyorsa, doğru yönlendirme türünü seçmek çok önemlidir. Kalıcı yeniden yönlendirme için 301 yönlendirmesi kullanmak en iyisidir. Ancak, diyelim ki, kullanıcıları bazı kısa vadeli tanıtım sayfalarına veya cihaza özel URL’lere yönlendirmek istiyorsanız, geçici 302 yönlendirmeleri en iyi seçenektir.

Son Söylemler

Yukarıda listelenen sorunlar, sayfa hızını etkileyebilecek sorunların tümü değil, en yaygın olanları ve iyileştirme potansiyeli en yüksek olanlardır. Optimizasyon stratejilerinizi sayfa hızı raporunuzda yansıtılan sorunlara göre ayarladığınızdan emin olun. Web sitenizin sayfalarının çoğunda bulunan sorunların, site genelinde değişiklikler uygulanarak toplu olarak çözülebileceğini unutmayın.

#site hızı #site hızlandırma