Yayınlanma tarihi: 17 Ağustos 2018
Bu kılavuzda, PageSpeed Insights kuralları bağlam içinde incelenmektedir: Kritik oluşturma yolunu optimize ederken nelere dikkat edilmeli ve neden?
Oluşturmayı engelleyen JavaScript ve CSS'yi ortadan kaldırın
İlk oluşturma sürecini en hızlı şekilde gerçekleştirmek için sayfadaki kritik kaynak sayısını en aza indirin ve (mümkün olduğunda) 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 etme
JavaScript kaynakları, async olarak işaretlenmediği veya özel bir JavaScript snippet'i kullanılarak eklenmediği sürece varsayılan olarak ayrıştırıcı tarafından engellenir. JavaScript'i engelleyen ayrıştırıcı, tarayıcıyı CSSOM'u beklemeye zorlar ve DOM'un oluşturulmasını duraklatır. Bu da ilk oluşturma süresini önemli ölçüde geciktirebilir.
Eşzamansız JavaScript kaynaklarını tercih etme
Eşzamansız kaynaklar, doküman ayrıştırıcının engellemesini kaldırır ve tarayıcının komut dosyasını yürütmeden önce CSSOM'da engellemeyi önlemesine olanak tanır. Komut dosyası async özelliğini kullanabiliyorsa genellikle ilk oluşturma işlemi için gerekli değildir. Komut dosyalarını ilk oluşturma işleminden sonra eşzamansız olarak yüklemeyi deneyin.
Senkronize sunucu çağrılarından kaçının
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şleri bazen belirgin bir şekilde yavaşlayabilir. Aşağıdaki kodda, unload işleyici yerine pagehide işleyicide sunucuya veri göndermek için navigator.sendBeacon()'ün nasıl kullanılacağı gösterilmektedir.
<script>
function() {
window.addEventListener('pagehide', logData, false);
function logData() {
navigator.sendBeacon(
'https://putsreq.herokuapp.com/Dt7t2QzUkG18aDTMMcop',
'Sent by a beacon!');
}
}();
</script>
fetch() yöntemi, verileri asynkron olarak istemenin daha iyi bir yolunu sunar. fetch(), yanıtları birden fazla etkinlik işleyici yerine Vaatler'i kullanarak işler. XMLHttpRequest yanıtından farklı olarak fetch() yanıtı 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, POST isteklerini de 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'i ayrıştırmayı erteleme
Tarayıcının sayfayı oluşturmak için yapması gereken iş miktarını en aza indirmek amacıyla, ilk oluşturma işlemi için görünür içeriği oluşturmak açısından kritik olmayan tüm gerekli olmayan komut dosyalarını erteleyin.
Uzun süre çalışan JavaScript'lerden kaçının
Uzun süre çalışan JavaScript, tarayıcının DOM'u, CSSOM'u oluşturmasını ve sayfayı oluşturmasını engeller. Bu nedenle, ilk oluşturma işlemi için gerekli olmayan tüm başlatma mantığını daha sonraya erteleyin. Uzun bir başlatma sırasının çalıştırılması gerekiyorsa tarayıcının aradaki diğer etkinlikleri işlemesine izin vermek için bu sırayı birkaç aşamaya ayırabilirsiniz.
CSS Kullanımını Optimize Etme
Oluşturma ağacını oluşturmak için CSS gereklidir ve JavaScript genellikle sayfanın ilk oluşturulması sırasında CSS'de engellenir. Gerekli olmayan CSS'lerin kritik olmayan olarak işaretlendiğinden (ör. baskı ve diğer medya sorguları) ve kritik CSS'nin miktarının ve yayınlanma süresinin mümkün olduğunca kısa olduğundan emin olun.
CSS'yi doküman başlığına koyun
Tarayıcının <link> etiketlerini keşfedip CSS isteğini en kısa sürede gönderebilmesi için tüm CSS kaynaklarını HTML belgesinde olabildiğince erken bir yerde belirtin.
CSS içe aktarmalarından kaçının
CSS içe aktarma (@import) yönergesi, bir stil sayfasının başka bir stil sayfası dosyasından kural içe aktarmasını sağlar. Ancak kritik yola ek gidiş gelişler ekledikleri için bu yönergelerden kaçının: İçe aktarılan CSS kaynakları yalnızca @import kuralının bulunduğu CSS stil sayfası alındıktan ve ayrıştırıldıktan sonra bulunur.
Satır içi oluşturma engelleyici CSS
En iyi performans için kritik CSS'yi doğrudan HTML belgesine satır içi olarak ekleyebilirsiniz. Bu işlem, kritik yoldaki ek gidiş dönüşleri ortadan kaldırır ve doğru şekilde yapılırsa yalnızca HTML'nin engelleyen bir kaynak olduğu "tek gidiş dönüş" kritik yol uzunluğu sağlayabilir.