Pik site performansı için CSS nasıl optimize edilir
2021’de bile web performansı bir sorun olmaya devam ediyor. HTTP arşivine göre, ortalama sayfa 2 MB indirme gerektirir, 60 HTTP isteği yapar ve tam bir mobil cihaza yüklenmesi 18 saniye alabilir. 60 KB tarzı hesabı yedi talebe ayrılmıştır, bu nedenle performans sorunlarının üstesinden gelmeye çalışırken nadiren en önemli öncelik haline gelir.
Ücretsiz demoyu deneyin
Ancak, CSS’nin ne kadar küçük göründüğü önemli değil, bir etkisi vardır. JavaScript’i ele aldıktan sonra, CSS’yi doğru optimize etmeyi öğrenmek bir sonraki öncelik olmalıdır. Hadi bunu yapalım!
CSS’nin CSS sayfasının performansını nasıl etkilediği masum görünür, ancak ağır işlem gerektirebilir.
CSS, tarayıcınız etiketini bulduğunda oluşturmayı engeller, CSS dosyasını alırken ve tanımlarken diğer tarayıcıların indirilmesini ve işlenmesini durdurur. JavaScript ayrıca tarayıcı oluşturma işlemini de engelleyebilir, ancak eşzamansız işlem mümkündür:
ASYSYS, komut dosyasını hemen çalışan paralel olarak indirmek için hazırlar.
Paralel olarak indirilecek erteleme özniteliği, DOM hazır olduğunda sırayla çalıştırın.
Type özniteliği = “Modül” Buz modülünü yüklemek için (bir ertel gibi davranır).
Görüntüler gibi varlıklar genellikle daha fazla bant genişliği gerektirir, ancak verimli formatlar mevcuttur ve tarayıcı oluşturmayı engellemeden yavaşça yüklenebilir (öznitelik yükleme = “lazy”).
Tüm bunlar CSS için mümkün değildir. Dosya önbellektir, bu nedenle bir sonraki sayfanın yüklenmesi daha hızlı olmalıdır, ancak oluşturma işlemini engelleme işlemi kalır. Sitenizin performansını artırmak ister misiniz? CSS ile başlayarak büyük bir CSS dosyası için tıklayın Tweet, stil sayfanızın ne kadar büyük işlenmesi için zaman gerektirir, tarayıcı ve JavaScript API’sı tarafından kullanılabilen CSS nesne modelini (CSSOM) indirmek ve işlemek için gereken süre ne kadar uzun olursa, sayfa. Stylessheet CSS diğer web sitesi dosyalarından daha küçük olmasına rağmen, “daha iyi” nin pratik kurallarından bağışık değildir. CSS dosyası artık kullanılmayan stilleri tanımlamak zor olabilir ve yanlış stili kaldırmak siteye zarar verebilir. Geliştiriciler genellikle en güvenli “her şeyi korumak” yaklaşımını seçerler. Artık kullanılmayan sayfalar, bileşenler ve widget’lar hala CSS’de. Sonuçlar? Dosya boyutu, karmaşıklık ve bakım çabaları katlanarak artar ve geliştiricileri aşırı kodu silme olasılığı daha düşüktür. Stylessheet, CSS’nin diğer stil sayfalarını @Import kurallarını kullanarak yönlendirebileceği diğer varlıklara başvurabilir. Bu içe aktarma, geçerli stil sayfası işlemini engeller ve seri olarak daha fazla CSS dosyası içerir.
Yazı tipleri ve görüntüler gibi diğer varlıklara da yönlendirilebilir. Tarayıcı indirmeyi optimize etmeye çalışacaktır, ancak şüphe varsa, tarayıcı hemen alacaktır. Base64 kodlu dosyalar hala daha fazla işlem gerektirir. Oluşturma CSS tarayıcı efektleri üç oluşturma aşamasına sahiptir:
Düzen (veya geri dönme) Faz, her elemanın boyutlarını ve çevredeki elemanın boyutunu veya konumunu nasıl etkilediğini hesaplar. Boya fazı, her bir öğenin görsel kısmını ayrı bir katmana çeker: metin, renk, görüntü, sınır, gölge , vb.
Kompozit, istifleme, konumlandırma, dizin-z, vb.
Dikkatli değilseniz, CSS özelliğindeki ve animasyondaki değişiklikler üç aşamanın yeniden oluşturulmasına neden olabilir. Gölgeler ve gradyanlar gibi bazı özellikler de blok renklerinden ve kenar boşluklarından daha pahalıdır.
CSS Performans Analizi Araçları, CSS Performans Sorunlarınızın Olduğunu Kabul Etme Keşfedilmeye Doğru İlk Adım! Nedeni bulmak ve geliştirmek başka bir sorundur. Aşağıdaki araçlar ve hizmetler (herhangi bir sırayla sıralanmamış), kodunuzdaki stil tarzının engellerini belirlemenize yardımcı olabilir. 1. Devtools Network Panel Uzman Web Performansı, özellikle Devtools ve Network Panellerde çok zaman harcıyor. Çoğu modern tarayıcı için orijinal Devtools, örneğimizde Google Chrome kullanacağız. Devtools tarayıcı menüsünden, genellikle daha fazla araçtan> geliştirici araçlarında veya CTRL klavye kısayolu | CMD + SHIFT + I veya F12.
Ağ sekmesine geçin ve önbellek dosyasının raporu etkilemesini önlemek için kontrol edilen önbellekleri devre dışı bıraktığınızdan emin olun. Daha yavaş hücresel dokuyu simüle etmek için kısıtlama seçeneğini de değiştirebilirsiniz. İndirmeleri görmek ve şelale çizelgelerini işlemek için sayfayı yenileyin:
Devtools Ağ Paneli.
Herhangi bir uzun çubuk endişelenmelidir, ancak trafik sıkışıklığının uzun çubuğunun çok farkında olmalısınız (beyaz renkte görüntülenir). Bu örnekte, satırların ve bir sonraki satırların öne çıkan özellikleri, HTML sayfasının üst kısmındaki oluşturmayı engelleyen CSS ve JavaScript dosyalarına indirmeye başlayamaz. Filtre kutusu, belirli varlıkları görüntülemenize veya gizlemenize olanak tanır:
-Larger-than:
-Domain:*: Ana alanınızdan yayınlanmayan üçüncü taraflar için istekleri görüntüler. Bu, yavaş sitenin ana katkısıdır.
Optimize edilmiş CS’lere sahip yüksek performanslı sayfalar genellikle engellenen/durdurulan kısa bıçaklarla paralel olarak yüklenen daha az varlığa sahiptir.
2. WebPagetest Web sayfası testleri, benzer ağ şelale ekranlarının yanı sıra diğer birçok performans grafikleri sağlar:
Şelale WebPagetest.org Varlık Şelalesi.
Bu hizmet, gerçek dünya performansını değerlendirebilir ve CSS’yi optimize edebilmeniz için çeşitli küresel yerlerde temelli cihazları kullanır. 3. Chrome Devtools Deniz Feneri Panelleri Devtools Deniz Feneri Panelleri, Chrome, Edge, Cesur, Opera ve Vivaldi gibi krom tabanlı tarayıcılarda sağlanmaktadır. Mobil cihazlar ve masaüstleri için arama makinelerinin performans raporları, aşamalı web uygulamaları, en iyi uygulama, erişilebilirlik ve optimizasyonu yapabilirsiniz.
Devtools Deniz Feneri Paneli.
CSS görüntülenmez, ancak JavaScript sayısı kuvvetin verimliliğini etkileyecektir.
Devtools Kapsam Paneli.
WordPress sitesinde her zamanki gibi yeni bir sayfaya yenilenirseniz veya gezinirseniz metrik kapsamı düzenlenir. Kullanılmayan metrik kodlar yalnızca sayfasız içerik içeren tek bir sayfa uygulamasını keşfederseniz azaltılır.
Bu araç yalnızca belirli bir zaman noktasında kullanılan CSS’yi açıklayabilir. Widget’ın görülmediğini veya birkaç JavaScript’e bağlı durumu olup olmadığını belirleyemez. Monitör Chrome Devtools Gerçek Zamanlı Performans Krom tabanlı tarayıcı gerçek zamanlı bir performans monitörüne sahiptir. Bir kez daha, bu Devtools More Araçlar menüsünden edinilebilir. Grafik, sayfalarda gezinirken, kaydırdığınızda ve animasyonu tetiklediğinizde güncellenir:
CSS performansını optimize etmek için aşağıdaki metrik çok ilginçtir (daha düşük, daha iyidir):
CPU kullanımı: işlemcilerin% 0’dan% 100’e kullanılması.
Düzenler/SEC: Sayfaları yeniden düzenlemek için tarayıcı hızı.
Stil/DTK hesaplanması: Tarayıcının kuvveti yeniden hesaplaması gereken seviye.
JS kazık boyutu: JavaScript nesneleri tarafından kullanılan toplam bellek.
DOM düğümleri: HTML belgelerindeki öğelerin sayısı.
JS Etkinlik Dinleyicisi: Kayıtlı JavaScript Etkinliklerine Dinleyici Sayısı.
Belge: Sayfalar, CSS dosyaları, JavaScript modülleri vb.
Belge Çerçevesi: Çerçeve, IFRAME ve JavaScript İşçi Komut Dosyaları.
7. Devtools Performans Raporu Devtools Performans Paneli, daha fazla analiz için sayfa etkinliklerini kaydetmenize ve performans sorunlarının belirlenmesine yardımcı olmanıza olanak tanır. Ortaya çıkan rapor karmaşıktır ve birçok geliştirici bundan kaçınır, ancak değerli bilgiler sağlarlar. Performans Paneli Düzenleme simgesi, ağları ve CPU’ları yavaşlatmak gibi çeşitli seçenekleri yönetmenizi sağlar. Ayrıntılı çağrı yığınlarının kaydedilmemesi için JavaScript örneklerini de aktifleştirebilirsiniz. Başlamak için Dairesel Kayıt simgesini tıklayın, sayfanızı yükleyin ve/veya kullanın, ardından raporu görmek için Durdur düğmesine tıklayın: Devtools Performans Raporu.
Bu metriklerin neredeyse tamamı JavaScript geliştiricileri için yararlı olacaktır, ancak CSS’yi optimize etme sorunu açıkça görülebilir:
Kırmızı Blade: Bu, çerçeve hızının önemli ölçüde düştüğünü gösterir, bu da performans sorunlarına neden olabilir. Bu, yükleme sayfasının başlangıcında bekleniyor, ancak aşırı CSS animasyonu da bir sorun olabilir.
Özet grafik: Yüksek yükleme, oluşturma ve boyama metrikleri CSS sorunlarını gösterebilir.
CSS Performans Geliştirme Dolaylı olarak aşağıdaki iyileştirmeler CSS sorunlarının üstesinden gelmez, ancak küçük bir işle bazı performans sorunlarının üstesinden gelmenize yardımcı olabilir. Kullanıcınıza fiziksel olarak daha yakın olan bir sunucuya sahip iyi bir ana bilgisayar kullanarak iyi bir ana bilgisayar kullanın, doğrudan performans avantajları getirecektir. Barındırma paketleri değişir, ancak üç ana tür vardır:
Birlikte Barındırma: Web siteniz, belki de yüzlerce başka sitede fiziksel bir sunucuda yayınlanır. Disk odaları, RAM, CPU zamanı ve bant genişliği dağıtılır. Paketler genellikle ucuzdur, ancak performans ve kullanılabilirlik diğer sitelerden etkilenir. Güncelleme yapılabilir, ancak siteniz genellikle aynı altyapıda kalacaktır. Özel barındırma: Siteniz sahip olduğunuz bir veya birkaç fiziksel sunucuda yayınlanır. Donanım gerektiğinde yapılandırılabilir ve artırılabilir. Paketler genellikle pahalıdır ve donanım arızaları sorunlu kalır.
Bulut barındırma paketleri ve fiyatları büyük ölçüde değişir. Düşünebilirsiniz:
Sunucu ve sanal web veritabanı gibi hizmet (PAAS) olarak platform seçenekleri veya
WordPress gibi tamamen yönetilen uygulamalar sunan Hizmet Olarak Yazılım (SAAS) seçeneği.
Hareketli ana bilgisayarlar performansı artırabilir. Bu, tüm sorunlarınızı çözmek mümkün değildir, ancak bu, arka uç ve bant genişliği sorunları için maliyet etkin bir çözümdür. Ayrıca, coğrafi olarak kullanıcıya daha yakın çeşitli yerlerde kargo dağıtabilen içerik dağıtım ağı (CDN) veya CDN görüntüsü ve uzman videoyu kullanmayı da düşünebilirsiniz. Tarayıcı ve sunucu verimlilik özelliklerinden yararlanın Sitenin yaklaşık% 10’u GZIP sıkıştırmasını (veya daha iyi) etkinleştirmez, bu da genellikle varsayılan bir sunucu seçeneğidir. Bu, iletimden önce dosyaları sıkıştırarak CSS boyutunu% 60 veya daha fazla azaltır. Bu, verimsiz CSS’yi düzeltmeyecek, ancak kod daha hızlı gelecek! Ayrıca, daha küçük bir ikili formatta veri gönderen, başlığı sıkıştıran ve aynı TCP bağlantısına birden fazla dosya gönderebilen HTTP/2’yi (veya daha iyisini) etkinleştirmeniz gerekir. Son olarak, tarayıcının CSS ve diğer dosyaları etkili bir şekilde önbelleğe alabildiğinden emin olun. Bu genellikle HTTP üstbilgisinde son modifiye ve/veya hash etag’ının süresi dolma sorunudur. WordPress gibi CMS içerik yönetim sistemlerinizi optimize edin, kendi CSS’ye hizmet veren temalar ve eklentilerle genişletilebilir. Mümkünse, CM’lerinizi hızlandırmalısınız: Kullanılmayan eklentileri silin.
Daha ince bir tema kullanın
Aşırı sayfaların yenilenmesini önlemek için önbelleklemeyi etkinleştirin.
Görüntünüzü optimize edin Görüntü, HTML, CSS ve JavaScript ile işleme ve oluşturma işlemine sahip değildir, ancak kullanılabilecek sayfaların ve bant genişliğinin ağırlıklarının çoğunu hesaplar. Düşünmek:
Gereksiz görüntüleri silin.
Büyük görüntü boyutunu değiştirme – belki ekranda görüntülenebilen% 150’den fazla maksimum boyutta olmayın. Uygun bir görüntü biçimi kullanarak – WebP veya AVIF gibi ideal olarak çok sıkıştırılmış seçenekler, ancak belki de logolar ve grafikler için SVG.
Görüntüleri CSS gradyanlarıyla veya diğer efektlerle değiştirin.
Görüntü indirilmeden önce sayfada uygun alanın sağlandığından emin olmak için html ‘e geniş ve yüksek öznitelikler eklemek veya yeni CSS en boy oranı özelliğini kullanma.
CDN uzman görüntüleri bu işlerin bazılarını sizin için halledebilir. Diğer ipuçları için, web için resimlerin nasıl optimize edileceğine dair kılavuzumuza bakın. En hızlı stil kullanılmayan CSS’yi silme, sığmanız veya oluşturmanız gerekmeyen bir kuvvettir! Eski sayfalar, widget’lar veya çerçeveler gibi artık ihtiyacınız olmayan CSS kodunu silmeyi/düzenlemeyi deneyin. Bu, daha büyük sitelerde zor olabilir ve bir dizi belirli stilin önemli olup olmadığı her zaman net olmayabilir. Aşağıdaki araçlar, aşırı kodları tanımlamak için URL’leri yaparken veya sürünerek HTML ve CSS kullanımını analiz eder. Bu her zaman yeterli değildir, bu nedenle JavaScript ve kullanıcı etkileşiminin tetiklediği kuvvetin dahil edilmesini sağlamak için ek bir yapılandırma düzenlenebilir:
UNCSS
Kullanılmayan CSS
Temizlikler
Purifycss
Daha iyi bir seçenek var: CSS’yi açık bir sorumluluk düzeyine ve uygun belgelere sahip ayrı bir dosyaya ayırın. Gereksiz stilleri kaldırmak çok daha kolay hale gelir. CSS Yükleme Performansını Optimize Edin Tüm CSS eşit olarak yüklenmez. basit etiket, her zaman mantıklı olmayan bir dizi seçenek ve alışkanlık vardır. Google yazı tiplerinin kullanımını optimize edin ve benzer yazı tipi web yazı tipleri Web yazı tipinde devrim yarattı, ancak bazı yazı tipi kodu sıraları yüzlerce kilobayt bant genişliği üretebilir. İşte optimizasyon önerimiz: Yalnızca ihtiyacınız olan yazı tipini yükleyin: kullanmadığınız yazı tiplerini kaldırın ve yeni yazı tipinin gerekli olup olmadığını kontrol edin.
Sadece ihtiyacınız olan ağırlığı ve kuvveti yüklemek: Çoğu yazı tipi dökümü, indirmeyi belirli karakterlerle (sadece Latin gibi), ağırlık (kalınlık) ve eğik (eğik) ile sınırlayabilir. Tarayıcı, sonuçlar kötü olsa bile, otomatik olarak kaybolan stili oluşturabilir.
Gerekli karakterleri sınırlayın: Nadiren kullanılan yazı tipleri belirli karakterlerle sınırlı olabilir. Örneğin, açık SAN’larda “öğretici CSS” başlığı, Google Font Sorgularına Parametreler & Text = eklenerek belirlenebilir: Fonts.googleisi.com/css?family=open+Sans&text=cstuorial
Değişken yazı tiplerini göz önünde bulundurun: Değişken yazı tipi, vektör enterpolasyonu kullanarak çeşitli stilleri, ağırlıkları ve TILVE’leri belirler. Yazı tipi dosyaları biraz daha büyük, ancak birkaç tanesinden sadece birine ihtiyacınız var. Özyinelemeli yazı tipi, değişken yazı tiplerinin esnekliğini gösterir.
Yerel Sunucunuzdan Kurucu Yazı Tipleri: Kendi kendine barındırma yazı tipleri, döküm kullanmaktan daha verimlidir. Daha az DNS araması gerekir ve indirmeyi tüm modern tarayıcılar tarafından desteklenen WOFF2 ile sınırlayabilirsiniz. Daha uzun tarayıcı (sizi görüyorum IE) OS yazı tipine geri dönebilir. OS yazı tipini düşünün: 500 kb web yazı tipi iyi görünebilir, ancak genellikle mevcut olan Helvetica, Arial, Georgia veya Verdana’ya geçerseniz herkes dikkat ediyor mu? Genel olarak? İşletim sistemi veya web güvenli yazı tipi performansı iyileştirmenin kolay bir yoludur.
Doğru yazı tipi yükleme seçeneğini kullanın Web yazı tipi indirilmek ve işlenmek için birkaç saniye sürer. Tarayıcı:
Bültenlere Kaydolun
Trafiğimizi%1000’den fazla nasıl artırdığımızı bilmek ister misiniz? Haftalık bültenimizi içerideki WordPress insanlar hakkında ipuçlarıyla alan 20.000’den fazla insana katılın!
Şimdi abone olun
Düzlenmemiş metin flaşını gösterin (Fout): Mevcut ilk geri dönüş yazı tipi başlangıçta kullanılır, ancak web yazı tipi hazır olduktan sonra değiştirilir.
Görünmez metnin yanıp sönmesini görüntüleyin (FOIT): Web yazı tipi hazır olana kadar metin görüntülenmez. Bu, modern bir tarayıcıda varsayılan işlemdir, bu da genellikle geri dönüş yazı tipine dönmeden önce üç saniye bekleyen.
Her ikisi de ideal değil. Font-Display CSS ve Google Font & Display = Parametreler Alternatif Seçenekler seçebilir:
Otomatik: Varsayılan tarayıcı davranışı (genellikle FOIT).
Blok: Etkili FOIT. Metin üç saniyeye kadar görünmez. Yazı tipi değişimi yoktur, ancak metnin görünmesi için zaman gerektirir.
Takas: Etkili bir Fout.İlk geri dönüş, web yazı tipi mevcut olana kadar kullanılır.Doğrudan metin okunabilir, ancak yazı tipi değişiminin etkisi şaşırtıcı olabilir.Yazı tipi stili eşleştirici, aynı boyutta geri dönüşü belirlemek için kullanılabilir. Geri dönüş: FOIT ve Fout arasındaki uzlaşma.Metin kısa bir süre (genellikle 100 MD) görülmez, daha sonra web yazı tipi mevcut olana kadar ilk yedek kullanılır.
İsteğe bağlı: Yazı Tipi Değişimi olmadığı sürece, geri dönüşe benzer.Web yazı tipleri yalnızca ilk dönemde mevcutsa kullanılacaktır.İlk sayfanızın, indirilen bir web yazı tipi ve önbellek kullanarak bir sonraki ekranla yazı tipi geri dönüşünü görüntülemesi muhtemeldir.
Takas, geri dönüş veya isteğe bağlı kullanmak algılanan performans iyileştirmeleri sunabilir. CSS @Import @Import at-rule kaçının CSS dosyalarının diğer dosyalara girilmesine izin verir: / * main.css * / @import url (“reset.css”); @Import URL (“Grid.css”); @Import url (“widget.css”); Bu, daha küçük bileşenler ve yazı tipleri yüklemenin etkili bir yolu gibi görünüyor. Ne yazık ki, her @Import oluşturmayı engeller ve her dosya seri olarak yüklenmeli ve açıklanmalıdır. HTML’deki bazı daha verimlidir ve paralel olarak CSS dosyalarını yükler: Söylenir, daha iyi … modern yapı CSS, SASS gibi ön işlemci CSS ve WordPress eklentileri tüm parçaları bir büyük CSS dosyasında birleştirebilir. Daha sonra dosyanın boyutunu minimumda azaltmak için boşluk, yorum ve gereksiz karakterler silinir. Bazı dosyalar HTTP/2 ve daha yüksek performans sorunlarından daha azdır, ancak bir dosya yalnızca bir başlık gerektirir ve GZIP ve önbellek daha verimli olabilir. Ayrı CSS dosyaları yalnızca genellikle değiştirilen bir veya daha fazla stil sayfanız varsa – belki haftada birkaç kez. Yine de, çoğu statik CSS kodu yine de bir dosyada birleştirilebilir. Base64 araçlarını kodlamaktan kaçının.
} Bu, HTTP isteği miktarını azaltır, ancak CSS: String Base64 performansına zarar verir, ikili eşdeğerden% 30 daha büyük olabilir.
Görüntü kullanılmadan önce tarayıcı dize kodunu kırmalı ve
Bir piksel görüntüsünü değiştirme tüm CSS dosyalarını iptal eder.
Çok küçük bir görüntü kullanıyorsanız ve ortaya çıkan dizenin URL’den daha uzun olmadığı yerde nadiren değişirseniz, kodlama baz64’ü düşünün. Bu, yeniden kullanılabilen UTF8 SVG simgesini kodlayabilirsiniz, örneğin. / 2000 / svg “viewbox =” 0 0 600 600 “> ‘); } Hacks CSS ve IE Geri Alımları Silin, şanssız değilseniz ve yüksek oranda Internet Explorer kullanıcılarına sahip değilseniz, yani -koşullu stil ve hack sayfaları CSS’nizden silinebilir. Çoğu durumda, IE kullanıcıları, özellikle varsayılan olarak daha basit bir doğrusal ekran gösteren mobil ateşli bir tasarım kullanıyorsanız, yine de bir şeyler görecektir. Sonuçlar iyi olmayabilir ve mükemmel piksel olmayacaktır, ancak geliştirme bütçeniz tüm kullanıcılar için erişilebilirliği göz önünde bulundurarak daha iyi harcanır. Css etiket dosyası praiop , html’deki gerçek referansı beklemek yerine hemen bir indirme başlatabilen isteğe bağlı bir Pramuar özniteliği sağlar: sayfam
Bu, bir eklentinin sayfa daha aşağı stil sayfası ekleyebileceği WordPress ve diğer CMS’de çok kullanışlıdır. CSS satır içi kritik analiz araçlarını kullanın, “sırada kritik CSS” veya “Render Engelleme Stil Sayfasını Azalt” ı önerebilir. Bu performansı iyileştirir: E-Niaga web siteniz için çok hızlı, güvenilir ve tamamen güvenli olan barındırma ihtiyacınız var mı? Kinsta, tüm bunları ve WooCommerce uzmanlarının 7/24 dünya standartlarında desteği sunmaktadır. Planımıza bakın
Üst yarı yaşam elemanı tarafından kullanılan önemli kuvveti tanımlayın (sayfa yüklendiğinde görülür)
Önemli CSS’yi içine içine eklemek
Engellemeyi önlemek için kalan CSS’yi eşzamansız içerir. Bu, tarayıcı tarafından daha düşük önceliğe verilen “baskı” kuvvetine stil sayfası yüklenerek elde edilebilir. JavaScript daha sonra sayfa yüklendikten sonra “All” medya stiline yönlendirdi ( JavaScript mevcut olmadığı için CSS işlevini sağlamak):
/ * Kritik Stiller * / Body {font-ailesi: sans-serif; Renk: #111; } Kritik ve kritik ksaksiyonlar gibi araçlar, ekrandaki elemanlar için kuvvetlerin çıkarılmasına yardımcı olabilir. Bu teknik performansı açıkça iyileştirir ve denetim puanlarını artırır. Tutarlı arayüzlere sahip sitelerin veya uygulamaların uygulanması daha kolay olmalı, ancak daha zor Elsers olabilir:
Geliştirme araçları en basit site hariç herkes için çok önemlidir. “Kat” her cihazda farklıdır.
Siteler, farklı önemli CSS gerektiren çeşitli düzenlere sahip olabilir.
Önemli CSS araçları belirli bir çerçeve, müşterinin HTML tarafından üretilen tarafı ve dinamik içerikle savaşabilir.
Bu teknik çoğunlukla ilk sayfayı yüklemek için faydalıdır.CSS bir sonraki sayfa için önbellektir, bu nedenle sayfa ağırlığına ek bir satır içi stil eklenir.
Medya sorgularını kullanın Tek bir kombine ve azaltılmış, çoğu siteye fayda sağlayacaktır, ancak önemli miktarda daha büyük ekran kuvveti gerektiren siteler CSS dosyalarını bölebilir ve medya sorgularını kullanarak yükleyebilir: Bu örnek metodoloji mobil ilk olarak kabul edilir. Hücresel cihazlar core.css içerir, ancak kalan kuvvet sayfalarını indirmeniz veya kırmanız gerekmeyebilir. İlerici Oluşturma Kullanımı İlerici Oluşturma, ayrı sayfalar veya bileşenler için ayrı stil sayfasını tanımlayan bir tekniktir. Bu, çeşitli bileşenlerden bireysel sayfaların oluşturulduğu çok büyük bir siteye fayda sağlayabilir. Her CSS dosyası, bileşenin HTML’de referans verilmesinden hemen önce yüklenir:
… > … çoğu tarayıcıda iyi çalışıyor. (Safari, tüm CSS yüklenene kadar boş sayfalar görüntüler, ancak birden daha kötü olmamalı büyük stil sayfası.) Web bileşenlerinin benimsenmesi, özel öğe oluşturulduğunda yüklenen kapsama kuvvetinin kullanımını da teşvik eder. CSS mühendisliği ve mülkünün performansını optimize edin CSS, tarayıcı, cpu, bellek, bant genişliği ve diğer kaynaklara farklı basınçlar yerleştirir. Aşağıdaki ipuçları, gereksiz işleme ve yavaş performansdan kaçınmanıza yardımcı olabilir. Modern düzen tekniklerini (ızgara ve flexbox) şamandıra temelli düzen yapmak zordur, birçok özelliği kullanmak, sürdürülebilir ayarlamaları oldukça büyük bir tarayıcı işleme gerektirir. Yıllarca, ancak artık gerekli değil. Bir D kullanın ARI: CSS Flexbox Bir sonraki satıra sarılabilen bir boyutlu bir düzen için. Bu menü, resim galerisi, kartlar vb. İçin idealdir.
Sıralar ve açık sütunlarla iki boyutlu düzeni için CSS ızgarası. Bu sayfa düzeni için idealdir.
Her ikisinin de geliştirilmesi, daha az kod kullanması, daha hızlı hale getirilmesi ve medya sorguları olmadan herhangi bir ekran boyutuna uyum sağlar. Çok uzun bir tarayıcı, modern Flexbox ve ızgara özelliklerini tanımaz, böylece her öğe bir blok olur. Onları hücresel gibi basit doğrusal düzenlerde gösterin: Tasarımı şamandıra bazlı geri dönüş ile taklit etmeye gerek yok. Mümkünse görüntüleri degradeler ve CSS efektleriyle değiştirin, görüntü yerine CSS kodunu seçin. Gradyanlar, sınırlar, yarıçaplar, gölgeler, filtreler, karışık modlar, maskeler, kupürler ve sahte öğelerin mevcut görüntüleri yeniden kullanmak veya değiştirmek için etkileri ile deney yapın. CSS Efekti çok daha az bant genişliği kullanır, değiştirilmesi daha kolay ve genellikle canlandırılır. Aşırı pahalı mülk kullanmaktan kaçının Kısa bir bildirim kodunuz olabilir, ancak bazı CSS diğerlerinden daha fazla işleme gerektirir. Aşağıdaki özellik, aşırı kullanılırsa pahalı olabilecek resim hesaplamasını tetikler: Pozisyon: Sabit
Border-Radius
Gişe gölgesi
Metin gölgesi
açıklık
dönüşüm
filtre
zemin filtresi
arka plan bağı
Mümkünse CSS geçişleri ve animasyonları kullanın ve animasyon CSS, benzer özellikleri değiştiren JavaScript tabanlı efektlerden her zaman daha pürüzsüz olacaktır.Çok uzun bir tarayıcıda işlenmeyeceklerdir, ancak daha az mümkün olan bir cihazda çalışması muhtemeldir, bu en iyisidir.Ancak, aşırı animasyondan kaçının.Etkiler, performansı etkilemeden veya seyahat hastalığına neden olmadan kullanıcı deneyimini geliştirmelidir.Tercih azaltma hareketlerinin medya sorgularını kontrol edin ve gerekirse animasyonu devre dışı bırakın.Elementin (genişlik, yükseklik, dolgu, sınır) veya pozisyonunun (üst, alt, sol, sağ, kenar boşluğu) boyutlarını değiştirmenin yeniden düzenlenmesini tetikleyen özelliği canlandırın.Animpative yapılacak en verimli mülk: Opaklık
Filtre: Opak, kontrast, gölge ve diğer efektler
Dönüşüm: Elemanları tercüme etmek (taşımak), ölçeklendirmek veya döndürmek için
Tarayıcı, bu efekti kendi katmanında oluşturmak için donanımla hızlandırılan bir GPU kullanabilir, bu nedenle sadece kompozisyon aşaması etkilenir. Diğer özellikleri canlandırmanız gerekiyorsa, sayfalardan öğeleri kaldırarak konum: mutlak olarak performansı artırabilirsiniz. Tarayıcı kompleksi seçmenlerine dikkat edin, en karmaşık CSS seçmenlerini hızla çözecek, ancak dosya boyutunu azaltmasını ve performansı artırmasını basitleştirecek. Karmaşık seçiciler genellikle CSS praprocessors’da SASS gibi bir yuvalama yapısı yaptığınızda yapılır. Hangi öğelerin CSS Will-Change özelliğini değiştireceğini gösterin Bir öğenin nasıl değiştirileceği veya canlandırılacağı konusunda uyarmanıza izin verir, böylece tarayıcının önce optimize edebilmesi :. } Bir koma ile ayrılan bir dizi değer belirlenebilir, ancak mülk yalnızca bilinen performans sorunlarını çözmek için son çaba olarak kullanılabilir. Çok fazla öğeye uygulamamalısınız ve başlatmak için yeterli zaman verdiğinizden emin olmalısınız. CSS muhafazasının gözaltına alınmasını düşünün, izole sayfaları tanımlamanıza izin vererek performansı artırabilecek yeni bir CSS özelliğidir. Tarayıcı, belirli DOM içeriğinin bir bloğunu oluşturarak veya oluşturma işlemi yaparak işlemeyi optimize edebilir. Mülk, listede uzay ile ayrılmış aşağıdaki veya aşağıdaki değerleri içerir: Yok: Gözaltı uygulanmaz
Düzen: Elementin düzeni geri kalan sayfalardan izole edilir – içerik diğer öğeleri etkilemez
Boya: Çocuk elemanları sınırların dışında gösterilmez
Boyut: Elementin boyutu, türev elemanı kontrol etmeden belirlenebilir – boyut özel değerlerin katkısına bağlı değildir:
Sıkı: Tüm Gözaltı Kuralları (Hayır olmadıkça) uygulanır
İçerik: Düzeni ve boyayı uygulamak
Önemli
Bir sayfa, aşağıdakilerin içeriğiyle
listesine sahiptir: katı;uygulamalı.Çocuğun içeriğini
değiştirirseniz, tarayıcı öğenin boyutunu veya konumunu, listedeki diğer öğeleri veya sayfadaki diğer öğeleri yeniden hesaplamaz.
Çoğu modern tarayıcıda CSS gözaltı desteklenir. Safari veya daha uzun bir uygulamada destek yoktur, ancak tarayıcı mülkü göz ardı edeceğinden gözaltı güvenli bir şekilde kullanılabilir. DATA DATA KAYDET DATA Üstbilgisine React, kullanıcının veri azaltma talebinde bulunduğunu gösteren bir HTTP istek başlığıdır. Bu, birkaç tarayıcıda “lite” veya “turbo” modu olarak etiketlenebilir. Etkinleştirildiğinde, her tarayıcı isteği ile kaydetme-veri başlıkları gönderilir: get /main.css http /1.0 ana bilgisayar: site.com kaydetme veri: Sunucuda, kaydetme verileri tespit edildiğinde buna göre yanıt verebilir. CSS durumunda, OS yazı tipini kullanarak daha basit bir hücresel gibi doğrusal bir düzen gönderebilir, bloğun rengine geçebilir veya düşük çözünürlüklü bir görüntü arka planı içerebilir. Sunucunun, kullanıcı Lite/Turbo: Vary: Kabul kodlama, Save-Data üstbilgisi de istemcinin JavaScript tarafından algılanabileceğinden, minimum içeriğin önbellek olmadığından ve yeniden kullanıldığından emin olmak için aşağıdaki başlığı değiştirilmiş bir isteğe döndürmesi gerektiğini unutmayın. Aşağıdaki kod, kaydetme-veri etkinleştirilmediğinde öğesine BestTax sınıfını ekler: if (navigator &&! Navigator.connection.savedata) {document.dumentelement.classlist.add (‘bestux’); } Stylessheet daha sonra sunucu manipülasyonu olmadan buna göre tepki verebilir: / * Varsayılan olarak kahraman yok * / header {arka plan-color: #Abc; Arka plan-görüntü: yok; } / * Kahraman Görüntüsü Kaydetme Datısı Olmadığında * / .Bestux Başlığı {Arka Plan-image: URL (“Heo.jpg”);
} Tercih edilen veri medya sorguları alternatif olarak yalnızca CSS seçenekleri sunar, ancak bu yazma sırasında herhangi bir tarayıcıda desteklenmez: / * Varsayılan olarak kahraman yok * / başlık {arka plan-color: #Abc; Arka plan-görüntü: yok; } / * Kahraman Görüntüsü Kaydetme veri yok * / @Media (tercihler azaltılmış veri: kokusuz) {header {arka plan-image: url (“kahraman.jpg”); }} JavaScript aracılığıyla performans sorunlarını ele aldınız mı? Sitenizi görmenin zamanı geldi CSS, özet bir tweet için tıklayın, CSS performansını optimize etmek için birçok seçenek var, ancak yeni projeler için aşağıdaki uygulamaları göz önünde bulundurun: Hücresel öncelik veren yaklaşımı kullanın: Önce en basit mobil düzen Koekan’ı ekleyin, sonra ekleyin Ekran alanı ve tarayıcı özellik seti sırasında iyileştirmeler artar.
CSS’yi tanımlanmış sorumluluklarla ayrı dosyalara bölün: Ön işlemciler CSS veya CMS eklentileri, CSS’nin bir kısmını bir dosyada birleştirebilir.
Oluşturma adımı ekleyin: Kod kodunu otomatik olarak oluşturabilen, sorunları tanımlayabilen, birleştirebilen, azaltma, görüntü boyutunu azaltabilen ve daha fazlasını ekleyin. Otomasyon hayatı kolaylaştırır ve optimizasyon adımlarını unutma eğilimindesiniz.
Stil sayfanızı belgeleyin: Belgelenmiş örneklerle stil kılavuzu, kodunuzu almayı ve sürdürmeyi kolaylaştırır. Terlemeden eski CSS’yi tanımlayabilir ve silebilirsiniz.
