Atakan Erdoğan

İ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 Optimizasyonu

Webtures Anlamlı Boya Alanı

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.

fmp optimize farkı

İlk Boya Alan Optimize Farkı

Web sayfanızın İlk Anlamlı Boya ve Tamamen Yüklenme Süresini https://www.webpagetest.org/ veya https://developers.google.com/speed/pagespeed/insights/ sitesini kullanarak görebilirsiniz.

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

page speed ilk anlamlı boya

Page Speed Sonuçlarında İlk Boyalı Alan

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

hurriyet ilk anlamlı boya

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

tatil sepeti ilk 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.

Yorumları Oku (1)

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

E-posta hesabınız yayımlanmayacak.