İ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.
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.
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.
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
https://www.tatilsepeti.com/fethiye-otelleri
İ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.
