Flat Preloader Icon

İlk Anlamlı Boya Optimizasyonu

İlk Anlamlı Boya Nedir?

Google’nin web sayfanızın hızını ölçerken kullandığı metriklerden birisi de İlk Anlamlı Boya (First Meaningful Paint)’dır. Kullanıcılar, masaüstü veya mobilden web sayfanıza giriş yaptıklarında ana içeriğin görünme süresi ilk anlamlı boya olduğundan dolayı web sayfanın tamamının yüklenmesinde yazılımsal sorunlarla karşılaşılması durumunda ilk anlamlı boyanın optimize edilmesi hem Google hem kullanıcı için hız performansında geçerli bir çözüm olacaktır.

İlk Anlamlı Boya Nedir?

Aşağıdaki görselde FMP hızı optimize edilmiş ve edilmemiş web sayfasının mili saniye bazında kullanıcıya düşen ekranları görebilirsiniz.

Anlamlı Boya

Web sayfanızın İlk Anlamlı Boya ve Tamamen Yüklenme Süresini https://www.webpagetest.org/ veya Google Page Speed sitesini kullanarak görebilirsiniz.

Page Speed sonuçlarında Lab Verileri başlığı altında görebilirsiniz.

Pagespeed

Web sayfasının tamamı 3 saniyeden fazla sürede açılsada ilk anlamlı boya optimizesi yaparak kullanıcıların hız performansından çıkmasını engelleyen iki farklı site örneği;

m.hurriyet.com.tr

Hürriyet Anlamlı Boya

https://www.tatilsepeti.com/fethiye-otelleri

Tatil Sepeti Anlamlı Boya

İlk Anlamlı Boya Süresi Nasıl Düşürülür?

1- Web sayfanızda yüklenen resimleri tamamını aynı anda yüklemek yerine Lazy Loading yöntemi ile kullanıcı scroll eylemini gerçekleştirdikçe resimleri yüklemeniz optimize sağlayacaktır. Web sayfanızda 1000 KB’lik resim dosyası olabilir ancak Lazy Loading yapmanız durumunda İlk Anlamlı Boya kısmındaki sadece 50 KB’lik resimler gelecektir.

2- Önbellek özelliğini kullanarak verilerin yüklenmesinden tasarruf edebilirsiniz. Önbellek özelliği farklı yöntemlerle kullanılabilmektedir. Doğru yöntemle sayfanıza önbellekle yükleme özelliğini aktif ettiğinizde İlk Anlamlı Boya ile beraber sayfanın tamamen yüklenme hızını da optimize edersiniz.

3- <head> kısmında bulunan kritik olmayan JS ve CSS dosyalarını sayfanızın altından çekin.

4- Resimlerinizi optimize ederek yükleyin ayrıca JPEG 2000, JPEG XR ve WebP formatlarında yükleyerek yüklenme süresini düşürebilirsiniz.

5- HTTP/1.1 yerine HTTP/2 kullanarak veri trafik hızını arttırın.

 

6- Hostinginizde GZIP sıkıştırmasını etkinleştirin.

  1. Koray Keskin dedi ki:

    Farklı bir konuyu ele almışsınız. Gayet açıklayıcı bir yazı elinize sağlık

İlk Anlamlı Boya Optimizasyonu İle Benzer Yazılar

  Dijital dünyada rekabet her geçen gün artarken, web sitenizin arama motorlarında üst sıralarda yer alması büyük önem taşımaktadır. Peki, bu başarıya ulaşmak için hangi adımları takip etmelisiniz? İşte detaylı bir SEO kontrol listesi!   Google Search Console ile Başlayın Google Search Console (GSC), web sitenizin Google’da nasıl performans gösterdiğini anlamanıza yardımcı olan ücretsiz bir […]

webtures

  Anahtar kelime, internet kullanıcılarının arama motorlarında belirli bilgilere ulaşmak için kullandığı terim ya da terimlerdir. Bu kelimeler, arama motoru sonuç sayfalarında (SERP) belirli bir sıralamada yer alarak kullanıcının ilgisini çeken ve tıklamasını sağlayan kelimelerdir. Özellikle dijital pazarlama ve SEO (Arama Motoru Optimizasyonu) çalışmalarında anahtar kelimeler, bir web sitesinin doğru kitleye ulaşmasında kritik bir rol […]

webtures

  SEO Uyumlu İçerik Nedir? 2022 SEO uyumlu içerik trendlerine bakmadan önce SEO uyumlu içerik nedir bunu inceleyelim. Her web sitesi sahibi yazdığı içeriğin ilk sıralarda olmasını, daha çok trafik alıp, daha çok insan tarafından okunmasını ister. Yazılan içeriklerin büyük çaplı arama motorları (Google, Yandex, Bing vb.)tarafından daha kolay anlaşılması ve akıllı algoritmalara uyum sağlaması […]

Eren Kartav