BAŞLARKEN: Blog yazısı oldukça uzun. Direkt “Önemli İstekleri Önceden Yükleyin Sorunu” çözümünü okumak için sayfanın en altına inerek Özet başlığından itibaren okumanız yeterlidir. Genel konulardan da bahsettiğim için yazı uzadı. Özet kısmını okumanızda yeterlidir.

Web’de hız her şeydir. Bunun bilinciyle web sitemizi veya bloglarımızı oluşturmamız gerekir.

Ziyaretçinin tarayıcısı web sitemize istek gönderdiği anda sitemizin ziyaretçinin cihazına yüklenme süresi Google arama sonuçlarındaki görünürlük durumunu doğrudan etkilemektedir. Bu yüzden sitemiz olabildiğince hızlı olmalıdır.

Birçok geliştiriciye göre yanlış gelebilir belki ama bana göre web sitesindeki hız olayını iki farklı şekilde değerlendirmemiz gerekir. Aslında iki farklı hız ölçümlemesi olduğunu ya da olması gerektiğini savunuyorum.

1’inci hız ölçümleme şekli: Hissedilen hız

Birinci hız ölçümlemesinde kullanıcıya doğrudan yansıyan hızı değerlendirmeliyiz. Yani ziyaretçi sitemize girdiği andan itibaren yaptığı sayfa geçiş hızları.

1 saniyenin altında (0.16sn) geçiş hızına sahip web sitelerim var. Bu siteler ziyaretçi gezintisinde muhteşem bir deneyim sunuyor. Gtmetrix ölçümlerinde de 80-95 gibi ölçüm değerleri çıkıyor. Fakat aynı web sitesi aynı sayfalar Google PageSpeed Insights ölçümlemesinde 55/100 çıkıyor. Veya 35/100 de çıkabilir. 35 gibi düşük bir değer çıkmasına rağmen kullanıcı gezintisinde hızdan herhangi bir kayıp olmuyor. Sayfalar yine 0.16 saniye gibi muhteşem bir sürede yüklenebiliyor.

Bu hızlı geçişe rağmen PageSpeed Insights 35 gibi düşük bir puan çıkmasının nedeni, PageSpeed Insights ölçümlemesinin aktarım kuyruğundaki dosya sayısını ve boyutlarını tek tek hesaplamasıdır. Bunu örnekle anlatmak gerekirse;

Ör: Ziyaretçi sitemize istek gönderdiği anda sitenin tamamının yüklenmesi için ziyaretçinin tarayıcısına 20 adet css, js, görsel, font vb dosyalar yüklenmesi gerektiğini varsayalım. Bu dosyaların adet sayısı ne kadar az olursa PageSpeed test sonucunda elde edilen puan o kadar yüksek çıkacaktır. 20 dosya yerine 15 dosya gönderdiğimizde 60/100, 15 yerine 10 dosya gönderdiğimizde 75/100 veya daha az dosya gönderdiğimizde 90/100 gibi daha başarılı bir puan elde edeceğiz.

PageSpeed Insights ölçümlemesinin mantığına göre, kısacası tarayıcıya ne kadar az dosya gönderirsek hız testi sonucu o kadar iyi çıkar.

2’inci hız ölçümleme şekli: Google PageSpeed

Yukarıdaki cümlede de bahsettiğim gibi ziyaretçi tarayıcısına ne kadar az sayıda ve boyutta dosya gönderirsek hız testi sonucu o kadar yüksek çıkacaktır.

Web sayfasına ziyaretçi tarafından istek gönderildiği zaman sayfanın görüntülenebilmesi için 10 adet css dosyası inmesi gerekiyorsa bunun sayısını kolaylıkla sıkıştırma/cache programlarıyla düşürebilirsiniz. Bu yazıyı okuyorsanız muhtemelen cache uygulamaları ile css, js sıkıştırma ve birleştirme yöntemlerini biliyorsunuzdur. Bu işlemleri yaptığınızda PageSpeed puanınız dosya sayısı azalmasından dolayı birkaç tık yükselecektir.

Fakat tüm cache uygulamalarını denemenize rağmen bir türlü bertaraf edemediğiniz hata sonuçları da karşınıza çıkacaktır Page Speed test raporunda. Bunlardan biri de yazının asıl konusu olan “Önemli İstekleri Önceden Yükleyin” sorunu. Bu sorun genellikle cache eklentileriyle vs kolay kolay giderilemeyen sorunlardan biridir. Aslında sitenin gezinti sırasında hissedilen hızı yine 0.30 sn olsa da Google Page Speed sadece “önceden yükleme metodu” kullanılmayan dosyalar yüzüne puanınızı sanki siteniz yanıt vermiyor derecesinde yavaşmışçasına düşürüyor. Aslına baktığımız zaman sayfalar yine çok hızlıdır, Gtmetrix sonuçlarına baktığınız zamanda hızlıdır.

Bazı müşterilerim Page Speed testi yapıp “web sitemin hızı 100 üzerinden 65 çıktı” diyor. Siteye baktığımız zaman site ön bellek teknolojisi de kullanarak 1 saniyenin altında yükleniyor ve yine 1 saniyenin altında geçiş sürelerine sahip. İşte bu noktada bana göre iki farklı ölçümleme olmalı dediğimde, tam olarak demek istediğim bu. Site hızlı fakat artarımdaki dosya sayısı ve boyutları Page Speed testinden düşük puan almaya neden oluyor. Bu düşük puan sitenin kullanımdaki hıza ise olumsuz etki etmiyor, siteler yine aynı hızda yükleniyor.

Google Page Speed testinde nasıl yüksek puan alırım?

Google Page Speed testinden yüksek puan almak için dosya sayısını ve boyutlarını azaltacağımızı biliyoruz. Tüm işlemlere rağmen test raporunda çıkan “Önemli İstekleri Önceden Yükleyin” sorunu gidermek için en kolay yöntem aşağıdaki gibidir.

“Önemli İstekleri Önceden Yükleyin” uyarısını, site için gerekli olan kaynakların (css, js, font vb) önceden tarayıcı tarafından talep edilmesi ve yüklenmesiyle çözülür.

Hemen test edelim; bakalım bu bloğumda “Önemli İstekleri Önceden Yükleyin” uyarısını veren dosya hangisiymiş.

Yukarıda görüldüğü gibi bloğumda “Önemli İstekleri Önceden Yükleyin” hatasına neden olan şey bir font dosyasıymış. Bunun önceden yüklenmesini sağlayarak sorunu gidermeye çalışacağım. Bu sorunu gidermek içinde kullanılacak kod yapıları da aşağıdaki gibi. Aşağıdaki kodu temamızda bulunan </head> etiketinden önceki satıra eklemek yeterli olacaktır.

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="ui.js" as="script">
<link rel="preload" href="font ismi.woff2" as="font" type="font/woff2">

Benim bloğumdaki hataya neden olan dosya türü bir font olduğu için benim kullanmam gereken kod üçüncü sıradaki type=”font/woff2″ olandır. Sitemdeki fontun bulunduğu dizin ise /themes/tema/assets/font-awesome/webfonts/ dosya ismi de fa-solid-900.woff2.

Bu durumda <head> etiketleri arasına eklemem gereken kod aşağıdaki gibi;

<link rel="preload" href="/webfonts/fa-solid-900.woff2" as="font" type="font/woff2"> 

Önceden yüklenmesini istediğimiz fontun tam dizinini de ekleyebiliriz istersek, örneğin: href=”https://orhantekten.com/tema/tema-adı/webfonts/fa-solid-900.woff2″ gibi. Nasıl sonuç alabiliyorsanız onu kullanın.

Fontu önceden getirdikten sonra Google Speed sonucunda artık “Önemli İstekleri Önceden Yükleyin” hatasını almıyorum.

“Önemli İstekleri Önceden Yükleyin” hatasının nedeni sadece font değil de css ve js dosyaları olsaydı onlar içinde aynı şekilde head etiketlerimin arasına preload kodu ekleyecektim.

Özet:

Google Speed Test sonucunda alınan “Önemli İstekleri Önceden Yükleyin” hatasını gidermek için, raporda çıkan ve önceden getirilmesi istenilen dosyaları aşağıdaki kodları kullanarak önceden yüklenmesini sağlayın. Bu kodları tema dosyasındaki header.php de bulunan head etiketleri arasına ekleyerek kullanabilirsiniz.

Mavi renkli olan yerleri hata raporunda çıkan kendi dosyanızın ismiyle değiştirmeniz gerekir.

<link rel="preload" href="styles.css" as="style">
<link rel="preload" href="ui.js" as="script">
<link rel="preload" href="font ismi.woff2" as="font" type="font/woff2">

Yukarıdaki kodları kullanırken dikkat etmeniz gereken, hız testi sonucu raporunda önceden yüklenilmesi istenilen dosyanın türü ne ise ona göre doğru kodu seçmeniz gerekir.

Örneğin css dosyasının önceden getirilmesi isteniyorsa aşağıdaki kodu

<link rel="preload" href="styles.css" as="style">

Js dosyasının önceden getirilmesi isteniyorsa aşağıdaki kodu

<link rel="preload" href="ui.js" as="script">

Font dosyasının önceden getirilmesi isteniyorsa da aşağıdaki kodu kullanmanız gerek

<link rel="preload" href="font ismi.woff2" as="font" type="font/woff2">

Yukarıdakileri yaptığınız halde “crossorigin” hatası alıyorsanız kodu aşağıdaki gibi kullanan (sonuna crossorigin ekleyin)

<link rel="preload" href="font ismi.woff2" as="font" type="font/woff2" crossorigin>

Not: Tema güncellemenizde yaptığınız değişiklikler kaybolabilir. Değişiklikleri not almanız önerilir..