Last Updated on 15 Ağustos 2021 by Yıldırım SERTBAŞ

Öncelikli olarak Holistic SEO&Digital sahibi sevgili Koray Tuğberk Gübür’e bloğundaki “How to Load CSS Asynchronously? Eliminate Render-blocker CSS with Async CSS Feature” başlıklı makalesinden faydalanarak bu konuda bir Türkçe kaynak hazırlamamda vermiş olduğu izin nedeniyle teşekkür ederim. Makalenin orijinaline hemen aşağıya bıraktığım açık URL’den erişebilirsiniz.

Kaynak: https://www.holisticseo.digital/pagespeed/async-css/

Ayrıca kendisinin Twitter hesabı üzerinden paylaştığı kıymetli bilgilere erişebilirsiniz.

Günümüzde artık her byte’ın web sayfalarının yüklenmesi ve kullanıcıya iyi bir deneyim yaşatılması adına çok fazla önemi var. Bunun için dosya optimizasyonları da bu çalışmaların temelinde duruyor. Bu içerikte CSS dosyalarının nasıl eşzamansız olarak yüklendiğini, tarayıcılar özelliğinde hangi CSS özelliklerinin kullanılması gerektiğini ve çalışmanın kullanıcı deneyimine nasıl etki ettiğini öğreneceksiniz.

Keyifli okumalar.

Javascript dosyalarını “async” yani eşzamansız yükleme özelliğiyle yüklemek için yalnızca “async” özelliği yeterlidir.

<head>

</head>

Peki CSS’i eşzamansız(async) olarak nasıl yükleyebiliriz?

Google Pagespeed İnsights gibi araçlarda sıkça gördüğünüz oluşturmayı engelleyen kaynaklar tarayıcı tarafından yüklenmeye çalışılırken, sayfanın görünmesini sağlayan boyama, oluşturma ve web site elemanlarının yerleşimini engeller.

CSS’i async yani eşzamansız olarak yüklemek hem Core Web Vitals için önemlidir hem de web sitelerinin farklı cihaz ekran boyutlarında düzgün açılmasını sağlamak adına önemlidir.

Eşzamansız(Asynchronously) Olarak Yükleme Neden Önemlidir?

Eşzamansız yükleme, web sayfalarının oluşturulması esnasında web kaynaklarının tarayıcılar tarafından yüklenmesi ve bu sayede oluşturulması bitmiş web elemanlarının ziyaretçiye önden gösterilmesidir.

Fakat her web kaynağını async olarak getirmeye çalışmak tarayıcının iş yükünü artırıp darboğaza girmesine neden olabilir.

Tarayıcının bir sayfayı oluştururken ana iş çekirdeğini meşgul eden durumlar şunlardır:

Komut dosyası değerlendirmesi(Script Evaluation)
Stil ve düzen(Style & Layout)
Oluşturma(rendering)
HTML ve CSS’, ayrıştırma(Parsing)
Komut dosyası ayrıştırma ve derleme(Script Parsing & Compilation)

Bu ana iş çekirdeğinin ne kadar meşgul tutulduğu sayfalarınızın ne kadar hızlı açılıp açılmadığını belirleyecektir.

Hangi web elemanlarının hangi sırayla ve sync mi yoksa async mi yükleneceğini belirlemek önemlidir. CSS kaynaklarını eşzamansınız olarak yüklemek sayfa açılış hızlarınızı geliştirmek ve ziyaretçiye daha iyi bir kullanıcı deneyimi sunmak adına önemlidir.

Hangi Core Web Vitals Ve Web Sayfası Performans Metrikleri CSS’i Eşzamansız Yükleme İle İyileşebilir?

CSS dosyalarının eşzamansız olarak yüklenmesinin sağlanması, bazı web sayfası performans metriklerinin diğerlerine göre fazla olumlu olarak etkilenmesine neden olur. CSS dosyalarının daha hızlı yüklenmesi özellikle First Paint, First Contentful Paint, Largest Contentful Paint ve speed index sonuçlarının daha iyi hale gelmesini sağlar.

Largest Contentful Paint(LCP), bir web sayfasının ana içeriğinin ekranın üst kısmındaki bölüme yüklendiği andır.
First Contentful Paint(FCP), bir web sayfasının yüklenmesi sırasında, bir web sayfası bileşeninin tamamen yüklendiği andır.
First Paint ise, bir web sayfasının yüklenmesi sırasında ilk pikselin boyandığı anı ifade eder.

Tüm bu metrikler ziyaretçilerin ilk gördükleri bölüm olan header bölümünde hesaplanmaktadır.

CSS Dosyası Nasıl Yüklenir?

how to css load — Kaynak: programmersought.com

Bir HTML dokümanına CSS dosyaları yüklemenin üç farklı yolu vardır.

Satır içi CSS(inline CSS), CSS Kodlarını HTML bölümleri içindeki “stil” özniteliğine yükleme.
Dahili CSS, CSS(internal CSS) dosyalarını HTML dokümanı içindeki etiketlere yükleme.
Harici CSS(external CSS), CSS dosyalarını harici CSS dosya bağlantılarına sahip öğelere yükleme.

CSS dosyalarını eşzamansız olarak yüklemek için harici CSS dosyalarını kullanmamız gerekir.

Medya Özelliği ile CSS Dosyaları Eşzamansız Olarak Nasıl Yüklenir?

Eşzamansız yükleme Javascript’de <script async src=”onemli.js”></script> olarak uygulanırken bu CSS dosyalarında “media” özelliği ile yapılır.

Bu özellik CSS dosyalarının hangi media türlerinde geçerli olduğunu belirtir. Bu özellik için “print” değeri seçilirse tarayıcı ilgili CSS dosyasını eşzamansız olarak yükler.

Bunun nedeni ilgili CSS dosyasının yazdırılabilir(printable) web sayfası elamanı olduğunu belirtmiş olmamızdır. Bu nedenle, ilgili CSS dosyasının çok önemli olmadığı göz önüne alınarak, tarayıcı eşzamansız olarak yüklemeye izin verir.

Ancak “media” ve “print” özellik ve değer çifti ilgili CSS dosyasının yüklendikten sonra kullanılmasını engeller. Bu nedenle Javascript’in “onload event” ile ilgili CSS dosyası async olarak yüklenir. “onload = ‘this.media =’ all’” ile CSS dosyası eşzamansız olarak yüklenir ve oluşturma engelleyici etkisi olmadan kullanılabilir.

“onload event” bir web sayfasının tüm içeriği (resimler, komut dosyaları, CSS dosyaları vb. dahil) tamamen yükledikten sonra bir komut dosyasını yürütmek için çoğunlukla <body> içinde kullanılır.

Onload event, ziyaretçinin tarayıcı türünü ve tarayıcı sürümünü kontrol etmek ve bilgilere göre web sayfasının uygun sürümünü yüklemek için kullanılabilir.

Örnek bir eşzamansız yüklenen CSS dosyasının kod bütününü aşağıda görebilirsiniz.

<link rel=”stylesheet” href=”style.css” media=”print” onload=”this.media=’all'”

CSS Dosyalarının Eşzamansız Yüklenmesine Örnek Bir Çalışma

Görselde çalışma yapılan sitenin (holisticseo.digital) WordPress tabanlı sitesinde henüz sayfa hızı iyileştirmesi yapılmamış halini görüyorsunuz. Hemen ardındaki görselde de media=”print” onload=”this.media=’all’ kullanılarak kodların nasıl optimize edildiğini görebilirsiniz.

CSS eşzamansız yükleme — Kaynak: holisticseo.digital

CSS dosyalarına uygulanan async sonrası Lighthouse üzerinden alınan analiz sonucunda işaretli CSS dosyalarının oluşturmayı engelleyen kaynaklar kısmından kalktığını görebilirsiniz.

Hangi CSS Dosyalarının Eşzamansız Olarak Yüklenmesi Gerektiği Nasıl Denetlenir Ve Belirlenir?

Hangi CSS dosyalarının asenkron olarak yüklenebileceğini veya hangilerinin şu anda senkronize olduğunu denetlemek ve kontrol etmek için aşağıdaki yöntemler kullanılabilir.

Hangi CSS dosyalarının web sayfasının hangi bölümünü etkilediğini kontrol edin.
CSS dosyalarının nasıl yüklendiğini görmek için HTML kaynak kodunu kontrol edin.
Bir Lighthouse denetimi yapın veya GTMetrix, Pingdom, Speedcurve araçlarını kullanın.
CSS dosyalarını eşzamansız olarak yüklerken web sayfalarındaki değişiklikleri performans açısından görmek için deneyler yapın.

Media Özelliği ile Birlikte Print Değeri Ne Anlama Gelir?

Media özelliği için print değeri, yalnızca yazdırılabilir bir web sayfası elemanı olduğu anlamına gelir.

Bu nedenle, yazdırılabilir özellikte olan medya için bir kaynak dosya, yalnızca yazdırılabilir web sayfası öğesi için kullanılabilir.

Bir CSS dosyasının yalnızca yazdırılabilir ortamla ilgili olduğunu beyan ederseniz, tarayıcı onu web sayfasının geri kalanı için kullanamaz, bu nedenle, medya değerini “all” yapmak için “onload event” kullanmadığınız sürece, medya özelliğinde “yazdır” değerini kullanmak gereksiz olacaktır.

“media” özelliği içindeki “All” değeri, ilgili CSS dosyasının web sayfasındaki tüm medya türleri için geçerli bir dosya olduğu anlamına gelir, dolayısıyla eşzamansız olarak yüklendikten sonra tüm web sayfası için kullanılabilir.

CSS’yi Eşzamansız Olarak Yüklemek İçin Neden Sahte Ortam Türlerini Kullanmamalısınız?

Bazı geliştiriciler, CSS dosyalarını eşzamansız yüklemek için “sahte” ortam türlerini kullanmayı dener. Bu, dosyaların yükleme sürecini daha hızlı hale getirmek için “var olmayan” veya “geçersiz” ortam türlerini kullanmaya çalıştıkları anlamına gelir.

Bazı tarayıcılar, sahte ortam türü içeren dosyaları yüklemeyi reddeder veya sona erdirir. Önemli CSS dosyalarını eşzamansız olarak yüklemek için medya özelliğini kullanmanın nedeni, kullanıcının gerekli stil efektleriyle ilgili web sayfasını daha önce görmesine izin vermektir.

Sahte medya türü ile kullanılan CSS dosyaları, tarayıcı tarafından kod hatası olarak algılanabilecekleri için hiç yüklenmeme riskine sahiptir ve yükleme hızını yavaşlatabilir. Ayrıca, sahte medya türündeki kaynaklar, Googlebot tarafından da kullanılmazlar.

Preolad CSS Dosyalarının Eşzamansız Olarak Yüklenmesini Sağlar Mı?

Preload tarayıcı özelliği, tarayıcıya bir web sayfası oluşturmak için önce hangi kaynakların yükleneceğini söyler.

Böylece daha önemli kaynaklar daha erken yüklenerek kullanıcının web sayfasından daha erken faydalanmasını sağlar.

Ancak, Firefox 59’dan bu yana preload özelliği Firefox için desteklenmemektedir. Bu nedenle, Firefox’da CSS eşzamansız yüklemek için preload özelliğini kullanmak şu anda mümkün değildir. Chrome, Opera ve Safari tarafından desteklenen önyükleme özelliği, aşağıdaki gibi eşzamansız olarak CSS dosyalarını yüklemek için kullanılabilir.

<link rel=”preload” href=”style.css” as=”style” onload=”this.rel=’stylesheet'”>

“style.css” dosyasını eşzamansız olarak yükledikten sonra mümkün olan en yüksek önceliğe sahip olarak getirmek için ön yükleme tarayıcı ipucunu kullanıldı. Tarayıcının onu web sayfasının stilleri için bir kaynak olarak kullanabilmesi için “onload” aracılığıyla “rel” özelliğinin değeri tekrar “stylesheet”e çevrildi.

CSS Dosyalarını Chrome ve Firefox’ta Eşzamansız Olarak En İyi Şekilde Nasıl Yüklerim?

CSS dosyalarını hem Chrome hem de Firefox’ta eşzamansız yüklemek için, “preload” özelliği ve “media=’print'” özelliğini ve onload event özelliğini sıralı bir şekilde kullanabiliriz. Firefox ve Chrome’da oluşturmayı engelleyen kaynak olmadan CSS dosyalarını yüklemek için aşağıdaki kodları kullanabilirsiniz.

<link rel=”preload” href=”style.css” as=”style” onload=”this.rel=’stylesheet'”>

<link rel=”stylesheet” href=”style.css” media=”print” onload=”this.media=’all'”

Yukarıdaki bu örnekte, onu destekleyen tarayıcılar için önce önyükleme özelliğini kullanıldı, daha sonra CSS dosyalarının asenkron yüklenmesi için “media” özniteliğini kullanıldı. Dolayısıyla, tarayıcı önyükleme özelliğini destekliyorsa, yalnızca ilk kod satırını kullanır, “önyükleme” tarayıcı ipucunu desteklemiyorsa, “yazdır” medya özniteliği ile CSS dosyasını alır ve yükler. asenkron olarak.

Oluşturmayı Engelleyen Kaynaklar Oluşturmadan Javascriptle CSS Dosyaları Nasıl Yüklenir?

Javascript ile eşzamansız olarak CSS dosyaları yüklemek mümkündür.

Bunun için ilgili CSS dosyası bir değişkene eklenir ve Javascript yardımıyla head bölümünün sonuna eklenir.

Javascript “async” olarak çalıştırılabildiğinden, CSS dosyalarını Javascript ile asenkron olarak yüklemek mümkündür.

CSS dosyalarını herhangi bir türde oluşturmayı engelleyen kaynak etkisi olmadan eşzamansız olarak yüklemek için aşağıdaki kod örneğini kullanabilirsiniz.

var styleCSS= document.createElement(“link”);
styleCSS.rel = “stylesheet”;
styleCSS.href = “style.css”;
document.head.insertBefore(styleCSS, document.head.childNodes[document.head.childNodes.length – 1].nextSibling);

Kod bloğunun açıklamasını aşağıda bulabilirsiniz.

Yukarıdaki kod bloğunda “document.createElement()” metodu ile oluşturduğumuz link elementini saklayan bir değişken oluşturuldu.
Stil sayfasını “rel” değerimiz olarak belirtmek için “rel” yöntemi kullanıldı.
CSS dosyamızın URL’sini ve uzantısını belirtmek için “href” yöntemi kullanıldı.
“styleCSS” değişkeninde saklanan CSS dosyamızı “stylesheet” ve “style.css” değerleri ile “rel” ve “href” öznitelikleri için “document.head.insertBefore()” metodu ile eklendi.
CSS link elementimizi HTML belgesinin head bölümünün sonuna eklendi.

Neden CSS Dosyalarını Javascript ile Eşzamansız Olarak Yüklemek Web Performansı İçin Yan Etkilere Neden Olabilir?

Javascript sayesinde CSS dosyalarını asenkron olarak yükleyebiliriz ancak bu Javascript kod bloğu “client-side render” olarak çalışacağı için verimini düşürecektir.

Tarayıcılar, bu dahili komut dosyası etiketleriyle karşılaştıklarında web sayfasının oluşturulmasını durduracak, ardından CSS’yi eşzamansız olarak yüklemek için javascript kodunu oluşturacaktır. Böylece web sayfasının toplam render süresi gereğinden fazla uzayacaktır.

Ayrıca bir web sayfasının stillerini ve son durumunu Javascript ile değiştirmek SEO için önerilmeyen bir durumdur. Web sayfalarının istemci tarafında oluşturulması, Googlebot ve diğer arama motoru tarayıcılarının, tarama ve oluşturma kaynaklarını tüketirken web sayfasının son halini görmekte zorlanmasına neden olabilir.

Googlebot ve Bingbot, javascript’i oluşturabilir, ancak her tarama işlemi için oluşturma kullanmazlar, bu nedenle bazen web sayfaları için istemci tarafı oluşturma yoluyla yüklenen CSS dosyalarının etkilerini kaçırabilirler ve bu, kaliteyi etkileyebilir.

Önemli CSS dosyalarının Javascript aracılığıyla yüklenmesi de optimize edilmemiş bir kaynak yükleme sırası oluşturabilir, çünkü ilgili CSS dosyası head bölümünün sonunda okunabilir, muhtemelen diğer bazı kaynaklar zaten indirilmiş olacaktır. Bu nedenle, “preload” veya “media=’print'” yöntemlerini kullanmak, web performansı ve ayrıca tarama verimliliği ve bütçesi için daha iyi olabilir.

LoadCSS.js Kitaplığı Nedir ve Eşzamansız CSS için Nasıl Kullanılır?

LoadCSS.JS kitaplığı, CSS dosyalarının eşzamansız olarak yüklenmesi için oluşturulmuş bir Javascript kitaplığıdır.

İlgili CSS dosyalarının asenkron olarak yüklenebilmesi için öncelikle “LoadCSS.js” dosyasının web sayfasına yüklenmesi gerekmektedir. Head bölümünde harici veya dahili olarak yüklenebilir. “loadCSS ()” işleviyle eşzamansız olarak HTML bütününe bir CSS’yi manuel olarak eklemek mümkündür. Aşağıda bir örnek bulunmaktadır.

loadCSS(“stylesheet.css”);

Yukarıdaki kod örneğinde, loadCSS.js dosyası bilgisayarınıza indiriliyorsa, tarayıcının CSS dosyasını eşzamansız olarak indirmesine yardımcı olur, ancak HTML DOM’a bir stil sayfası dosyası eklemek için istemci tarafı Javascript kullandığından, bu, tarayıcının CSS dosyasını eşzamansız olarak indirmesine yardımcı olur. “loadCSS.js” kütüphanesinin son versiyonunda aşağıdaki gibi asenkron olarak bir CSS dosyası indirebilirsiniz.

<link rel=”preload” href=”path/to/mystylesheet.css” as=”style” onload=”this.onload=null;this.rel=’stylesheet'”> <script> (function(){“Inlined loadCSS.js file”}()); </script>

Yukarıdaki kod örneğinde head bölümünde dahili script olarak “loadCSS.js” kullanabilirsiniz, bu, tarayıcının “preload”u desteklememesi durumunda hala asenkron olarak indirildiğini garanti edecektir.

Ancak yine de, bir onload olayıyla birlikte “media=’print'” özniteliğini kullanmak, web sayfası performansını iyileştirmek amacıyla oluşturmayı engelleyen CSS sorunlarını önlemek adına CSS’yi eşzamansız yüklemek için en iyi seçenektir.

CSS Eşzamansız Yüklenirken Neden NoScript etiketini Kullanmalısınız?

Noscript etiketi, tarayıcı “javascript”i desteklemese de kullanıcıya gerekli içeriği gösterebilmesini sağlar. Eski tarayıcılara sahip kullanıcıların gerçek içeriği olmayan bir web sayfasını görmelerini önlemek için, NoScript etiketini async CSS için bir yedek olarak kullanmak önemlidir. Aşağıda bir örnek görebilirsiniz.

Yukarıdaki örnekte, CSS dosyasını eşzamansız olarak yüklemek için Chrome, Safari ve Opera tarayıcıları için preload özniteliğini kullanıldı.
İkinci satırda, “preload” özelliği kullanılamadığı için Firefox için “media=print” seçeneği kullanıldı.
Üçüncü satırda, javascript’i desteklemeyen tarayıcılar için aynı stil sayfası ile “noscript etiketi” kullanıldı. Onload event javascript tabanlı bir olaydır, bu nedenle tarayıcı javascript kullanmıyor veya desteklemiyorsa, “NoScript etiketi” içindeki stil sayfası dosyasını kullanabilir.

Sonuç

CSS dosyalarını eşzamansız olarak yüklemek, kullanıcıların web sayfaları yüklenirken web sayfası içeriğini daha hızlı görmelerini ve kullanmalarını sağlar.

Javascript dosyalarının DOMContentLoaded Event’den sonra defer özelliği ile yüklenmesi ve Javascript dosyalarının “async niteliği” ile asenkron olarak yüklenmesinin sağlanması da web sayfasının yüklenmesi sırasında kullanıcı deneyimini iyileştirmek içindir.

Bu yapılan çalışmalar ayrıca web sayfalarının en önemli bölümünü içeren Largest Contentful Paint’deki yani ziyaretçinin head bölümünde yüklenirken gördüğü en büyük boyutlu içeriğin daha hızlı yüklenmesi ve gösterilmesi adına da oldukça önemlidir.

CSS Dosyaları Eşzamansız Olarak Nasıl Yüklenir: Oluşturmayı Engelleyen CSS’i Kaldırma