CSS Performansı Nasıl İyileştirilir

0
23

Modern web sitelerinin karmaşıklığı ve tarayıcıların CSS’yi işleme biçimi ile birleştiğinde, orta düzeyde bir CSS bile, kısıtlı cihazlar, ağ gecikmesi, bant genişliği veya veri sınırlarıyla uğraşan insanlar için bir darboğaz haline gelebilir. Performans, kullanıcı deneyiminin hayati bir parçası olduğu için, tüm şekil ve boyutlardaki cihazlarda tutarlı, yüksek kaliteli bir deneyim sunduğunuzdan emin olmak önemlidir ve bu da CSS’nizi optimize etmeyi gerektirir.

Bu gönderi, CSS’nin ne tür performans sorunlarına neden olabileceğini ve insanların yoluna çıkmayan CSS oluşturmak için en iyi uygulamaları kapsayacaktır.

CSS blok oluşturma

Satır içi veya harici bir stil sayfası olsun, bir sayfa için kullanılabilir CSS olduğunda, tarayıcı CSS ayrıştırılıncaya kadar oluşturmayı geciktirir. Bunun nedeni, CSS’siz sayfaların genellikle kullanılamaz olmasıdır. Bir tarayıcı size CSS’siz dağınık bir sayfa gösterirse, birkaç dakika sonra stilize edilmiş bir sayfaya geçerse, değişen içerik ve ani görsel değişiklikler çalkantılı bir kullanıcı deneyimi yaratır. Bu kötü kullanıcı deneyiminin bir adı var: Flash of Unstyled Content (FOUC):

Flash of Styled İçerik davranışının gösterilmesi. Kaynak: CodePen.

CSS, HTML ayrıştırmasını engelleyebilir

Tarayıcı, CSS’yi ayrıştırmayı bitirene kadar içeriği görüntülemese de, HTML’nin geri kalanıyla çalışacaktır. Ancak komut dosyaları, erteleme veya zaman uyumsuz olarak işaretlenmedikçe ayrıştırıcıyı engeller. Bir komut dosyası, sayfayı ve kodun geri kalanını potansiyel olarak değiştirebilir, bu nedenle tarayıcının komut dosyasının ne zaman yürütüleceğine dikkat etmesi gerekir.

“/>Ayrıştırıcı engelleme komut dosyası: komut dosyası HTML ayrıştırmasını nasıl engelleyebilir.

Komut dosyaları sayfaya uygulanan stilleri etkileyebileceğinden, tarayıcı hala bazı CSS’leri işliyorsa, komut dosyasını çalıştırmadan önce bitene kadar bekler. Komut dosyası çalışana kadar belgeyi ayrıştırmaya devam etmeyeceğinden, bu, CSS’nin artık yalnızca oluşturmayı engellemediği anlamına gelir – belgedeki harici stil sayfalarının ve komut dosyalarının sırasına bağlı olarak HTML ayrıştırmasını da durdurabilir.

“/>CSS’yi engelleyen ayrıştırıcı: CSS, HTML’nin ayrıştırılmasını nasıl engelleyebilir.

Ayrıştırmayı engellemekten kaçınmak için, CSS’yi mümkün olan en kısa sürede teslim edin ve kaynaklarınızı en uygun sırada düzenleyin.

CSS’yi sıkıştırın ve küçültün

Harici bir stil sayfasını indirmek için bağlantı kurmak kaçınılmaz olarak gecikmeye neden olur, ancak ağ üzerinden aktarılan toplam bayt miktarını en aza indirerek indirmeyi hızlandırabilirsiniz.

Dosyaları sıkıştırmak hızı önemli ölçüde artırabilir ve birçok barındırma platformu ve CDN, varlıkları varsayılan olarak sıkıştırmayla kodlar (veya bunları kolayca yapılandırabilirsiniz). Sunucu ve istemci etkileşimleri için en yaygın kullanılan sıkıştırma formatı Gzip’tir. Gzip kadar desteklenmese de, daha iyi sıkıştırma sonuçları sağlayabilen Brotli de var.

Küçültme, boşlukları ve gerekli olmayan herhangi bir kodu kaldırma işlemidir. Çıktı, tarayıcının ayrıştırabileceği ve size biraz bayt kazandıracak daha küçük ama tamamen geçerli bir kod dosyasıdır. Terser, popüler bir JavaScript sıkıştırma aracıdır ve web paketi kullanıyorsanız, v4, küçültülmüş derleme dosyaları oluşturmak için bir eklenti içerir.

İnce ayar: Kullanılmayan CSS’yi kaldırın

CSS çerçevelerini kullanırken, kullanılmayan CSS ile sonuçlanması nispeten yaygındır (yalnızca ihtiyacımız olan bileşenleri eklemediğimiz sürece). Aynı sorun, uzun süre büyüyen daha büyük kod tabanlarında da görülür.

Kullanılmayan CSS’yi kaldırmak genellikle manuel bir iştir. Asıl zorluk, ne kadar karmaşık olduğudur. Tüm olası durumlarda, olası tüm cihazlarda sitenin tamamını dikkatlice denetlemeliyiz (medya sorgularını kapsamak için) ve stilleri değiştirebilecek tüm JavaScript işlevlerini yürütmeliyiz. KullanılmayanCSS ve PurifyCSS, gereksiz stilleri belirlemeye yardımcı olabilecek popüler araçlardır, ancak bunları dikkatli görsel regresyon testiyle birleştirmeliyiz.

CSS-in-JS kullanmanın önemli bir avantaj olduğu yer burasıdır: Her bileşende oluşturulan stiller yalnızca CSS gerektirir. Hızlı CSS-in-JS’nin sırrı, CSS’yi sayfaya yerleştirmek veya harici bir CSS dosyasına çıkarmaktır. CSS’nin bir JavaScript dosyasında gönderilmesi, yavaşça ayrıştırılmasına ve değerlendirilmesine neden olur.

Kritik CSS, ekranın üst kısmındaki içerik için CSS’yi çıkaran ve satır içine alan bir tekniktir. Çıkarılan stilleri satır içine alma HTML belgesi, bu stilleri getirmek için ek bir istekte bulunma ihtiyacını ortadan kaldırır ve oluşturmayı hızlandırır.

Biliyor musun?

Ekranın üst kısmı, bir görüntüleyenin sayfayı yüklemeden önce gördüğü tüm içeriktir. Çok sayıda cihaz ve ekran boyutu olduğundan, katlama içeriğinin üzerinde kabul edilenin evrensel olarak tanımlanmış bir piksel yüksekliği yoktur.

İlk oluşturulacak gidiş dönüş sayısını en aza indirmek için ekranın üst kısmındaki içeriği 14 KB’nin (sıkıştırılmış) altında tutun.

Kritik CSS’yi belirlemek tamamen doğru değildir çünkü katlama konumu hakkında varsayımlar yapmanız gerekir (cihaz ekran boyutları arasında değişir). Bu, oldukça dinamik siteler için zor olabilir. Kesin olmadığında bile performans iyileştirmeleri sağlayabilir ve bunu Critical, CriticalCSS ve Penthouse gibi araçlarla otomatikleştirebiliriz.

CSS’yi eşzamansız olarak yükle

CSS’nin geri kalanı (daha az kritik olan kısım) en iyi eşzamansız olarak yüklenir. Bunu başarmanın yolu, yazdırılacak ortam bağlantısı özniteliğini ayarlamaktır:

Kodu Kopyala

1

“Yazdır” ortam türü, kullanıcının sayfayı yazdırmaya çalıştığı zaman için stil sayfası kurallarını tanımlar ve tarayıcı, bu tür stil sayfasını sayfa oluşturmayı geciktirmeden yükler. Bu stil sayfasının tüm medyaya uygulanması (yani sadece baskı değil, ekranlar), stil sayfasının yüklenmesi bittiğinde medyayı all olarak ayarlamak için onload niteliğini kullanır.

Başka bir seçenek kullanmaktır (rel = “stylesheet” yerine) yukarıdaki ile benzer bir model elde etmek ve rel özelliğini yükleme olayında stil sayfası olarak değiştirmek için. Bu yaklaşımı kullanırken dikkate alınması gereken sakıncalar vardır.

Ön yükleme için tarayıcı desteği hala harika değildir, bu nedenle tarayıcılar arasında bir stil sayfası uygulamak için bir çoklu doldurma (veya loadCSS gibi bir kitaplık kullanmak) gereklidir.

Ön yüklemenin sağladığı yüksek öncelikli getirmeyi (bunu destekleyen tarayıcılarda) istiyorsanız, loadCSS’nin oluşturucuları, bunu aşağıdaki gibi ilk kalıpla birleştirmenizi önerir:

Kodu Kopyala

1

2

CSS dosyalarında @import’tan kaçının

CSS dosyalarında @import kullanmak, oluşturmayı yavaşlatır. Öncelikle, tarayıcının içe aktarılan kaynağı keşfetmek için CSS dosyasını indirmesi ve ardından onu işlemeden önce indirmek için başka bir istek başlatması gerekir.

@İmport url (import.css) içeren bir stil sayfanız varsa; ağ şelalesi şuna benzer:

“/>

Bağlantı öğelerine iki stil sayfası yüklemek paralel indirmeye izin verir:

“/>

Bir sayfadaki öğeleri canlandırdığınızda, tarayıcının genellikle belgedeki konumlarını ve boyutlarını yeniden hesaplaması gerekir ve bu da düzeni tetikler. Örneğin, bir öğenin genişliğini değiştirirseniz, alt öğelerinden herhangi biri etkilenebilir ve sayfa düzeninin büyük bir kısmı değişebilir. Mizanpaj neredeyse her zaman tüm belgeyi kapsar, bu nedenle pafta ağacı ne kadar büyükse mizanpaj hesaplamaları o kadar uzun sürer.

Öğeleri canlandırırken, düzeni ve yeniden boyamaları en aza indirmek önemlidir. Tüm CSS animasyon teknikleri eşit değildir ve modern tarayıcılar konum, ölçek, döndürme ve opaklık ile en iyi performans gösteren animasyonları oluşturabilir:

Yükseklik ve genişlik özelliklerini değiştirmek yerine transform: scale () kullanın. Öğeleri taşımak için top, right, bottom veya left özelliklerini değiştirmekten kaçının ve bunun yerine transform: translate () kullanın. Arka planı bulanıklaştırmak istiyorsanız, kullanmayı düşünün. bulanık bir görüntü ve opaklığını değiştiriyor.

İnce ayar: özellik içer

CSS içerme özelliği, tarayıcıya, öğenin ve neslinin belge ağacından (mümkün olduğunca) bağımsız olarak kabul edildiğini söyler. Bir sayfanın alt ağacını diğerlerinden ayırır. Tarayıcı daha sonra performansı artırmak için sayfanın bağımsız bölümlerinin oluşturulmasını (stil, düzen ve boyama işlemleri) optimize edebilir.

İçerme özelliği, birçok bağımsız pencere öğesi içeren sayfalarda kullanışlıdır. Her bir parçacığın içindeki değişikliklerin, parçacığın sınırlayıcı kutusunun dışında yan etkilere sahip olmasını önlemek için kullanabiliriz. Çoğunlukla statik olan bir site bu stratejiden çok az fayda sağlayacaktır.

Yazı tipi yükleme sırasında görünmez metinlerden kaçının

Yazı tipleri genellikle yüklenmesi biraz zaman alan büyük dosyalardır. Bazı tarayıcılar, yazı tipi yüklenene kadar (“görünmez metin flaşı” veya FOIT’e neden olur) bunun üstesinden gelmek için metni gizler. Hızı optimize ederken, “görünmez metin parıltısından” kaçınmak ve içeriği bir sistem yazı tipini (makinelerine önceden yüklenmiş olan) kullanarak insanlara hemen göstermek isteyeceksiniz. Yazı tipi dosyası yüklendikten sonra, “stilsiz metin flaşı” veya FOUT olarak bilinen sistem yazı tipinin yerini alacaktır.

Bunu başarmanın bir yolu, yazı tipi görüntüleme stratejisi belirlemek için bir API olan yazı tipi görüntüleme kullanmaktır. Yazı tipi ekranını değer değişimiyle kullanmak, tarayıcıya bu yazı tipini kullanan metnin bir sistem yazı tipi kullanılarak hemen görüntülenmesi gerektiğini söyler.

Dosya boyutunu küçültmek için değişken yazı tiplerini kullanın

Değişken yazı tipleri, her genişlik, ağırlık veya stil için ayrı bir yazı tipi dosyasına sahip olmak yerine, bir yazı tipinin birçok farklı varyasyonunun tek bir dosyaya dahil edilmesini sağlar. Belirli bir font dosyasındaki tüm varyasyonlara CSS ve tek bir @ font-face referansı ile erişmenize izin verir.

Değişken yazı tipleri, bir yazı tipinin birden çok çeşidine ihtiyaç duyduğunuzda dosya boyutunu önemli ölçüde azaltabilir. Normal ve kalın stilleri ve bunların italik versiyonlarını yüklemek yerine, tüm bilgileri içeren tek bir dosya yükleyebilirsiniz.

Monotype, hem İtalik hem de Latin stillerinde üç genişlikte sekiz ağırlık oluşturmak için 12 giriş yazı tipini birleştirerek bir deney yaptı. 48 ayrı yazı tipini tek bir değişken yazı tipi dosyasında saklamak, dosya boyutunda% 88’lik bir azalma anlamına geliyordu.

CSS seçicilerinin nasıl yapılandırıldığı, tarayıcının bunlarla ne kadar hızlı eşleşebileceğini etkiler. Tarayıcı seçicileri sağdan sola okur, böylece bir alt seçici kullandığınızda. Örneğin, nav a {}, önce her Gezinti içinde olanı sıfırlamadan önce sayfadaki öğe. Daha spesifik bir seçici kullandıysanız, örneğin her birinde .nav-link nav öğesinin içinde, her şeyi eşleştirmek için zaman harcamazdı. sayfada.

Tarayıcıların seçicilerle sağdan sola nasıl eşleştiğini ve .container ul li a {} gibi bir örneği düşünürseniz, alt seçicilerin neden genellikle “pahalı” olarak etiketlendiğini görürsünüz.

Bu tür seçiciler bir hız sorunu olacak gibi görünebilir. Ancak seçici eşleştirme performansı hızlıdır. CSS bildirimleri, sıkıştırma algoritmaları için o kadar dostudur ki, bir CSS seçiciyi optimize etmek için gereken çaba, genellikle daha büyük bir yatırım getirisi ile uygulamanızın diğer bölümlerinde çalışmak için daha iyi harcanır.

CSS, sayfaları yüklemek ve hoş bir kullanıcı deneyimi için kritik öneme sahiptir. Genellikle diğer varlıklara (komut dosyası veya görüntüler gibi) daha etkili olarak öncelik tanıyabilsek de CSS’yi unutmamalıyız. Yukarıda açıklanan stratejiler ile hızlı teslimat ve uygulama sağlayabileceksiniz.

“/>

Milica Mihajlija

Web Geliştirici ve Teknik Yazar. Onu Twitter’da bulun.

CEVAP VER

Lütfen yorumunuzu giriniz!
Lütfen isminizi buraya giriniz