Аптымізацыя CSS для паскарэння сайта - 9 спосабаў

Надрукаваць · Время на чтение: 6мін · па · Апублікавана · Абноўлены

прайграцьПраслухаць артыкул

Аптымізацыя css кода сайта.

Павольны сайт гэта заўсёды дрэнна! Мне здаецца, фраза аптымізацыя CSS кода для паскарэння сайта, прысутнічае ў пошуку часта як і 301 рэдырэкт ці robots.txt. А можа быць, вы ставіцеся да катэгорыі распрацоўшчыкаў, якія адпраўляюць сайты, не клапоцячыся аб аптымальнай прадукцыйнасці?

Калі Вы ставіцеся да першага варыянту, тады гэты артыкул для вас. Цяпер я распавяду вам, пра 9 лепшых спосабаў, якія дапамогуць Вам аптымізаваць CSS. Гэтыя парады дазволяць паскорыць ваш сайт і падняцца ў выдачы. Такі эфект значна павялічыць прыток новых наведвальнікаў на ваш сайт.

Важнасць хуткасці сайта для пасоўвання ў арганічнай выдачы

Як аптымізаваць код CSS для хутчэйшай загрузкі сайта.

Вы будзеце здзіўлены, аб важнасці больш хуткіх вэб-сайтаў. Асноўных прычын некалькі, але іх уплыў значна адбіваецца на пазыцыі сайта. Асноўныя прычыны:

  1. Наведвальнікі вэб-рэсурсаў не любяць чакаць працяглы час, пакуль старонка загрузіцца поўнасцю;
  2. Вашы кліенты абавязкова вярнуцца на сайт, калі ён будзе хутка працаваць; Больш хуткія сайты, заўсёды займаюць больш высокія пазіцыі ў пошукавых сістэмах;
  3. Таксама хуткасць сайта, падвышаюць каштоўнасць вашай стратэгіі SEO;
Такія рэсурсы проста класныя і ствараюць прыемнае ўражанне. Цяпер, што б вы зрабілі, каб зрабіць свой сайт хутчэй? Вядома, паляпшэнне гэтай сітуацыі можа запатрабаваць ад Вас мноства дзеянняў.

Напрыклад абнаўленне вашага сервера, АЗП, сховішча або абсталяванне ў цэлым. Але ці ведаеце вы, што галоўная прычына павольнага сайта ляжыць у вашым зыходным кодзе? Адсутнасць аптымізаванага CSS, з'яўляецца найболей распаўсюджаным чыннікам. Гэта азначае, што памяншэнне памеру файла вашай табліцы стыляў нават на некалькі кілабайт, акажа значны ўплыў на час загрузкі вашай старонкі.

Выкарыстоўвайце спрайты малюнкаў

CSS Sprites - гэта сродак аб'яднання некалькіх малюнкаў у адзін файл выявы. Далей выкарыстання яго на вэб-сайце для павышэння прадукцыйнасці. Падобнае выкарыстанне спрайт малюнкаў з'яўляецца даўняй тэхнікай. Калі справа даходзіць да памяншэння памеру файла CSS і памяншэнні часу загрузкі старонкі гэтая тэхніка проста неабходна.

Спрайты малюнкаў дазваляюць пакаваць выявы ў адзін вялікі файл .png. Гэты метад памяншае HTTP-запыты і скарачае час загрузкі старонкі. Спрайт малюнкаў - выдатны выбар, калі вы выкарыстоўваеце шмат абразкоў і графікі на сваім сайце. Такі варыянт значна паменшыць накладныя выдаткі на неабходнасць вымання некалькіх малюнкаў.

Аптымізацыя CSS

Скарачэнне CSS - Гэта проста сціск вашага файла ў новы файл з мінімальнай колькасцю прабелаў. Чым менш код, тым хутчэй ён будзе прачытаны браўзэрам карыстальніка.

Вядома, вам не трэба рабіць гэта ўручную, паколькі ў Інтэрнэце ёсць аўтаматычныя кампрэсары. Толькі дзякуючы такім простым анлайн інструментам, можна правесці сціск у лічаныя хвіліны. Вось адзін з такіх абмежавальнікаў: http://www.cssminifier.com

Паменшыце непатрэбны код

Нам непатрэбны паўтаральны код. Падобны код у значнай ступені запавольвае загрузку элементаў. Браўзэру неабходна паўторна праходзіць дублі кода, марнуючы на гэта лішнія дзелі секунды. Гэта яшчэ адна хітрасць для падвышэння хуткасці загрузкі старонкі - скарачэнне непатрэбнага кода. Такое паляпшэнне можа быць дасягнута шляхам праверкі залішняга або дубляванага кода.

Змесціце CSS табліцы ў head а JS скрыпты ў футэр

Добрай практыкай з'яўляецца размяшчэнне табліцы стыляў уверсе (паміж тэгамі head), а ўнізе - кода JavaScript. Упэўніцеся, што Ваш код загружаецца да астатняй часткі старонкі. Асноўнай прычынай размяшчэння JavaScript у ніжняй частцы сайта з'яўляецца яго вялікі памер. А таксама яго далейшы ўплыў на хуткасць вэб-сайта. Таму падобныя скрыпты размяшчаюць у ніжняй частцы сайта. Гэта дазваляе загружаць іх пасля асноўных складнікаў старонкі.

Найважнейшыя стылі, неабходныя для стылізацыі змесціва верхняй часткі старонкі, убудоўваюцца і адразу ж прымяняюцца да дакумента. Поўны файл small.css загружаецца пасля пачатковай адмалёўкі старонкі. Яго стылі прымяняюцца да старонкі пасля завяршэння яе загрузкі, не блакуючы першапачатковы рэндэрынгу крытычнага змесціва.

Не ўбудоўвайце URI вялікіх дадзеных

Будзьце асцярожныя пры ўбудаванні URI дадзеных у стылявыя файлы. У той час як выбарачнае выкарыстанне невялікіх URI дадзеных у вашым CSS можа мець сэнс, убудаванне URI вялікіх дадзеных можа прывесці да таго, што памер вашага CSS уверсе згіну будзе больш, што запаволіць час рэндэрынгу старонкі.

Не ўбудоўвайце атрыбуты CSS

Па магчымасці варта пазбягаць убудаванні атрыбутаў CSS у элементы HTML (напрыклад, ), бо гэта часта прыводзіць да непатрэбнага дублявання кода. Акрамя таго, убудаваны CSS у элементах HTML па змаўчанні блакуецца палітыкай бяспекі змесціва (CSP).

Падзел CSS-файлаў

Таксама вы можаце падзяліць файлы CSS, гэта значыць розныя табліцы стыляў. Напрыклад, калі вы арыентуецеся на некалькі браўзэраў, такіх як IE, Chrome або Firefox. Напрыклад, замест таго, каб правяраць CSS-хакі ў адной табліцы стыляў, вы можаце выкарыстоўваць умоўныя аператары IE, для загрузкі іншай табліцы стыляў (напрыклад, для IE6). Такім чынам, вы не будзеце загружаць код IE пры выкарыстанні Chrome. Гэта значна паменшыць памер файла.

Паменшыце колькасць прабелаў у кодзе

Вы заўсёды павінны імкнуцца паменшыць колькасць прабелаў у вашым стылявым файле. Павелічэнне пустой прасторы займае вольныя байты. Гэта можа аказаць уплыў на розніцу паміж хутчэйшым і павольным сайтам у вельмі буйных праектах. Дзякуючы скарачэнню колькасці пустых прабелаў, памяншаецца вага файла. Такім чынам мы паскараем загрузку файла, дзякуючы меншай вазе.

Дакументуйце свой код

Вы павінны дакументаваць свой код усюды, дзе гэта магчыма. Выкарыстанне каментароў, такіх як / * Каментарый тут */, можа дапамагчы вам вызначыць бескарысны код. Хоць даданне каментароў займае шмат месца, яго лёгка занядбаць.У некаторых выпадках, бескарысныя каментары проста выдаляюцца. Гэты прыём дазваляе вельмі прадуктыўна пазбавіцца ад лішняй вагі CSS.

Арганізуйце свой код

Аптымізацыя CSS кода – гэта тэхніка, пра якую многія нават не падумаюць расказаць. Насамрэч, на многіх узроўнях арганізацыя вашага кода, можа дапамагчы вам значна паменшыць памер файла. У выніку павысіць хуткасць вашага сайта. Цікава як? Гэта проста.

Змесціце вашыя CSS-класы ў правільны набор галін. Такі метад гарантуе мінімальнае дубліраванне. Неарганізаваны код, з'яўляецца частай праблемай сучаснага вэб-дызайну. У некаторых сцэнарах арганізацыя вашага бруднага кода ў іерархічныя галіны - гэта ўсё, што вам трэба для загрузкі вашага сайта. Старайцеся пазбягаць CSS-хакі ў адной табліцы стыляў. Замест гэтага выкарыстоўвайце метады, указаныя ў пунктах 5 і 8.

Тэхніка KISS (Keep it Simple Stupid)

Апошняе слова пераканацца, што ўсё, што вы робіце, адпавядае тэхніцы KISS. KISS расшыфроўваецца як Keep it Simple Stupid. Калі вы ствараеце файл нанава! Тое вы сапраўды павінны быць на правільным шляху да арганізаванага, добра напісанаму, меней залішняму і чыстаму коду. Як бачыце аптымізаваць CSS не складае адмысловай працы. Тым больш у некаторых выпадках, можна абысціся парай пунктаў гэтага артыкула. Гэтыя методыкі дапамогуць паскорыць сайт у разы.

Дзякуй, што чытаеш Nicola Top

Наколькі публікацыя карысная?

Націсніце на смайлік, каб ацаніць!

Сярэдняя адзнака 4.9 / 5. Колькасць адзнак: 16

Ацэнак пакуль няма. Пастаўце адзнаку першым.

Вам таксама можа спадабацца...

Пакінуць адказ

Ваш адрас электроннай пошты не будзе апублікаваны. Неабходныя палі пазначаны як *

4 × 3 =