Web sitelerin olmazsa olmazlarından biride yükleme süresidir. Son zamanlar da daha da trend haline geldi. Çünkü milisaniyeler içerisinde binlerce trafik alan siteler günümüzde artık daha fazla ve buda bazı gereksinimleri beraberinde getirdi. 

Yükleme süresi neden önemlidir?

Öncelikle Vakit nakittir atasözü özellikle web sayfası yükleme süreleri için de geçerlidir. Sayfa yükleme süreniz, kârınız üzerinde doğrudan bir etkiye sahiptir. İnsanların hızlı bir e-mağazadan bir şey satın alma olasılığı, yavaş olandan daha fazladır. Araştırmaya göre Milisaniye , mobil sitede 0,1 saniyede milyonlarca iyileştirme yaparak, Seyahat sitelerinde dönüşümleri % 0,1 ve sipariş değerini %1,9 artırdı. Bu da dolayısı ile nakit demektir.

Dolayısıyla, karlı bir işletme kurmak istiyorsanız, sayfa yükleme sürelerinizi küçümsememelisiniz.

CSS, yükleme sürelerini nasıl etkiler?

CSS'nin bir web sayfasının yükleme süresini nasıl etkilediğini görmek için, önce tarayıcının bir HTML belgesini işlevsel bir web sayfasına nasıl dönüştürdüğünü bilmemiz gerekir.

Öncelikle, bir HTML belgesi indirmesi ve DOM (Belge Nesne Modeli) oluşturmak için ayrıştırması gerekir. Herhangi bir harici kaynakla (CSS, JS, resimler vb.) Karşılaştığında, ona bir indirme önceliği atar ve indirme işlemini başlatır. Öncelikler önemlidir, çünkü bazı kaynaklar bir sayfayı oluşturmak için kritik öneme sahipken (ör. Ana stil sayfası ve JS dosyaları) diğerleri daha az önemli olabilir (diğer medya türleri için resimler veya stil sayfaları gibi).

HTTP/1.1'in ayrıca bir alan adı başına bağlantı sayısı için kesin bir sınırı vardır (tam sayı tarayıcıya bağlıdır, bu günlerde genellikle 6'dır). Bu nedenle, bir etki alanından çok sayıda kaynak indirmek istiyorsanız, bazılarının daha yüksek öncelikli kaynakların indirilmesi bitene kadar kuyrukta beklemesi gerekir. Bu nedenle, HTTP/1.1 kullanırken istek sayısını az tutun. HTTP/2'de bu sınırlama yoktur, ancak şu ana kadar tüm siteler HTTP/2 kullanmamaktadır.

CSS söz konusu olduğunda, bu öncelik genellikle yüksektir çünkü stil sayfaları CSSOM (CSS Nesne Modeli) oluşturmak için gereklidir. Bir web sayfasını oluşturmak için tarayıcının hem DOM hem de CSSOM oluşturması gerekir. Bu tarayıcılar olmadan ekranda herhangi bir piksel oluşturamaz. Bunun nedeni, stillerin sayfanın görünümünü tanımlaması ve sayfanın görünümünü onlar olmadan ilk önce işleme güçlerinin israfı ve kötü kullanıcı deneyimi olacaktır. Yalnızca tarayıcı hem DOM hem de CSSOM'a sahip olduğunda, bunları birleştirerek oluşturma ağacı oluşturabilir ve ekranı oluşturmaya başlayabilir. Kısacası, CSS indirilmedi, sayfa oluşturulmadı.

Gördüğünüz gibi, CSS'nin web sayfanızın yükleme süresi üzerinde büyük bir etkisi var. CSS hakkında konuştuğumuzda web sayfası yükleme süresini etkileyen iki temel alan vardır:

  • CSS dosya boyutu ve sayfadaki toplam CSS miktarı (dosya sayısı). Çok büyük CSS dosyalarının indirilmesi daha uzun sürer ve bu nedenle tüm sayfanın oluşturulması çok daha fazla zaman alır (önce o büyük CSS'nin indirilmesi için beklemesi gerekir).
  • CSS'mizi ne zaman ve nasıl başlatır ve indiririz. Stillerinizi mümkün olan en kısa sürede indirmek istiyorsunuz.

    • Stil Sayfanızın Boyutunu Sınırlayın

    TLDR: Mümkün olduğunda modern kodu kullanmak için araçlarınızı doğru şekilde yapılandırın.

    Daha hızlı yükleme süreleri istiyorsanız, CSS dosyalarınızı küçültmek iyi bir fikirdir. Bu günlerde , eski tarayıcılar veya diğer bazı geliştirmeler için geri dönüşler sağlamak için CSS'yi derleme zamanında (post işlemci veya PostCSS ) değiştirmek için bazı araçlar kullanmak oldukça yaygındır .

    Gereksiz şişkinlik için sonuç kodunu kontrol etmenizi öneririm. Özellikle PostCSS'yi birden fazla eklentiyle kullanıyorsanız. Benim durumumda, CSS değişkenleri için oluşturulmuş yedekler ve eski flexbox sözdizimi için önekler içeren CSS'im vardı. Bu, çok az etkisi olan önemsiz bir sorun gibi görünebilir, ancak sonuçta elde edilen tasarruf benimki gibi küçük stil sayfaları için yaklaşık 3 kB idi. Bunun çok az iş için büyük bir gelişme olduğunu düşünüyorum. Ve büyük CSS için daha büyük bir etkiye sahip olma potansiyeline sahiptir.

    Tek yapmam gereken, belirli tarayıcı sürümleri için üretilen kodu hedeflemek için Autoprefixer ve diğer benzer araçlar tarafından kullanılan bir tarayıcı listesi yapılandırmasını güncellemekti . PostCSS yapılandırmamı da biraz güncelledim. (Ekstra alan kazanmak için medya sorgularını birleştirmek için eklentiyi de ekledim). Bkz PostCSS kaynak kodunda yapılandırma ve benim browserslist tanımını sen benim tam kurulum görmek istiyorsanız.

    Lazy-load Stylesheets Kullanımı

    CSS kullandığımız için, sayfanın oluşturulmasını engellemekten kaçınmak için stil sayfalarımızı tembel olarak yüklemek istiyoruz. Bazı eski tarayıcıları desteklemeniz gerekmedikçe, bugünlerde modern çözüm, stil sayfaları için kullandığınız normal bağlantı etiketini kullanıyor, ancak farklı medya türleri ve biraz JS ile. Bu akıllıca küçük numara, Filament Group blog gönderisinde tam olarak açıklanmıştır . Aşağıda, gönderiden tembel yükleme CSS parçacığını görebilirsiniz, ancak her şeyi okumanızı öneririm.

    <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">

    JS devre dışı bırakıldığında geri dönüşü dahil etmek isteyebilirsiniz. Bu şekilde stilleriniz normal bir şekilde yüklenir ve kullanıcı deneyimini kötü bir şekilde etkileyecek biçimlendirilmemiş içerikten kaçınırsınız.

    <link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="/path/to/my.css" media="screen">
</noscript>

     

    CSS için Kod Bölme Kullanın

    Chrome geliştirme araçlarında, Coverage (Kapsam) adlı bir araç vardır. Mevcut sayfada CSS ve JS dosyalarının hangi kısmının kullanıldığını size gösterebilir. Geliştirme araçlarını açın ve bir komut paleti açmak için Ctrl+ Shift+ tuşlarına basın pve Kapsama yazın . Paneli göstermek için Kapsamı göster seçeneğini seçin . Şimdi sayfayı yeniden yükleyin.

    Sayfada CSS kodumun neredeyse% 50'si kullanılmamıştı. Başka bir sayfayı kontrol ettiğimizde daha da fazlasını elde ederiz - kullanılmayan CSS'nin neredeyse% 54'ü. Bu çok fazla gereksiz kod. Ve bu sayı, büyük eski uygulamalarda daha da büyük olabilir.

    JS kullanırken, birden çok küçük dosya (paketler) oluşturmak için genellikle kod bölme kullanırız. Sayfa yüklenirken tek bir büyük JS paketi almak yerine, gerektiğinde bu paketleri indiriyoruz. CSS için de benzer bir yaklaşım kullanabiliriz. CSS'mizi üç farklı şekilde bölebiliriz.

    Medya sorgularına göre CSS'yi bölme

    Bu yaklaşımda, büyük CSS'nizi medya sorgularınıza göre daha küçük stil sayfalarına bölersiniz (PostCSS'nin bunun için eklentisi vardır) ve HTML'nizde bu stil sayfalarına referans verirsiniz .

    <link rel="stylesheet" href="index.css" media="all" />
<link rel="stylesheet" href="mobile.css" media="(max-width:44.9375rem)" />
<link rel="stylesheet" href="table.css" media="(min-width: 45rem)" />

    CSS kullanırken ve stil sayfasını geç yüklerken bu yaklaşımın pek bir anlam ifade etmediğini unutmayın. Tarayıcı, hangi medya sorgusu kullanılırsa kullanılsın tüm stil sayfalarını indirecektir. İndirmelere öncelik vermek için yalnızca medya özniteliğini kullanacaktır. Yani temel olarak, aktif medya sorgusu için yüksek öncelikli CSS indirecek ve stil sayfalarının geri kalanını tembel olarak yükleyecektir.

    Sayfa tabanlı kod bölme

    Diğer bir yaklaşım, her sayfa için ayrı CSS kullanmaktır. Yukarıda gördüğümüz gibi, farklı sayfalar için kullanılmayan birçok stil var. Kullanılmayan bu stilleri kaldırıp yalnızca belirli bir sayfa için gerekli olanları saklasak harika olur. Yapmayı seçtiğim şey bu. Ne yazık ki bunu yapacak herhangi bir araç bulamadım - büyük bir CSS dosyası alın ve içeriğine bağlı olarak her sayfa için daha küçük bir paket oluşturun.

    Kulağa oldukça basit geliyor, bu yüzden bir şans vermeye ve bu tür şeyleri yapabilen bir düğüm betiği oluşturmaya karar verdim. Buna CSS Split denir ve statik site oluşturucu kullanılarak oluşturulan siteler için harika çalışır ( sitem için kullandığım Eleventy gibi ). Kullanılmayan stilleri kaldırmak için PurgeCSS'yi kullanır, böylece diğer HTML olmayan dosyalar üzerinde de çalışması gerekir (belgelerine dayanarak). HTML dışında başka bir şey için test etmedim, bu yüzden bu şekilde kullanırken sonuçları iki kez kontrol ettiğinizden emin olun.

    Bu tekniği kullanarak istenen CSS'nin dosya boyutunu neredeyse% 50 oranında azaltabildim. Aşağıda, Kritik CSS ve sayfa tabanlı kod bölme uygulandıktan sonraki bazı istatistikler verilmiştir:

    single index.css for all pages:      9.2kB (without GZip)
CSS file for homepage:               5.4kB (without GZip)
CSS file for projects:               4.4kB (without GZip)

    Hala kullanılmayan baytlar olduğunu görebilirsiniz. Kapsam üzerine gelme veya odak durumları veya sorguları içermediği için sorun değil. Kullanılmayan baytları 0'a almanız pek olası değildir.

    Bileşen tabanlı kod bölme

    Bu ipucunu Harry Roberts'tan aldım . CSS'yi bileşen bazında da bölebiliriz ve yalnızca sayfada kullandığımız bileşenler (altbilgi, başlık, makale vb.) İçin aşamalı olarak CSS yükleyebiliriz. Harry'nin makalesinde bu güzel numara hakkında daha fazla bilgi edinebilirsiniz . Bahsettiğim bu teknik, makalenin son bölümünde anlatılıyor. Ancak makalenin tamamını okuyun, burada bahsetmediğim CSS ağ performansını iyileştirme hakkında harika bilgilerle dolu (zaten daha iyi yazamazdım).

    Mevcut kurulumuma kıyasla ne kadar iyi çalışacağını görmek için bu tekniği hala test etmedim, ancak Yapılacaklar listemde. Bu yüzden gelecekteki bazı makaleler için bizi izlemeye devam edin.

    Kaynak: https://pustelto.com//blog/optimizing-css-for-faster-page-loads/