5 wskazówek dla super szybkich CSS

Feb 2, 2026

Jak

Czy myślałeś o rozmiarze CSS swojej witryny? Jeśli twój arkusz stylów jest balonowanie, może być opóźnianie renderowania stron.

16 najlepszych przykładów animacji CSS

Chociaż CSS nie jest największym typem zasobu, który będziesz służyć, jest to jedna z pierwszych, że przeglądarka odkrywa. Ponieważ przeglądarka jest zablokowana od renderowania strony, aż CSS zostanie pobrana i analizowana, musi być tak opuszczona jak to możliwe. Oto pięć wskazówek, które pomogą Ci dotrzeć.

Mam złożoną stronę? Potrzebujesz idealnego hosting usługa. Lub, jeśli chcesz stworzyć witrynę bez zamieszania, spróbuj Kreator strony internetowej .

01. Użyj płytkich selektorów

Twoi rodzice powiedzieli ci, że płytkość nie jest cnota, ale jeśli chodzi o CSS, są błędne. Używane konsekwentnie, płytkie selektory mogą przyciąć kilobajty z blach dużych stylów. Weź ten selektor:

nav ul li.nav-item

Może to być wyrażone bardziej zwięźle:

.nav-item

Jak również pomaga utrzymać CSS Svelte, przeglądarka będzie również renderować elementy celowane przez płytkie selektory szybciej. Przeglądarki odczytują selektory od prawej do lewej. Im głębiej Selektory są, tym dłużej wymaga przeglądarki do renderowania i ponownego renderowania elementów, do których stosuje się. W przypadku złożonych domów, które często odpłynęły, krótkie selektory mogą również obniżyć Jank.

Idealnie, chcesz, aby selektory były jak najbardziej płytkie, ale to nie znaczy, że powinieneś pociąć wszystko aż do kości. Czasami potrzebujesz dodatkowej specyficzności, aby rozszerzyć elementy. Uderz odpowiednią równowagę, ale także być pragmatycznym.

02. Użyj nieruchomości Shorthand

Using shorthand CSS will speed up your site — Korzystanie z Shorthand CSS przyspieszy Twoją witrynę

Wydaje się to jak zwykły rozsądek, ale będziesz zaskoczony, jak często stosuje się właściwości Longhand. Oto przykład niektórych właściwości Longhand w użyciu:

 Rozmiar czcionki: 1.5Rem;
Wysokość linii: 1,618;
Czcionka: "Arial", "Helvetica", Sans-Serif;

To dużo CSS! Uchodujmy to:

 Czcionka: 1.5Rem / 1,618 "Arial", "Helvetica", Sans-Serif;

The. czcionka Stukłe nieruchomości skrapla kilka deklaracji w poręczny jednoskładnikowy, który zajmuje znacznie mniej przestrzeń.

W przykładzie pokazanym powyżej, shorthand wykorzystuje około 40 procent mniejszej przestrzeni niż jego ekwiwalent Longhand. Na pierwszy rzut oka nie jest tak czytelny, ale składnia staje się drugą naturą po tym, jak spędziłeś jakiś czas używając go.

Oczywiście, czcionka nie jest jedynym skrótem dostępnym dla Ciebie. Na przykład, margines może być stosowany w miejscu dłuższych właściwości, takich jak margines , margines prawy i tak dalej.

The. wyściółka Nieruchomość działa w ten sam sposób. Więcej sposobów na sprzątanie CSS, Mozilla Developer Network oferuje pomocną listę Shorthand References Nieruchomości .

Co jeśli chcesz zastąpić wartość dalej w kaskadzie? Na przykład, powiedzmy, że masz element nagłówkowy, który musi zmienić rozmiar czcionki dla większych wyświetlaczy.

W takim przypadku należy użyć bardziej szczegółowych rozmiar czcionki Nieruchomość zamiast tego:

 H1 {
    Czcionka: 1.5Rem / 1.618 "Arial", "Helvetica", Sans-Serif;
}
@media (min-szerokość: 60Rem) {
    h1 {
        Rozmiar czcionki: 2Rem;
    }
}

Nie jest to tylko wygodne, zwiększa również elastyczność komponentu. Jeśli jakakolwiek inna część podstawowego czcionka Nieruchomość jest modyfikowana, te zmiany będą wykonywać większe wyświetlacze. Działa to świetnie do nadpisywania komponentu, w którym nowy kontekst wymaga innego leczenia.

03. Użyj podporządkowanej podpowiedzi wstępnej

The. Preload. Wskazówka zasobów może podać przeglądarkę głowicę rozpocząć od ładowania CSS witryny. The. Preload. Wskazówka zasobów mówi przeglądarce do zainicjowania wczesnego pobierania aktywów.

Możesz go ustawić jako & lt; link & gt; Tag w HTML:

  & LT; Link Rel = "Preload" Href = "/ CSS / Styles.CSS" AS = "Style"

Lub jako nagłówek HTTP w konfiguracji serwera:

  Link: & LT; /cs/styles.cssss> ;; rel = preload; as = styl

W obu tych scenariuszach Preload. Daje przeglądarce głowa zacznij od załadunku /css/styles.css. . Za pomocą Preload. W nagłówku HTTP jest korzystny, ponieważ oznacza to, że przeglądarka odkryje podpowiedź wcześniej w nagłówkach odpowiedzi, zamiast później w korpusie odpowiedzi.

Kolejny powód do użycia Preload. W nagłówku HTTP zainicjuje zdarzenie serwera na większości implementacji HTTP / 2. Serwer Push jest mechanizmem, dzięki którym aktywa są uprzedzające do klienta, gdy zostaną wykonane żądania treści, a zapewnia świadczenia dotyczące wydajności podobnych do inliningowych CSS.

Push serwer nie jest dostępny na HTTP / 1. Jednak przy użyciu Preload. W środowisku HTTP / 1 może nadal poprawić wydajność.

04. Redundance Cull z CSCS

csscss will analyse any CSS files you give it and let you know which rulesets have duplicated declarations — CSCSS przeanalizują wszystkie pliki CSS, które go dasz i dowiesz się, które reguły mają powielone deklaracje

Może zapłacić, aby sprawdzić CSS dla duplikatów reguł z kontrolą redundancji. Na przykład przyjąć narzędzie oparte na narzędzia Ruby.

Użytkownicy Ruby mogą go zainstalować:

  Gem Zainstaluj CSSCSS

Po zainstalowaniu możesz zbadać CSS do zwolnień takich jak:

  CSSCSS -V Styles.CSS

To listy poleceń, które selekcjonuje reguły, które można usunąć, aby zapisać spację:

 {H1} i {p} Udostępniaj 3 deklaracje
  - Kolor: # 000
  - Wysokość linii: 1,618
  - Margines: 0 0 1.5Rem

Możesz przenieść duplikaty reguły pod jednym selektorem:

 H1, P {
    kolor: # 000;
    Wysokość linii: 1,618;
    Marża: 0 0 1.5Rem;
}

Byłbyś zaskoczony, ile miejsca ten proces może zaoszczędzić w dużych projektach. Użyj --Wsparcie Opcja, aby zobaczyć więcej poleceń, których można użyć, aby dalej podkreślić.

05. Idź dodatkową milę z CSSNANO

cssnano takes your nicely formatted CSS and runs it through many focused optimisations — CSSNANO bierze ładnie sformatowany CSS i prowadzi go przez wiele skupionych optymisów

W wiśni na górze możesz użyć cssnano. - Narzędzie zależne od węzła i PostCS. CSSNANO nie tylko minifuje CSS, sprawia, że wiele koncentrowanych optymisacji, które mogą jeszcze bardziej zmniejszyć CSS. Zainstaluj go w swoim systemie za pomocą NPM:

 NPM I -G CSSNANO-CLI

Następnie użyj go, aby zoptymalizować CSS:

 CSSNANO Styles.css zoptymalizowane style.css

Jeśli uruchomione polecenia ad hoc nie jest twoim stylem, możesz zautomatyzować CSSNANO z systemem budowy. Oto jak korzystać z CSSNANO w Gulapfile:

 Const Gulp = wymagać ("Gulp");
Const Postcsss = wymagają ("Gulp-Postcss");
Const CSSNano = wymagać ("CSSNano");

Const CIRDCSSS = () = & gt; {
    RETURN Gulp.src ("CSS / Styles.css")
        .pipe (Postcssss ([CSSNano ()])
        .Pipe (Gulp.Dest ("CSS / Zoptymalizowany"));
};
Const Watch = () = & GT; {
    Gulp.watch ("CSS / Styles.css", BUIDCSSS);
};
Exports.Buildcss = BUIDCSS;
Exports.watch = zegarek;

The. BUILCSSS. zadanie czyta CSS, w którym piszesz CSS / Styles.css. , a następnie rurowate zoptymalizowane wyjście do CSS / zoptymalizowany informator. The. zegarek Zadanie wyrzuca BUILCSSS. Ilekroć się zmienia CSS / Styles.css. .

The. zegarek Zadanie może być następnie wywołane w terminalu jak:

 Watch Gulp

Dzięki kilkoma ulepszaniu można zbudować przepływ pracy, który wykonuje tę specyficzną optymalizację oprócz innych zadań związanych z CSS, takimi jak budynek Sass / Mniej plików, autopefixing i więcej.

Chcesz zapisać strony internetowe? Eksportuj jako PDF i oszczędzaj w niezawodnym magazyn w chmurze .

Ten artykuł pierwotnie pojawił się netto , wiodący na świecie magazyn dla projektantów stron internetowych. Subskrybuj tutaj .

Powiązane artykuły:

Zrozumienie właściwości wyświetlania CSS
Nowa granica animacji CSS
Jak budować złożone układy za pomocą CSS

5 wskazówek dla super szybkich CSS

01. Użyj płytkich selektorów

02. Użyj nieruchomości Shorthand

03. Użyj podporządkowanej podpowiedzi wstępnej

04. Redundance Cull z CSCS

05. Idź dodatkową milę z CSSNANO

Jak - Najpopularniejsze artykuły

Jak Photoshop na iPhone (tak, to coś)

Jak malować kolorowe sztuki animacji w Photoshopie

Zacznij od Express.js

Dodaj efekt usterki na swoją stronę

Pomaluj ekspresyjną martwą życie w akrylach

Zrób typograficzny plakat za pomocą Adobe InDesign

Utwórz rewelacyjne zachody słońca w Photoshopie

10 Top Tutorials Houdini

Kategorie