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ı engellemesindedir. JavaScript'i engelleyen ayrıştırıcı, tarayıcıyı CSSOM'yi beklemeye zorlar ve DOM oluşturmayı 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. İlk oluşturma işleminden sonra komut dosyalarını eşzamansız olarak yüklemeyi düşünün.
Senkronize sunucu çağrılarından kaçının
Şu görevde XMLHttpRequests tarafından gönderilen verileri sınırlandırmak için navigator.sendBeacon() yöntemini kullanın:
unload işleyiciler. 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şleyicisinde 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, görünür içeriğin ilk oluşturma işlemi için oluşturulmasında kritik olmayan, gerekli olmayan komut dosyalarını erteleyin.
Uzun süre çalışan JavaScript'lerden kaçının
Uzun süre çalışan JavaScript'in, tarayıcının DOM, CSSOM oluşturmasını ve sayfayı oluşturmasını engellediğinden, ilk oluşturma için gerekli olmayan herhangi bir başlatma mantığını daha sonraki bir zamana 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 kurulumu sırasında CSS'de engeller. Gerekli olmayan tüm CSS'lerin (örneğin, basılı ve diğer medya sorguları) kritik olmayan CSS olarak işaretlendiğinden ve kritik CSS'nin miktarı ile bunların teslim 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şfedebilmesi ve CSS isteğini mümkün olan en kısa sürede gönderebilmesi için tüm CSS kaynaklarını HTML dokümanında mümkün olduğunca erken belirtin.
CSS içe aktarmalarını önleme
CSS içe aktarma (@import) yönü, bir stil sayfasının başka bir stil sayfası dosyasından kural içe aktarmasını sağlar. Bununla birlikte, kritik yola ek gidiş gelişlere yol açtığından bu yönergelerden kaçının: İçe aktarılan CSS kaynakları yalnızca @import kuralı içeren 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 için kritik CSS'yi doğrudan HTML belgesine satır içi olarak ekleyebilirsiniz. Böylece kritik yoldaki ek gidiş gelişleri ortadan kaldırır ve doğru yapılırsa "tek gidiş dönüş" yapabilir. yalnızca HTML'nin engelleyen bir kaynak olduğu kritik yol uzunluğu