Ana iş parçacığı çalışmasını en aza indir sorunu; tasarıma, görselliğe, fonksiyonelliğe önem veren site temalarını kullanan internet sitesi sahiplerinin sıkça yaşadığı bir sorundur.
Bu sorun Google Pagespeed Insights uygulamasındaki hız indeksi bölümünü etkileyen en temel unsurdur. Hız indeksi değerini anormal şekilde büyüterek, sayfa hız puanının ciddi şekilde düşmesine sebep olur. Bu yazıda, bu sorunun sebepleri ve çeşitli çözüm yolları hakkında detaylı bilgiye ulaşabilirsiniz.
Ana İş Parçacığı Sorununa Ne Sebep Olur?
Ana iş parçacığı çalışmasını en aza indir hatası genellikle CSS ve JS dosyalarından kaynaklanır. Bu hatayı aldığımızda karşımıza çıkan şu sonuç ekranından da anlayabiliriz:
.#. Style & Layout: İnternet sitenizin tasarımını özgün hale getirmenizi sağlayan, daha hoş bir ifadeyle sitenizin makyajı olarak ifade edebileceğimiz CSS (.css) dosyaları
.#. Script Evaluation: İnternet sitenizin dinamik olmasını ve daha işlevsel olmanızı sağlayan aynı zamanda çift taraflı (kullanıcı ve sunucu) çalışmasını sağlayan JavaScript (.js) dosyaları
.#. Optimize edilmemiş görsel, video ve reklamlar, HTML dosyaları gibi diğer ara unsurlar
Ana İş Parçacığı Çalışmasını En Aza İndir Sorununun Çözümü
1- CSS ve JS Optimizasyonları
✅ Javascript dosyalarının ertelenmesini ve geç yüklenmesini sağlayarak sitenizi hızlandıran şu yüklenme metodunu kullanın: JS Files Deferred
✅ Kullanılmayan CSS vs JS dosyalarını kaldırdıktan sonra CSS ve JS dosyalarının boyutunu şu işlem ile azaltın: Minify CSS & JS
(Bu işlem dosyadaki yorum satırlarını ve boşlukları kaldırarak dosya boyutunun hatırı sayılır miktarda küçülmesini sağlar.)
✅ Sitenizde birden fazla stil (CSS) dosyası varsa bunları tek bir stil (CSS) dosyasında birleştirmeye çalışın.
✅ Sitenizde HTML içi CSS dosyası varsa bunları harici CSS dosyasına taşıyın.
✅ Stil (CSS) dosyalarının daha planlı ve daha düzenli olmasını sağlayan şu işlemi yapın: Inline Critical Path CSS
2- Görsel Optimizasyonlar
✅ Site tasarımında sadeleştirmeler yapın. Mesela mobil sayfalarda kenar bileşenlerini kaldırın, emojileri kaldırın veyahut her sayfada ortaklaşa bulunan footer bölümünü sade hale getirin.
✅ Görsellerin, videoların ve reklamların sayfayı kaydırdıkça yüklenmesini sağlayan lazy load özelliğini kullanın. Bu konuda detaylı bilgi için şu yazımıza bakabilirsiniz:
(Ayrıca Bakınız: Lazy Load Nedir? Ne İşe Yarar?)
3- Teknik Optimizasyonlar
✅ Sitenizde kullandığınız temanın kendine ait ön bellek ve optimizasyon eklentileri varsa onları kullanın. Eğer yoksa, tema yapımcısının veya kullanıcılarının önerdiği eklentilerini kullanın. Unutmayın ki, onlar da sizinle aynı yollardan geçmişlerdir.
✅ Yazı tipleri (fontlar) sayıca ne kadar fazla ise ana iş parçacığı çalışmasını en aza indir sorununun çözümü o kadar zorlaşacaktır. Bu sebeple mobil, masaüstü veya ikisinde birden (artık nerede sorun yaşıyorsanız) özel seçilmiş fontları (yazı tiplerini) kapatın.
✅ Çeşitli eklentiler veyahut özel kodlamalar aracılığı ile yazı tipleri için farklı yükleme metotları deneyebilirsiniz. Genellikle şu yükleme metotları kullanılır:
Header’de Yükletmek: Yazı tiplerini sayfanın üst bölümünde yükletmek fontların hızlı yüklenmesini sağlar ama sayfayı oluşmayı engelleyen (render-blocking) hale getirdiği için sayfanın açılma süresi uzar.
Header’de Preload Olarak Yükletmek: Yazı tipleri sayfanın üst bölümünde yükleninceye kadar özel yazı tiplerini değil de standart yazı tipini göstermek (preload) yazı tiplerinin geç yüklenmesini sağlar ama oluşmayı engelleyen (render-blocking) olmadığı için sayfa hemen yüklenir.
Webfonts.Js Kullanmak: Webfonts.js dosyası ile senkronize şekilde dosya yüklenmesi yapabilirsiniz.
Önemli Olan Sayfanın Yüklenme Süresidir!
Siteniz açısından en önemli olan iki şey, ilk zengin içerikli boya (FCP) ve ilk giriş gecikmesidir. Bu değerler düşük olursa site açılmaması gibi bir sorun yaşanmayacağı için kişi içeriğe göz atacaktır. Yani içiniz rahat olsun. İnanmayanlar olur diye bizzat Google hız testi sonuç sayfasında yazanı okuyalım:
Teşhis: Uygulamanızın performansı hakkında daha fazla bilgi. Bu sayılar performans skoruna doğrudan etki etmezler.
Ana iş parçacığı çalışmasını en aza indir: JS’yi ayrıştırma, derleme ve yürütme için harcanan zamanı kısaltmayı düşünün. Daha küçük JS yüklerinin sağlanması bu konuda yardımcı olabilir.
➽ Google Pagespeed hatalarının çözüm yolları hakkında detaylı bilgi almak ve tüm bu hataları analiz ederek sitenizi nasıl hızlandırabileceğinizi öğrenmek için “Google Pagespeed İnsights ile Site Hızlandırma” adlı yazımıza göz atmanızı öneriyoruz.
“Ana iş parçacığı çalışmasını en aza indir sorununun çözümü” konulu yazımız hakkında eklemek istediklerinizi, sorularınızı ve (eğer varsa) yazıdaki yanlışları yorumlarda belirtebilirsiniz.
Yazıyı da yazının altındaki (logolu) paylaşım tuşlarını kullanarak gönül rahatlığı ile paylaşarak bize büyük bir iyilik yapabilirsiniz.