Google Lighthouse‘un “Aşırı büyük bir DOM boyutundan kaçının” uyarısı dikkat etmeniz gereken bir performans ölçümüdür. Bunun Belge Nesne Modeli – The Document Object Model (DOM) konusunu dikkatlice inceleyip, bu yazımızda Türk SEM SEO uzmanlarımız tarafından kullanılan DOM aracını sizlerle paylaşacağız. Büyük bir DOM boyutu performans sorunlarına, bakım sorunlarına ve çok daha fazlasına neden olabilir.
Bu Türk SEM blog yazımızda Google Lighthouse’daki ‘Aşırı büyük bir DOM boyutundan kaçının‘ uyarısını nasıl çözeceğinizi göstereceğiz. Öncelikle, bunun ne anlama geldiğini anlamanıza yardımcı olalım.
DOM Kontrol Aracı
Türk SEM SEO Uzmanları tarafından kullanılan DOM kontrol aracını şimdi herkes kullanabilir. Aracımızda 5 temel DOM kontrolü gerçekleştirilip, düzenlemeniz gereken kısımlar tek tek açıklanmaktadır. Tüm DOM düzenlemelerini görebilirsiniz.
Araç üzerinde uzun süreli çalışmalar yapacaksanız Tüm DOM hataları test aracı sayfasından çalışmalarınızı gerçekleştirebilirsiniz.
“Aşırı büyük bir DOM boyutundan kaçının” uyarısının anlamı nedir?
DOM, esasen sitenizdeki farklı öğelerin bir tür veritabanı veya çıktısı diyebiliriz. Bu veriler başlıklarınızı, paragraflarınızı, resimlerinizi, bağlantılarınızı ve daha fazlasını içerir. Bunun iyi bir görsel temsilini Elementor gibi bir WordPress sayfa oluşturucu eklentilerin kod çıktısı olarak gösterebiliriz.
Genel olarak her Elementor widget’ı tüm ‘DOM ağacı’ içindeki bir öğe olacak şekilde kod açar ve kapatır. Bunu tarayıcınızın DevTools veya Inspect Element ekranlarında görebilirsiniz:
Pagespeed’te DOM ile ilgili bir uyarı aldıysanız şu şekilde olmalıdır.
Aslında mesah oldukça açık: ‘Aşırı büyük bi DOM boyutundan kaçının.’ Lighthouse bu uyarıyı üç alanda bildirir:
- Sayfanın toplam öğe sayısı. DOM ağacında 800’den fazla öğeniz varsa Lighthouse’da bir uyarı görürsünüz.
- En fazla sayıda iç içe geçmiş öğeyi içeren kod parçasını temsil eden bir değer maksimım değerden fazlaysa – maksimum DOM derinliği uyarısı verir.
- Lighthouse ayrıca, HTML öğelerinden ziyade DOM ağacındaki herhangi bir nesne olan ve 60’tan fazla ‘alt’ düğüme sahip bir ana düğüm hakkında da bilgi verecektir.
Ancak, bu metriğin Google Lighthouse için bir ‘Tanı’ olması nedeniyle Performans puanlarınızı doğrudan etkilemediğini söylemeliyim. Ancak DOM değerleri genel Temel Web Vitals’ın bir kısmını etkileyecektir. Boyaya Etkileşim (INP) Temel Web Vital’ın DOM boyutunuzla daha doğrudan bir ilişkisi olacaktır.
“Aşırı DOM boyutundan kaçının” uyarısı nasıl çözülür
- İyi bir kod tabanına sahip temaları ve eklentileri seçin
- Görüntüleri optimize etmek ve tembel yüklemeyi uygulamak için Optimole’u kullanmak faydalı olabilir
- Sayfalandırmayı veya sonsuz kaydırmayı uygulayıp yükü parçalayın
- Sitenizin öğelerini azaltmak için minimalizm kavramlarını sitenizde kullanın
İşin aslını söylemek gerekirse DOM konusu genellikle WordPress sitelerde tema ile alakalıdır. Sade ve doğru kodlanmamış temalar uzun ve uzun kodlarla DOM konusunda hatalara neden olmaktadır. Bu sayfa açılış süresine de direk etki etmektedir. Türk SEM web sitemiz turksem.com maalesef kullandığı temada DOM konusuna çok fazla önem vermemişler. Bu sebeple DOM değerlerimiz oldukça kötü çıkmaktadır.
Temayı değiştirmek çoğu zaman oldukça fazla zahmetlidir ve bizde bu durumu yaşıyoruz. 3 kere temamızı değiştirmek istedik ama 15 yıllık yayında olmasından dolayı oldukça zahmetli olmaktadır. Fakat; eldeki kesin veri Türk SEM’in web sayfası turksem.com ‘un temasını değiştirmemiz gerektiğidir.
TTFB değeri konusunu da yakın zamanda inceledik, ilgili konumuza da göz atabilirsiniz.
Optimize Edilmiş WordPress Teması ve Katkı Sağlayan Eklentiler
Bir çok araştırmamız sonrasında Neve Themes bizim için oldukça iyi bir seçenek olmuş. Sizde çalışmanızda kullanmak için Neve temasına bir göz atabilirsiniz.
Optimole eklentisi bir çok konuda ki temel ihtiyaçlarınıza fayda sağlayabilir. Litespeed ve Wp Rocket ile entegreli çalışabilir.
Türk SEM SEO araçları sayfamızda yayınladığımız Web Sitesi Hız Testi aracı ile de çeşitli hızla ilgili verilere ulaşabilirsiniz.
