5 съвета за супер бърз CSS

Мислили ли сте за размера на CSS на вашия сайт? Ако вашата таблица със стилове балонира, това може да забави изобразяването на страницата.

Въпреки че CSS не е най-големият тип активи, които ще обслужвате, той е един от първите, които браузърът открива. Тъй като браузърът е блокиран да изобразява страницата, докато CSS не бъде изтеглен и анализиран, той трябва да бъде възможно най-слаб. Ето пет съвета, които ще ви помогнат да стигнете до там.



Имате сложен сайт? Имате нужда от перфектното уеб хостинг обслужване. Или, ако искате да направите сайт без шум, опитайте a уеб конструктор .



01. Използвайте плитки селектори

Родителите ви ви казаха, че плиткостта не е добродетел, но що се отнася до CSS, те грешат. Използвани последователно, плитките селектори могат да отрежат килобайта от големи стилови листове. Вземете този селектор:

nav ul li.nav-item

Това може да се изрази по-кратко:



.nav-item

Освен че помага да поддържате CSS чист, браузърът също така ще изобразява по-бързо елементите, насочени от плитки селектори. Браузърите четат селектори отдясно наляво. Колкото по-дълбоки са селекторите, толкова по-дълго отнема на браузъра да изобрази и изобрази отново елементите, към които са приложени тези селектори. За сложни DOM, които често се преправят, късите селектори също могат да намалят критериите.

В идеалния случай искате селекторите да бъдат възможно най-плитки, но това не означава, че трябва да намалите всичко до костите. Понякога се нуждаете от допълнителна специфичност за разширяване на компонентите. Намерете правилния баланс, но бъдете и прагматични.

02. Използвайте стенографски свойства

Използването на стенографски CSS ще ускори вашия сайт



Използването на стенографски CSS ще ускори вашия сайт

Това изглежда като здрав разум, но ще бъдете изненадани от това колко често се използват ненужни свойства с излишни ръце. Ето пример за някои използвани дълготрайни свойства:

font-size: 1.5rem; line-height: 1.618; font-family: 'Arial', 'Helvetica', sans-serif;

Това е много CSS! Нека подредим това:

как да почистите акрилни четки за боя, докато рисувате
font: 1.5rem/1.618 'Arial', 'Helvetica', sans-serif;

The направете стенографското свойство кондензира няколко декларации в удобна еднолинейна линия, която заема много по-малко място.

В примера, показан по-горе, стенографията използва около 40% по-малко пространство от еквивалента на стенограмата. На пръв поглед не е толкова четлив, но синтаксисът става втора природа, след като сте прекарали известно време в него.

Разбира се, направете не е единственият стенопис, достъпен за вас. Например, марж може да се използва вместо по-дълги свойства като margin-top , марж-дясно и така нататък.

The подплата имотът работи по същия начин. За повече начини за почистване на вашия CSS, Mozilla Developer Network предлага полезен списък с стенографски препратки към свойства .

Ами ако трябва да замените стойност по-надолу в каскадата? Да приемем например, че имате заглавен елемент, който трябва да промени размера на шрифта си за по-големи дисплеи.

В този случай трябва да използвате по-конкретното размер на шрифта вместо това:

h1{ font: 1.5rem/1.618 'Arial', 'Helvetica', sans-serif; } @media (min-width: 60rem){ h1{ font-size: 2rem; } }

Това е не само удобно, но също така увеличава гъвкавостта на компонентите. Ако има някаква друга част от основата направете свойството е модифицирано, тези промени ще се променят до по-големи дисплеи. Това работи чудесно за замествания на компоненти, когато нов контекст изисква различно третиране.

03. Използвайте подсказката за ресурс за предварително зареждане

The предварително зареждане ресурсен подсказка може да даде начален старт на браузъра при зареждане на CSS на вашия сайт. The предварително зареждане Resource hint казва на браузъра да инициира ранно извличане на актив.

Можете да го зададете като таг в HTML:

Или като HTTP заглавка в конфигурацията на вашия сървър:

Link: ; rel=preload; as=style

И в двата сценария, предварително зареждане дава предимство на браузъра при зареждане /css/styles.css . Използвайки предварително зареждане в HTTP заглавие е за предпочитане, тъй като това означава, че браузърът ще открие намека по-рано в заглавията на отговорите, вместо по-късно в тялото на отговора.

Друга причина за използване предварително зареждане в HTTP заглавката е, че той ще инициира събитие за изтласкване на сървъра при повечето реализации на HTTP / 2. Изтласкването на сървъра е механизъм, чрез който активите се изтласкват превантивно към клиента, когато се правят заявки за съдържание, и предлага предимства на производителността, подобни на вграждането на CSS.

Изтласкването на сървъра не е налично на HTTP / 1. Въпреки това, използвайки предварително зареждане в HTTP / 1 среда все още може да подобри производителността.

04. Излишни съкращения с csscss

csscss ще анализира всички CSS файлове, които му дадете, и ще ви уведоми кои набори от правила имат дублирани декларации

csscss ще анализира всички CSS файлове, които му дадете, и ще ви уведоми кои набори от правила имат дублирани декларации

Може да си платите, за да проверите вашия CSS за дублиращи се правила с инструмент за проверка на резервирането. Вземете например базиран на Ruby инструмент csscss.

Потребителите на Ruby могат да го инсталират с:

gem install csscss

Веднъж инсталиран, можете да проверите CSS за съкращения по следния начин:

csscss -v styles.css

Тази команда изброява кои селектори споделят правила, които можете да дедублирате, за да спестите място:

как да запазите филийки в
{h1} AND {p} share 3 declarations - color: #000 - line-height: 1.618 - margin: 0 0 1.5rem

Можете да премествате дублирани правила под един селектор:

h1, p{ color: #000; line-height: 1.618; margin: 0 0 1.5rem; }

Ще се изненадате колко място може да спести този процес в големи проекти. Използвай --помогне опция, за да видите повече команди, които можете да използвате, за да промените нещата допълнително.

05. Преминете допълнително с cssnano

cssnano взема вашия добре форматиран CSS и го прекарва през много фокусирани оптимизации

cssnano взема вашия добре форматиран CSS и го прекарва през много фокусирани оптимизации

За черешата отгоре можете да използвате cssnano - възел и инструмент, зависим от PostCSS. cssnano не само минимизира CSS, той прави много фокусирани оптимизации, които могат да намалят CSS още повече. Инсталирайте го на вашата система с npm така:

npm i -g cssnano-cli

След това го използвайте за оптимизиране на вашия CSS:

cssnano styles.css optimized-styles.css

Ако стартирането на команди ad hoc не е вашият стил, можете да автоматизирате cssnano със система за изграждане. Ето как да използвате cssnano в gulpfile:

const gulp = require('gulp'); const postcss = require('gulp-postcss'); const cssnano = require('cssnano'); const buildCSS = ()=>{ return gulp.src('css/styles.css') .pipe(postcss([cssnano()]) .pipe(gulp.dest('css/optimized')); }; const watch = ()=>{ gulp.watch('css/styles.css', buildCSS); }; exports.buildCSS = buildCSS; exports.watch = watch;

The buildCSS задача чете CSS, в който пишете css / styles.css , след това насочва оптимизирания изход към css / оптимизиран директория. The гледам задачата започва buildCSS винаги когато настъпят промени в css / styles.css .

The гледам След това задачата може да бъде извикана в терминала по следния начин:

gulp watch

С някои настройки можете да изградите работен поток, който изпълнява тази специфична оптимизация в допълнение към други CSS задачи, като например изграждане на Sass / Less файлове, автоматично префиксиране и други.

Искате ли да запазите страниците на уебсайта си? Експортирайте като PDF файлове и запазете надеждно съхранение в облака .

Тази статия първоначално се появи в нето , водещото световно списание за уеб дизайнери. Абонирайте се тук .

Свързани статии: