Bu kılavuzda, PageSpeed Insights kuralları, kritik oluşturma yolu optimize edilirken nelere dikkat edilmelidir ve neden gerektiği bağlamında incelenir.
Oluşturmayı önleyen JavaScript ve CSS'yi ortadan kaldırma
İlk oluşturma işleminin en kısa sürede gerçekleştirilmesi için sayfadaki kritik kaynakların sayısını en aza indirin ve (mümkünse) ortadan kaldırın, indirilen kritik bayt sayısını en aza indirin ve kritik yol uzunluğunu optimize edin.
JavaScript kullanımını optimize edin
async olarak işaretlenmedikleri veya özel bir JavaScript snippet'i ile eklenmedikleri sürece JavaScript kaynakları varsayılan olarak ayrıştırıcı engellemektedir. Ayrıştırıcı engelleme JavaScript'i, tarayıcıyı CSSOM'yi beklemeye zorlar ve DOM oluşturma işlemini duraklatır. Bunun sonucunda, ilk oluşturma süresini önemli ölçüde geciktirebilir.
Eşzamansız JavaScript kaynaklarını tercih edin
Eşzamansız kaynaklar, belge ayrıştırıcının engellemesini kaldırır ve tarayıcının komut dosyasını yürütmeden önce CSSOM'de engelleme yapmamasını sağlar. Genellikle, komut dosyasının async özelliğini kullanabilmesi, ilk oluşturma işlemi için gerekli olmadığı anlamına da gelir. İlk oluşturma işleminden sonra komut dosyalarını eşzamansız olarak yüklemeyi deneyin.
Eşzamanlı sunucu çağrılarını önleme
unload işleyicilerde XMLHttpRequests tarafından gönderilen verileri sınırlamak için navigator.sendBeacon() yöntemini kullanın. Birçok tarayıcı bu tür isteklerin eşzamanlı olmasını gerektirdiğinden, sayfa geçişlerini bazen fark edilecek şekilde yavaşlatabilir. Aşağıdaki kod, sunucuya veri göndermek için unload işleyici yerine pagehide işleyicideki navigator.sendBeacon() öğesinin nasıl kullanılacağını göstermektedir.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
Yeni fetch() yöntemi, eşzamansız olarak veri isteğinde bulunmanın kolay bir yolunu sunar. Henüz her yerde kullanılamadığından özelliği kullanmadan önce varlığını test etmek için özellik algılamayı kullanmanız gerekir. Bu yöntem, yanıtları birden fazla etkinlik işleyici yerine Promise ile işler. XMLHttpRequest yanıtının aksine getirme yanıtı, Chrome 43'te başlayan bir akış nesnesidir. Bu, json() çağrısının da bir Promise döndürdüğü anlamına gelir.
<script>
fetch('./api/some.json')
.then(
function(response) {
if (response.status !== 200) {
console.log('Looks like there was a problem. Status Code: ' + response.status);
return;
}
// Examine the text in the response
response.json().then(function(data) {
console.log(data);
});
}
)
.catch(function(err) {
console.log('Fetch Error :-S', err);
});
</script>
fetch() yöntemi de POST isteklerini işleyebilir.
<script>
fetch(url, {
method: 'post',
headers: {
"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
},
body: 'foo=bar&lorem=ipsum'
}).then(function() { // Additional code });
</script>
JavaScript ayrıştırmasını ertele
Tarayıcının sayfayı oluşturmak için yapması gereken iş miktarını en aza indirmek amacıyla, ilk oluşturma işleminde görünür içeriği oluşturmada kritik öneme sahip olmayan komut dosyalarını erteleyin.
JavaScript'i uzun süre çalıştırmaktan kaçının
Uzun süre çalışan JavaScript, tarayıcının DOM ve CSSOM'yi oluşturmasını ve sayfayı oluşturmasını engeller. Bu nedenle, ilk oluşturma için gerekli olmayan başlatma mantığı ve işlevlerini sonraki bir zamana erteleyebilirsiniz. Uzun bir başlatma sırasının çalışması gerekiyorsa tarayıcının aradaki diğer etkinlikleri işlemesine olanak tanımak için bunu birkaç aşamaya bölmeyi düşünün.
CSS Kullanımını Optimize Edin
Oluşturma ağacını oluşturmak için CSS gereklidir ve JavaScript genellikle sayfanın ilk oluşturma sırasında CSS'de engeller. Gerekli olmayan tüm CSS'lerin kritik olmayan (örneğin, basılı ve diğer medya sorguları) olarak işaretlendiğinden ve kritik CSS miktarının ve yayınlama süresinin mümkün olduğunca az olduğundan emin olun.
CSS'yi doküman başlığına koyun
Tarayıcının <link> etiketlerini keşfedebilmesi ve CSS isteğini mümkün olan en kısa sürede gönderebilmesi için tüm CSS kaynaklarını HTML belgesi içinde mümkün olduğunca erken belirtin.
CSS içe aktarma işlemlerini önleme
CSS içe aktarma (@import) yönergesi, bir stil sayfasının başka bir stil sayfası dosyasından kuralları içe aktarmasına olanak tanır. Ancak kritik yola ek gidiş dönüşler eklediklerinden bu yönergelerden kaçının: İçe aktarılan CSS kaynakları yalnızca @import kuralına sahip CSS stil sayfası alınıp ayrıştırıldıktan sonra keşfedilir.
Satır içi oluşturma engelleyici CSS
En iyi performansı elde etmek için kritik CSS'yi doğrudan HTML dokümanının içine satır içine almayı düşünebilirsiniz. Bu yaklaşım, kritik yolda ek gidiş dönüşleri ortadan kaldırır ve doğru şekilde yapılırsa yalnızca HTML'nin engelleyici bir kaynak olduğu "tek gidiş dönüş" kritik yol uzunluğu sağlayabilir.