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 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 aracılığıyla 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, belge ayrıştırıcının engellemesini kaldırır ve tarayıcının komut dosyasını yürütmeden önce CSSOM'yi engellemekten kaçınmasına olanak tanır. Komut dosyası async
özelliğini kullanılabiliyorsa genellikle bu, ilk oluşturma için gerekli olmadığı anlamına da gelir. İlk oluşturma işleminden sonra komut dosyalarını eşzamansız olarak yüklemeyi düşünün.
Eşzamanlı 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şlerini zaman zaman fark edilir bir şekilde yavaşlatabilirler. Aşağıdaki kod, sunucuya veri göndermek için unload
işleyici yerine pagehide
işleyicisinde navigator.sendBeacon()
özelliğinin nasıl kullanılacağını gösterir.
<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 bulunmak için kolay bir yol sağlar. Henüz her yerde kullanılamadığından, kullanımdan önce mevcut olup olmadığını test etmek için özellik algılamayı kullanmanız gerekir. Bu yöntemde yanıtlar, birden fazla etkinlik işleyici yerine Promises ile işlenir. XMLHttpRequest yanıtının aksine getirme yanıtı, Chrome 43'te başlayan bir akış nesnesidir. Yani json()
için yapılan bir çağrı da Vaat döndürür.
<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ı ertele
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 mantığı için gerekli olmayan tüm başlatma mantığı ve işlevlerini sonraki bir zamana erteleyin. Uzun bir başlatma sırasının çalışması gerekiyorsa tarayıcının aradaki diğer etkinlikleri işleyebilmesi için diziyi birkaç aşamaya bölebilirsiniz.
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önergesi, bir stil sayfasının başka bir stil sayfası dosyasındaki kuralları içe aktarmasına olanak tanır. 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 dokümanına satır içi olarak ekleyebilirsiniz. Bu da kritik yoldaki ek gidiş dönüşleri ortadan kaldırır ve doğru yapılırsa yalnızca HTML'nin engelleyen kaynak olduğu "tek gidiş dönüş" kritik yol uzunluğu sağlayabilir.