Блог за уеб технологии, маркетинг и SEO, мотивация и продуктивност
Как да оптимизираме CSS за SEO – ръководство
Голяма част по представянето на уебсайта зависи от кода му, преди всичко от JavaScript скриптовете и CSS файловете. В това ръководство ще разгледам много от начините за оптимизиране на CSS за постигане на SEO.
В това ръководство ще проучим как да подобрим оптимизацията за търсачки на уебсайта си чрез ефективно използване на CSS. Ще видим как да оптимизираме CSS за SEO.
Ще разгледаме начините как да структурираме кода си, да минимизираме файловете и други важни практики. По този начин да улесним индексирането на сайта и да гарантираме страхотно потребителско изживяване.
Как CSS влияе върху ефективността на страницата
Съдържание
- Как CSS влияе върху ефективността на страницата
- Поддържане на CSS кода чист и организиран
- Минимизиране на CSS за по-бързо зареждане
- Отзивчив дизайн с CSS
- Пестеливо използване на правилото !important в CSS
- Асинхронно зареждане на CSS за оптимална производителност
- Подобряване на производителността на шрифта
- Внедряване на Critical Path CSS
- Оптимизиране на изображения и икони с CSS
- Възползвай се от кеширането на браузъра
- Избягване на използването на inline и вграден CSS
- Създаване на структура от смислени класове и ID
- Инструменти за анализ на производителността на CSS
- Заключение
CSS блокира изобразяването: При среща на таг браузърът спира други изтегляния и обработка, докато извлича и анализира CSS файла.
Големите CSS файлове отнемат време за обработка: Колкото по-голям е CSS файла, толкова повече време отнема изтеглянето и обработката му в CSSOM (CSS Object Model).
CSS файловете растат: Постоянно се добавя и от страх да не се повреди нещо по сайта, не се изтриват ненужни CSS файлове.
CSS може да препращат към други ресурси: CSS може да препраща към други таблици със стилове благодарение на правилата @import. Тези импортирания блокират обработката на текущата таблица със стилове и пакетно зареждат други CSS файлове.
Някои свойства са по-скъпи от изчислителна гледна точка: Например сенки и градиенти, в сравнение с блоковите и периферните цветове.
Поддържане на CSS кода чист и организиран
Добре структуриран и организиран CSS е по-лесен за четене и разбиране, както от разработчиците, така и от търсачките.
Ето някои полезни насоки при работа с CSS файлове и правила, за да оптимизираме CSS:
Групиране на свързани правила
Групирането на свързани CSS правила заедно прави кода по-лесен за четене и разбиране. Например, може да се групират правила за елементи на заглавия (h1, h2, h3 и т.н.) или общи класове на оформление (мрежа, контейнер и т.н.). Това ще помогне да се намали размера на CSS файла и ще подобри четимостта на кода.
Например ето този CSS код:
h2 {
text-align: center;
color: yellow;
}
h3 {
text-align: center;
color: yellow;
}
p
text-align: center;
color: yellow;
}Можеш да го минимизираш с помощта на груповия селектор и да напишеш същия код, както е даден по-долу:
h2, h3, p {
text-align: center;
color: yellow;
}Виж още: 7 най-добри текстови редактори за рационализиране на твоя работен процес на разработчик
Използване на ефективни селектори и комбинации от селектори
Използването на прекалено специфични или вложени селектори могат да направят CSS кода труден за поддръжка и да забавят изобразяването на страницата. Ефективните селектори и комбинации от селектори минимизират специфичността и сложността на кода.
Да не се прилагат стилове към повече елементи от необходимото: Често срещана грешка е прилагането на стилове към всички елементи с помощта на универсалния селектор или поне към повече елементи от необходимото. Този вид стил може да повлияе отрицателно на производителността, особено на по-големи сайтове.
/* Selects every element inside the <body> */
body * {
font-size: 14px;
display: flex;
}Много свойства (като font-size) наследяват стойностите си от своите родители, така че не е необходимо да бъдат прилагани навсякъде. И мощни инструменти като Flexbox трябва да се използват пестеливо. Използването им навсякъде може да причини всякакви видове неочаквано поведение.
Едно основно правило е, да се пише CSS с добри намерения.
Постави стилове върху нещата, които искаш да бъдат стилизирани. Много по-ефективно е да стилизираш това, което искаш, отколкото да дестилизираш това, което не искаш.
Доброто „намерение за селектор“ означава селектор с минимални странични ефекти.
Предпочитат се идентификатори и класове: Селекторите, базирани на идентификатори (#myElement) и класове (.myClass), са по-ефективни и по-бързи от селектори, базирани на елементи (div, p, и други). Търсачките също предпочитат селектори, които са специфични и семантични.
Комбинирани селектори: Може да се комбинират различни селектори, за да се постигне по-точно определяне на елементите, които искаш да стилизираш.
(adsbygoogle = window.adsbygoogle || []).push({});Логично подреждане на свойствата
Подреждането на свойствата на CSS логично и последователно може да направи кода ти по-лесен за четене и разбиране. Например, можеш да сортираш свойства по тип, като разположение, модел на кутия, типография и цвят, или по азбучен ред.
Използване на съвместима конвенция за именуване
Съвместима конвенция за именуване за CSS идентификатори и класове прави кода по-лесен за разбиране и поддръжка. Някои популярни конвенции за именуване включват BEM, OOCSS и SMACSS.
Разделяне на кода на модули или компоненти
Разбиването на CSS кода на отделни модули или компоненти може да го направи кода по-лесен за поддържане и разбиране.
Например, можеш да създадеш отделни CSS файлове за оформление, навигация, типография и цветови компоненти и след това да ги импортираш в основния си CSS файл. Ако уеб сървърът в случая предава по ефективни протоколи като HTTP/2 или HTTP/3, не е проблем за скоростта на страниците да има множество CSS файлове.
Използване на CSS препроцесор
Има много предимства от използването на CSS препроцесор. Едно предимство е удобството. Друга полза е ефективността. CSS препроцесорът може да ти помогне да бъдеш по-ефективен в разработката на CSS.
CSS препроцесорите също могат да се използват за подобряване на организацията на CSS кода. Те могат да помогнат да се направи кодът по-четлив чрез добавяне на коментари и използване на променливи.
Премахване на неизползван CSS код
Премахването на неизползван CSS код може да намали размера на файла и да ускори времето за зареждане на сайта. Инструменти като PurgeCSS или UnusedCSS могат да ти помогнат да идентифицираш и премахнеш неизползван CSS код.
От гледна точка на SEO чистият и организиран CSS код може да помогне на търсачките да разберат по-добре структурата и съдържанието на твоя сайт, подобрявайки индексирането на страницата. В допълнение, добре структуриран CSS код улеснява поддръжката и актуализирането на сайта, което пък позволява бързо да се адаптира към промените в най-добрите практики за SEO и нуждите на потребителите.
Минимизиране на CSS за по-бързо зареждане
Минимизирането на CSS е един от начините, по които можем да оптимизираме CSS. То намалява размера на файла и ускорява времето за зареждане на уебсайта. Това знаем, че носи ползи от страна на търсачките, като Google. Не забравяй да използваш инструменти за минимизиране.
Пример:
Форматиран CSS код:
.whiteshadow {
padding: 30px;
background: #fff;
margin-top: 15px;
margin-bottom: 50px;
box-shadow: rgba(53,45,45,.168627) 0 6px 20px 3px;
border-radius: 3px;
text-align: left;
}CSS код с минимизиране:
.whiteshadow{padding:30px;background:#fff;margin-top:15px;margin-bottom:50px;box-shadow:rgba(53,45,45,.168627) 0 6px 20px 3px;border-radius:3px;text-align:left;}Оригинален скрипт: 192b, минимизиран скрипт: 160b. Спечелени: 32b.
Защо е необходимо минимизирането на CSS за SEO
Когато един сайт зарежда бързо страниците си, се увеличава вероятността потребителите да продължат да разглеждат сайта. Минимизирането на CSS намалява забавянето, подобрява изживяването на потребителите и увеличава вероятността те да останат на сайта и да взаимодействат със съдържанието.
Инструменти за минимизиране
Има няколко онлайн инструменти за минимизиране на CSS и плъгини, които могат да ти помогнат да намалиш размера на твоя CSS файл:
- clean-css: популярен CSS оптимизатор, наличен като модул Node.js.
- CSSNano: друга популярна опция за минимизиране на CSS като модул Node.js или чрез инструменти за изграждане като Webpack и Gulp.
- CSS Minify: онлайн инструмент, който ти позволява да минимизираш CSS, и да го поставиш директно в уебсайта.
- Minifier: минификатор на JavaScript и CSS.
- Freeformatter: компресира CSS низ/файл без възможен страничен ефект.
- Minify: Има много добавки за WordPress, които могат автоматично да минимизират твоя CSS, както и JavaScript и HTML.
Виж още: Въведение в HTML за блогъри: лесно ръководство за основните тагове (и PDF за изтегляне)
Как действа минимизирането
Минимизирането на CSS взема разкрасения, добре оформен CSS код, който си написал, и премахва интервалите, отстъпите, новите редове и коментарите. Тези елементи не са необходими за успешното използване на CSS. Това обаче прави CSS по-труден за четене.
Минимизирането:
- премахва безполезни бели интервали, знаци за отстъпи и прекъсвания на редове;
- премахва всички коментари;
- премахва последната точка и запетая от декларация на стил и допълнителни точки и запетая
- премахва празни CSS декларации;
- премахва единици при използване на нулеви стойности;
- премахва водещата 0, ако плаваща стойност е по-ниска от единица;
- променя RGB цветови стойности към по-кратък шестнадесетичен формат;
- шестнадесетичните цветове, следващи шаблона #AABBCC, се редуцират до #ABC;
- поддържа един набор от знаци за всеки CSS файл, като премахва всички допълнителни декларации;
- стойностите None се преобразуват в 0, когато това е безопасно.
„Най-добрата практика“ на много разработчици е да поддържат „разкрасена“ версия и при пускане на проекта техният проект ще изпълнява стиловете чрез програма за минимизиране. Те също така комбинират своите много стилови файлове в един файл.
(adsbygoogle = window.adsbygoogle || []).push({});Gzip Compression
В допълнение към минимизирането на CSS, можеш да използваш Gzip Compression, за да намалиш допълнително размера на CSS файловете. Gzip компресира CSS, преди да го изпрати до браузъра на потребителя, намалявайки количеството прехвърлени данни и подобрявайки времето за зареждане на сайта. Повечето съвременни уеб сървъри поддържат Gzip компресия, но може да се наложи ръчно да я активираш чрез конфигурационния файл на сървъра.
Конкатенация на CSS файлове
Друга стратегия за намаляване на времето за зареждане и подобряване на производителността на сайта е, да се свържат CSS файлове. Конкатенацията комбинира множество CSS файлове в един файл, намалявайки броя на HTTP заявките, които браузърът трябва да направи, за да зареди всички стилове. Можеш да свържеш своите CSS файлове ръчно или да използваш инструменти за изграждане като Webpack или Gulp (Ето един урок за Gulp), за да автоматизираш процеса.
Използване на shorthands за CSS свойства
Shorthands означава да използваш по-кратък синтаксис, за да посочиш няколко CSS свойства наведнъж. Например, вместо да използваш отделни правила за margin-top, margin-right, margin-bottom и margin-left, можеш да използваш съкратеното правило за margin, за да посочиш всичките четири стойности в един ред. Използването на shorthands помага за намаляване на размера на твоя CSS файл и подобрява четливостта на кода.
Отзивчив дизайн с CSS
Трябва да оптимизираме CSS така, че да поддържат отзивчив дизайн за различни устройства и екрани. Това е от голямо значение, тъй като търсачките предпочитат мобилно-приятелски уебсайтове.
Адаптивният дизайн позволява на уебсайта автоматично да се адаптира към размера на екрана на устройството на потребителя. Търсачките награждават уебсайтове, които предлагат страхотно потребителско изживяване на мобилни устройства и настолни компютри.
Пестеливо използване на правилото !important в CSS
В CSS !important означава, че само стойността на свойството !important трябва да бъде приложена към елемент и всички други декларации за елемента трябва да бъдат игнорирани. С други думи, !important може да се използва за отмяна на други правила за стил в CSS.
Въпреки че е по-лесно, отколкото да се следват многото правила за специфичност при комбиниране на стойности на свойства, използването на свойството !important се счита за лоша практика. То нарушава естествената каскада на таблиците със стилове. Може да причини проблеми с изобразяването в браузърите и най-важното – прави поддръжката и отстраняването на грешки в уебсайта много по-трудни.
Причини, поради които трябва да се избягва злоупотребата с !important
- Затруднява поддръжката на кода: Много !important може да доведат до объркваща и сложна стилова йерархия.
- Отрицателно влияние върху потребителското изживяване: Проблеми с изобразяването в браузърите могат да възникнат, когато различни стилове с !important се припокриват или си противоречат.
- Ограничава модулността и повторното използване на кода: Прекомерната употреба на !important може да затрудни създаването на модулни и многократно използвани компоненти в твоя CSS код. Това може да доведе до увеличаване на дублирането на код и намаляване на общата ефективност на твоя проект.
Пример за това как !important може да се използва по подходящ начин в конкретен случай:
/* Основен стил за всички бутони */
.button {
background-color: blue;
color: white;
}
/* Стил за деактивиран бутон */
.button.disabled {
background-color: gray !important;
color: darkgray !important;
}В този случай използваме !important, за да гарантираме, че деактивираните бутони запазват своя сив фон и тъмен цвят на текста, независимо от всички други CSS правила, които могат да засегнат бутоните. Това е конкретен и ограничен пример, където !important може да бъде оправдан. Като цяло, най-добре е се да потърсят алтернативи за справяне със спецификата и подреждането на CSS стиловете, без да се прибягва до използването на !important.
Алтернативи на !important, за управление на спецификата и подреждането на CSS стилове:
- Увеличаване на специфичността на селектора: Например, ако селектор на клас
.buttonима стил, който искаш да замениш, можеш да използваш по-специфичен селектор като.container .button. - Използване на CSS методология: Приемането на CSS методология, като BEM, OOCSS или SMACSS, може да ти помогне да организираш кода си по по-структуриран и предвидим начин.
- Прегледай реда на своите стилове: Редът, в който са дефинирани в твоя лист със стилове, може да повлияе кой стил има приоритет. Опитай се да организираш своя CSS по логичен и последователен начин, с по-общи стилове, дефинирани преди по-конкретни стилове.
Асинхронно зареждане на CSS за оптимална производителност
Едно от най-въздействащите неща, които можем да направим, за да подобрим ефективността и устойчивостта на страницата, е да заредим CSS по начин, който не забавя изобразяването на страницата. Това е така, защото по подразбиране браузърите ще зареждат външен CSS синхронно – спирайки изобразяването на всички страници, докато CSS се изтегля и анализира – и двете водят до потенциални забавяния.
Асинхронното зареждане на CSS може да подобри ефективността на уебсайта чрез намаляване на блокирането на изобразяването. Използват се атрибути preload, onload или други техники, за да се зареди CSS асинхронно.
Зареждането на CSS асинхронно означава, че браузърът може да продължи да обработва и показва съдържанието на страницата, докато CSS файлът се изтегля и прилага. Това може да намали блокирането на изобразяването и да подобри времето за зареждане на страницата.
Ето някои техники и съвети за асинхронно зареждане на CSS:
Използване на атрибут “onload”
Атрибутът onload се активира, когато даден обект е зареден.
Като знаем как браузърът обработва различни link атрибути на елементи, можем да постигнем ефекта на зареждане на CSS асинхронно с кратък ред от HTML. Ето го най-лесният начин за асинхронно зареждане на лист със стилове:
<link rel="stylesheet" href="/path/to/my.css" media="print" onload="this.media='all'">link атрибутът media е зададен на print. „Print“ е media type, който казва „приложете правилата на този стилов лист за базирани на печат медии“, или с други думи, приложете ги, когато потребителят се опита да отпечата страницата. Искаме нашата таблица със стилове да се прилага за всички медии (особено екрани), а не само за печат, но като декларираме тип медия, който не съответства на текущата среда, можем да постигнем интересен и полезен ефект: браузърът ще зареди таблицата със стилове без забавяне на изобразяването на страницата, асинхронно! Това е полезно, но не е всичко, което искаме. Също така искаме CSS действително да се прилага към екран, след като се зареди. За това можем да използваме onload атрибута, за да настроим media на link носителя на all , когато приключи зареждането.
Използване на атрибут “preload”
Стойността за предварително зареждане на атрибута rel на елемента на връзката позволява да се декларират заявки за извличане в главата на HTML, указвайки ресурси, от които страницата ще има нужда много скоро. Искаме да започнат да се зареждат в началото на жизнения цикъл на страницата, преди основната машина за изобразяване на браузъра да започне да работи. Това гарантира, че те са достъпни по-рано и е по-малко вероятно да блокират изобразяването на страницата, подобрявайки производителността. Въпреки че името съдържа термина load, той не зарежда и изпълнява скрипта, а само го планира да бъде изтеглен и кеширан с по-висок приоритет.
Ето как атрибут preload може да се използва, за да кажеш на браузъра да зареди ресурс по приоритетен и асинхронен начин. Добавя се следния код в тага на HTML документ:
<link rel="preload" href="stile.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="stile.css"></noscript>В този пример CSS ресурсът е предварително зареден и след като зареждането приключи, неговият атрибут rel се променя на stylesheet, за да се приложат стиловете към страницата.
Тагът noscript гарантира, че стиловете се прилагат в случай, че JavaScript е деактивиран в браузъра на потребителя.
Използване на JavaScript за асинхронно зареждане
Можеш да използваш JavaScript, за да заредиш CSS асинхронно, като динамично създадеш елемент „link“ и го добавиш към DOM. Ето пример как да го направиш:
var link = document.createElement("link");
link.rel = "stylesheet";
link.href = "stile.css";
link.media = "none";
link.onload = function() {
link.media = "all";
};
document.head.appendChild(link);В този пример е създаден елемент „link“ с неговите атрибути, зададени за зареждане на CSS файла. Атрибутът media първоначално е зададен на none, за да се избегне блокиране на рендъринга и след това е променен на all, след като CSS файлът бъде зареден.
SEO аспекти
Асинхронното зареждане на CSS може да подобри времето за зареждане на страницата и да намали блокирането на изобразяването, като и двата фактора са важни за потребителското изживяване и класирането в резултатите от търсенето. Въпреки това е важно да се отбележи, че асинхронното зареждане на CSS може да причини “flash of unstyled content” (FOUC), ако стиловете се прилагат твърде късно. За да се смекчи този проблем, може да се използва Critical Path CSS, както е описано по-долу.
Flash of unstyled content (FOUC) (мигане на нестилизиран текст ) е случай, при който уеб страница се появява за кратко със стиловете по подразбиране на браузъра преди зареждането на външен CSS стилов лист, поради това, че машината на уеб браузъра я изобразява, преди да бъде извлечена цялата информация. Страницата се коригира веднага щом стиловите правила се заредят и приложат, обаче смяната може да е разсейваща.
Подобряване на производителността на шрифта
Трябва да бъдат обмислени внимателно шрифтовете, които се използват на сайта. Някои файлове с шрифтове могат да бъдат много големи (няколко мегабайта). Въпреки че може да е изкушаващо да се използват много шрифтове за привличащо визуално представяне, това може значително да забави зареждането на страницата и да накара сайтът да изглежда като бъркотия.
Зареждане на шрифтове
Шрифтът се зарежда само когато действително се прилага към елемент с помощта на font-family свойството, а не когато се препраща за първи път с помощта на @font-face at правило (at-rule). (At-rules са CSS изрази, които инструктират CSS как да се държи.) Следователно може да бъде полезно да се използва rel="preload" за ранно зареждане на важни шрифтове, така че те да бъдат достъпни по-бързо, когато действително са необходими:
<link rel="preload" href="OpenSans-Regular-webfont.woff2" as="font" type="font/woff2" crossorigin />Зареждане само на нужните глифове
Когато избираш шрифт за body съдържанието, е по-трудно да си сигурен в глифовете (глифът е наименованието на всяко конкретно изображение от дадена писмена система), които ще бъдат използвани в него, особено ако имаш работа с генерирано от потребителите съдържание и / или съдържание на повече езици.
Ако обаче знаеш, че ще използваш конкретен набор от глифове (например глифове само за заглавия или специфични препинателни знаци), можеш да ограничиш броя, който браузърът трябва да изтегли. Това може да се направи чрез груба сила чрез създаване на файл с шрифт, който съдържа само необходимото подмножество.
Има обаче по-умен начин. Дескрипторът на @font-face unicode-range може да се използва за указване на точното подмножество от глифове или диапазони от глифове, които искаш да изтеглиш:
@font-face {
font-family: "Open Sans";
src: url("OpenSans-Regular-webfont.woff2") format("woff2");
unicode-range: U+0025-00FF;
}Определяне на поведението на дисплея на шрифта с font-display дескриптора
Приложен към @font-face правилото at (at-rule), font-display дескрипторът определя как файловете с шрифтове се зареждат и показват от браузъра, позволявайки текстът да се показва с резервен шрифт, докато шрифтът се зарежда или не успява да се зареди. Това подобрява производителността, като прави текста видим, вместо да има празен екран, като компромисът е светкавичен текст без стил.
@font-face {
font-family: someFont;
src: url(/path/to/fonts/someFont.woff) format("woff");
font-weight: 400;
font-style: normal;
font-display: fallback;
}Внедряване на Critical Path CSS
Critical Path CSS се отнася до минималния CSS стил, необходим, за да направи горната част на страницата (above-the-fold) видима възможно най-бързо.
Извличането и вграждането на Critical Path CSS в тага на HTML документ може да подобри времето за зареждане на страницата и потребителското възприятие за производителност.
За да идентифицираш Critical Path CSS, можеш да използваш онлайн инструменти, като Penthouse или Critical. Тези инструменти анализират страницата и генерират CSS, необходим за изобразяване на съдържанието на видимата на екрана част от страницата. Можеш също така ръчно да извлечеш Critical Path CSS, като прегледаш кода си и идентифицираш стилове, които се отнасят директно до горната част на страницата.
След като идентифицираш Critical Path CSS, трябва да го вградиш в head тага на твоя HTML документ. Това позволява на браузъра бързо да получи стиловете, необходими за изобразяване на съдържание на видимата на екрана част от страницата, без да се налага да чака целият CSS файл да се зареди. Можеш да използваш тага style, за да вмъкнеш Critical Path CSS директно в твоя HTML документ, както в следния пример:
<!DOCTYPE html>
<html>
<head>
<style>
/* IВъведете своя Critical Path CSS тук */
</style>
</head>
<body>
<!-- Твоето съдържание -->
</body>
</html>След като си включил Critical Path CSS, важно е да заредиш останалата част от CSS асинхронно, за да предотвратиш блокиране на изобразяването на страницата. Можеш да направиш това, като използваш таг link с атрибута rel=”preload” и as=”style”, за да заредиш предварително твоя CSS файл и атрибута onload, за да го приложиш към документа, след като бъде зареден:
<link rel="preload" href="path/to/your/stylesheet.css" as="style" onload="this.onload=null;this.rel='stylesheet'"> <noscript><link rel="stylesheet" href="path/to/your/stylesheet.css"></noscript>След като внедриш Critical Path CSS, от решаващо значение е да наблюдаваш и тестваш ефективността на сайта, за да си сигурен, че промените наистина са подобрили потребителското изживяване и времето за зареждане на страницата.
Използвай инструменти като Google Lighthouse, PageSpeed Insights или WebPageTest, за да анализираш ефективността и да идентифицираш области за подобрение. Имай предвид, че Critical Path CSS може да се промени с течение на времето, докато актуализираш дизайна на уебсайта си, така че е важно редовно да тестваш и актуализираш своя Critical Path CSS, за да поддържаш оптимална производителност.
Внедряването на Critical Path CSS може да бъде предизвикателство, особено ако твоят уебсайт съдържа много страници с различни оформления. Трябва да тестваш Critical Path CSS на всички ключови страници, за да се увериш, че няма да причини проблеми с дисплея.
Виж още: Помощни материали по HTML, CSS и JS (cheat sheet – пищови)
Оптимизиране на изображения и икони с CSS
(adsbygoogle = window.adsbygoogle || []).push({});Могат да се намалят HTTP заявките, като се използват CSS спрайтове за икони и фонови изображения или се премине към базирани на шрифт икони или SVG. Оптимизирането на изображението и използването на техники като отложено зареждане за изображения извън екрана може да подобри ефективността на сайта и индексирането в търсачката.
Какво е CSS спрайт (CSS image sprite)?
CSS image sprite е изображение, съставено от множество изображения или икони. Използвайки CSS спрайт, може да се комбинират няколко икони и фонови изображения в едно изображение и да се намали броя на HTTP заявките. За да използваш CSS спрайт, приложи стила background-image и използвай свойствата background-position и background-repeat, за да позиционираш правилно и да показваш отделни икони или изображения. CSS спрайтовете са най-подходящи за изображения, които не променят размера си често, като икони и лого.
Икони, базирани на шрифтове
Иконите, базирани на шрифтове, са алтернатива на растеризирани изображения или CSS спрайтове. Тези икони са векторни и могат лесно да се преоразмеряват, като не губят качество, когато се увеличават или намаляват. Могат да бъдат внедрени с помощта на библиотеки като Font Awesome, които предлагат огромна гама от използваеми икони само с няколко реда код. Този метод допълнително намалява HTTP заявките и подобрява производителността на сайта.
SVG (мащабируема векторна графика)
SVG изображенията са друг начин за оптимизиране на икони и фонови изображения. SVG изображенията са векторни, което означава, че запазват качеството си независимо от размера. Те могат да бъдат вградени директно в HTML или CSS чрез техния собствен код, като по този начин се намаляват HTTP заявките. Освен това SVG изображенията могат лесно да бъдат анимирани или модифицирани с CSS и JavaScript.
Мързеливо зареждане
Мързеливото зареждане е стратегия за идентифициране на ресурсите като неблокиращи (некритични) и зареждането им само когато е необходимо. Това е начин да се съкрати дължината на критичния път на изобразяване, което се изразява в намалено време за зареждане на страницата.
Мързеливото зареждане може да възникне в различни моменти в приложението, но обикновено се случва при някои потребителски взаимодействия, като превъртане и навигация. Може да бъде приложено с помощта на JavaScript или атрибута loading=”lazy” в img тага за изображения. Възможно е поддръжката на loading=”lazy” да не е налична за някои браузъри, така че е важно да се тества съвместимостта и да се предостави резервен вариант, ако е необходимо.
Оптимизиране на изображения
Преди да качиш изображения на уебсайта си, важно е да ги оптимизираш, за да намалиш размера на файла. Използвай инструменти като ImageOptim, TinyPNG, JPEGmini, Befunky, Ezgif, за да компресираш изображения без загуба на качество. Също така не забравяй да подаваш изображения в подходящ формат (например WebP за браузъри, които го поддържат), за да осигуриш възможно най-добра производителност.
Като използваш свойствата, дефинирани в модула за ограничаване на CSS, можеш да инструктираш браузъра да изолира различни части от страница и да оптимизира изобразяването им независимо една от друга. Това позволява подобрена производителност при рендъринг на отделни секции. Като пример, можеш да зададеш на браузъра да не изобразява определени контейнери, докато не са видими в прозореца за изглед.
Свойството contain позволява на автора да посочи точно какви типове съдържание иска да бъдат приложени към отделните контейнери на страницата. Това позволява на браузъра да преизчисли оформление, стил, боя, размер или всяка комбинация от тях за ограничена част от DOM.
article {
contain: content;
}Свойството content-visibility е полезен пряк път, който позволява на авторите да прилагат силен набор от ограничения върху набор от контейнери и да уточнят, че браузърът не трябва да оформя и визуализира тези контейнери, докато не е необходимо.
Налично е и второ свойство contain-intrinsic-size, което позволява да се предостави размер на placeholder за контейнери, докато те са под въздействието на ограничаване. Това означава, че контейнерите ще заемат място, дори ако съдържанието им все още не е изобразено, позволявайки на ограничаването да направи своята магия за изпълнение без риск от изместване на лентата за превъртане и изместване, докато елементите се изобразяват и излизат в изглед. Това подобрява качеството на потребителското изживяване, докато съдържанието се зарежда.
article {
content-visibility: auto;
contain-intrinsic-size: 1000px;
}Възползвай се от кеширането на браузъра
Конфигурирай кеширането на браузъра, за да съхраняваш статични CSS активи на устройството на потребителя. Това ще намали времето за зареждане на страницата при следващи потребителски посещения и ще подобри ефективността на сайта. Ето някои указания:
- Задаване на заглавки за HTTP кеширане: HTTP заглавките позволяват да бъде контролирано поведението на кеширане на браузъра. Можеш да използваш заглавката „Cache-Control“, за да укажеш колко дълго да се съхраняват ресурсите в браузъра на потребителя.
- Конфигуриране на уеб сървър: В зависимост от уеб сървъра, който използваш (например Apache, Nginx, IIS), може да се наложи да се конфигурират настройките за кеширане, за да се борави правилно с CSS ресурсите.
- Използване на отпечатък или версия на ресурс: За да си сигурен, че браузърът на потребителя изисква най-новата версия на CSS ресурси, когато правиш промени, използвай отпечатък или версия на ресурс. Добави уникален идентификатор, като timestamp или hash, към URL адреса на CSS ресурса, за да „принудиш“ браузъра да поиска актуализираната версия, когато е необходимо.
- Използвай мрежи за доставка на съдържание (CDN): CDN е глобално разпределена мрежа от сървъри, които доставят съдържание на потребителите въз основа на тяхното географско местоположение. Използването на CDN за CSS активи може да подобри времето за зареждане на страницата и да намали времето за изчакване за потребителите, тъй като активите се обслужват от най-близкия до потребителя сървър. Много CDN също предлагат разширени функции за кеширане, които могат да бъдат персонализирани според вашите нужди.
- GZIP компресия: Активирай GZIP компресия на твоя уеб сървър, за да намалиш размера на CSS файловете (и други ресурси) по време на прехвърляне. Това ще намали времето за изтегляне на ресурси и ще подобри производителността на сайта.
- Анализирай ефективността на кеширането на браузъра: Използвай инструменти за анализ на ефективността, като Google Lighthouse или PageSpeed Insights, за да провериш ефективността на кеширането на браузъра на твоя сайт.
Избягване на използването на inline и вграден CSS
(adsbygoogle = window.adsbygoogle || []).push({});Това също е един от начините да оптимизираме CSS.
Вграденият и inline CSS може да направи сайта по-труден за поддръжка и да увеличи размера на страницата.
Съветът за избягване на използването на inline и вграден CSS може да изглежда в противоречие със съвета за вграждане на Critical Path CSS в тага на HTML документ. Тези две практики обаче имат различни цели и и включването на Critical Path CSS е конкретно изключение от общото правило. Ето едно по-подробно разглеждане:
Inline CSS: Стилът се прилага директно към HTML елемента с помощта на атрибута style. Този тип CSS има най-висок приоритет и може да замени стилове, дефинирани другаде, но е труден за управление и поддръжка.
Вграден CSS: CSS се поставя в таг за стил <style> в HTML документа. Въпреки че е по-лесен за поддръжка от вградения CSS, той може да увеличи размера на HTML файла и да направи кода да изглежда по-малко организиран.
Външен CSS: CSS се съхранява в отделен файл (обикновено с разширение .css) и е свързан към HTML документа чрез етикет за връзка. Този метод е най-препоръчителният, защото поддържа кода организиран и отделя HTML структурата от стила.
Вграждането на Critical Path CSS е конкретно изключение от общото правило за избягване на вграден CSS. Поставяйки този CSS в заглавния таг на HTML документ, се дава приоритет на зареждането на тези основни стилове и подобрява възприятието на потребителя за производителност. След като Critical Path CSS бъде зареден, останалата част от CSS може да бъде заредена асинхронно чрез външен файл.
Създаване на структура от смислени класове и ID
Използването на имена на класове и идентификатори, които ясно описват тяхната функция, прави код по-лесен за четене и разбиране. Това също може да помогне на търсачките да разберат по-добре структурата и съдържанието на сайта.
Ето някои допълнителни подробности и полезни съвети:
- Избягвай общи имена и идентификатори на класове: имена като „container“, „wrapper“ или „box“ са твърде общи и не предлагат информация за функцията на елемента. Вместо това е хубаво да се изберат имена, които ясно описват предназначението на елемента, като например „header-navigation“ или „footer-links“. Това ще направи кода по-четлив и ще помогне на търсачките да разберат структурата на страницата.
- Използвай последователни префикси и суфикси: Използването на последователни префикси и суфикси за класовете и ID може да помогне да се поддържа кода организиран и лесно разбираем. Например, префикс като ‘js-‘ за класове, които взаимодействат с JavaScript, или суфикс като ‘-btn‘ за бутони.
- Приеми конвенция за именуване: Избери конвенция за именуване и се придържай към нея през целия си проект. Има няколко популярни конвенции, като BEM (блок, елемент, модификатор), които могат да ти помогнат да създадеш последователни и смислени идентификатори и имена на класове.
- Избягвай прекомерната употреба на съкращения: Докато съкращенията могат да опростят кода, прекомерната им употреба може да затрудни четенето и разбирането.
- Използвай йерархичен подход: Подреди класовете и ID йерархично, за да отразяват структурата на страницата. Например, може да имаш клас ‘article‘ за родителски елемент и дъщерни класове като ‘article__title‘ и ‘article__content‘ за вътрешни елементи.
Инструменти за анализ на производителността на CSS
Да признаеш, че имаш проблем с производителността на CSS, е първата стъпка по пътя към решаването му. Следващата е намирането на проблема и отстраняването на причините.
Ето някои от многото инструменти и услуги, които могат да ти помогнат да идентифицираш слабите места в твоя код.
1. Панел Network в DevTools
Специалистите по уеб производителност прекарват много време в DevTools и по-специално в мрежовия панел. DevTools е естествен за повечето съвременни браузъри, но тук използвам Google Chrome за примерите.
DevTools може да се отвори от менюто на браузъра, обикновено от More Tools–>Developer–>Tools или чрез клавишната комбинация Ctrl / Cmd + Shift + I или F12.
Иди в раздела Network и провери дали опцията Disable cache е отметната, за да предотвратиш влиянието на кешираните файлове върху отчета. Можеш също така да промениш опцията за регулиране, за да симулираш по-бавни мобилни мрежи.
Обнови страницата, за да видиш диаграмата на каскадата за изтегляне и обработка:
Всякакви дълги ленти в диаграмата са причина за безпокойство, но трябва да се съсредоточиш особено върху заседналите или в невъзможност да продължат дълги ленти (показани в бяло). В този пример маркираният ред и всички следващи редове не могат да започнат да се изтеглят, докато JavaScript и CSS файлове, които блокират изобразяването не бъдат обработени в горната част на HTML страницата.
Страница с висока производителност и оптимизиран CSS обикновено има по-малко ресурси, заредени паралелно с по-къси заседнали или блокирани ленти.
Виж още: 36 изключително полезни разширения на Chrome за уеб разработчици
2. Панелът Lighthouse DevTools на Chrome
Панелът DevTools Lighthouse е включен в браузъри, базирани на Chromium, като Chrome, Edge, Brave, Opera и Vivaldi. Можеш да генерираш отчети за производителност, прогресивни уеб приложения, най-добри практики, достъпност и оптимизация за търсачки за мобилни устройства и настолни компютри.
Инструментът предоставя предложения за подобрения, включително начини за оптимизиране на CSS. Не всички от тях може да са практични или възможни, но са подчертани основните предимства.
3. Google PageSpeed Insights
PageSpeed Insights е онлайн версията на Lighthouse. Той има по-малко функции, но може да се използва във всеки браузър и предоставя някои алтернативни информации.
Подобни инструменти за тестване на скоростта на уебсайта включват Pingdom Website Speed Test и GTmetrix.
4. Доклад за ефективността на DevTools
Таблото за управление на производителността (Performance) на DevTools ти позволява да регистрираш активността на страницата за по-нататъшен анализ и да ти помогне да идентифицираш проблеми с производителността. Генерираните отчети са сложни и специалистите по разработка често ги избягват, но те предоставят ценна информация.
За да започнеш, кликни върху кръглата икона Запис, зареди страницата си, след което кликни върху бутона Стоп, за да видиш отчета.
Повечето от тези показатели ще бъдат полезни за разработчиците на JavaScript, но проблемите с CSS оптимизацията могат да бъдат особено забележими поради:
- Червена лента отгоре: Това показва, че честотата на кадрите е спаднала значително, което може да причини проблеми с производителността. Очаква се в началото на зареждането на страницата, но прекомерните CSS анимации също могат да бъдат проблем.
- Обобщена диаграма: Високите показатели за зареждане, изобразяване и рисуване могат да показват проблеми с CSS.
Заключение
Проучихме някои основни стъпки как да оптимизираме CSS за SEO и да подобрим видимостта на уебсайта си. Ефективното внедряване на CSS е от ключово значение за осигуряване на страхотно потребителско изживяване и успешно позициониране в резултатите от търсачките.
Надявам се, че това ръководство ти е било полезно и ти е предоставило инструментите, от които се нуждаеш, за да оптимизираш уебсайта си. Светът на уеб разработката обаче непрекъснато се развива и винаги има нови техники и подходи за откриване. Затова те каня да споделиш своя опит и съвет в коментарите по-долу.
