Bilgisayar Mühendisliği

Ana İş Parçacığı Çalışmasını En Aza İndir Sorunu

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:

Ana İş Parçacığı Çalışmasını En Aza İndir Sorununun Nedenleri
Ana İş Parçacığı Çalışmasını En Aza İndir Sorununun Nedenleri

.#. 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.)

Minify İşlemi İle Dosya Boyutu Nasıl Küçültülür?
Minify İşlemi İle Dosya Boyutu Nasıl Küçültülür?

✅ 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?)

Lazy Load Görsellerin Yüklenmesini Erteleyerek Sayfa Açılış Hızını Arttırır
Lazy Load Görsellerin Yüklenmesini Erteleyerek Sayfa Açılış Hızını Arttırır

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.

Yazı Tiplerini (Fontları) Kapatarak İnternet Sitenizi Hızlandırabilirsiniz
Yazı Tiplerini (Fontları) Kapatarak İnternet Sitenizi Hızlandırabilirsiniz

✅ Ç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.

Yazı Tipi (Font) Yükleme Ayarlarını Autoptimize Gibi Eklentiler İle Kolaylıkla Yapabilirsiniz
Yazı Tipi (Font) Yükleme Ayarlarını Autoptimize Gibi Eklentiler İle Kolaylıkla 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.

Technogezgin.com Bilgi
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.

Ana Sayfa: 
https://www.technogezgin.com/
Hayata Dair Özgün ve Kaliteli Yazılarımız: 
https://www.technogezgin.com/blog/

-Reklam-

MrKaptainTR

Merhabalar. Ben bu internet sitesinin sahibiyim. Aynı zamanda Hacettepe Üniversitesi'nde bilgisayar mühendisliği okuyorum. Bu sitede de; ufkunuzu açacak, bilgi hazinenizi katlayacak, bakış açınızı adeta uçuracak, “Vay be, adamlar bunu da mı yapmış?” dedirtecek cinsten içerikler üretmeye çalışıyorum.

3 Yorum

    1. İşte bu be :) Hocam doğrudan pagespeeddeki tüm hataların çözümleri ile ilgili bir yazı da mevcut, istersen ona da bakabilirsin.

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Başa dön tuşu
Kapalı