Сайт жылдамдығы үшін CSS-ті оңтайландыру - 9 әдіс

Бұл мақаланы тыңдаңыз

Баяу сайт әрқашан жаман! Менің ойымша, сөйлем сайтты жылдамдату үшін CSS кодын оңтайландыру, 301 қайта бағыттау немесе robots.txt сияқты іздеулерде жиі кездеседі. Немесе сіз веб-сайттарды оңтайлы өнімділікке мән бермей жіберетін әзірлеушісіз бе?

Егер сіз бірінші нұсқаға жатсаңыз, онда бұл мақала сізге арналған. Енді мен сізге CSS-ті оңтайландыруға көмектесетін 9 ең жақсы әдіс туралы айтып беремін. Бұл кеңестер сіздің сайтыңызды жылдамдатады және SERP-ке көтеріледі. Бұл әсер сіздің сайтыңызға жаңа келушілер ағынын айтарлықтай арттырады.

Мақаланың мазмұны:

• Веб-сайт жылдамдығының маңыздылығы
• Кескін спрайттарын пайдаланыңыз
• CSS оңтайландыруы
• Қажет емес кодты азайтыңыз
• Кестелерді басына және JS сценарийлерін төменгі деректемеге қойыңыз
• CSS файлдарын бөлу
• Кодыңыздағы бос орындар санын азайтыңыз
• Кодыңызды құжаттаңыз
• Кодыңызды реттеңіз
• KISS техникасы (Keep It Simple Stupid)

Органикалық рейтинг үшін сайт жылдамдығының маңыздылығы

Сіз жылдам веб-сайттардың маңыздылығына таң қаласыз. Бірнеше негізгі себептер бар, бірақ олардың әсері сайттың жағдайына айтарлықтай әсер етеді. Негізгі себептері:

1. Веб-сайтқа кірушілер беттің толық жүктелуін ұзақ күтуді ұнатпайды;
2. Егер ол жылдам жұмыс істесе, тұтынушыларыңыз міндетті түрде сайтқа оралады; Жылдамырақ сайттар әрқашан іздеу жүйелерінде жоғарырақ орын алады;
3. Сондай-ақ сайт жылдамдығы SEO стратегияңызға мән қосады;

Бұл ресурстар өте керемет және керемет әсер қалдырады. Енді сайтыңызды жылдамырақ ету үшін не істер едіңіз? Әрине, бұл жағдайды жақсарту сізден көптеген әрекеттерді қажет етуі мүмкін.

Мысалы, серверді, жедел жадты, жадты немесе жалпы жабдықты жаңарту.Бірақ сайттың баяу жұмыс істеуінің негізгі себебі бастапқы кодта екенін білесіз бе? Оңтайландырылған CSS болмауы - ең көп таралған себеп. Бұл мәнерлер кестесінің файл өлшемін тіпті бірнеше килобайтқа азайту бетті жүктеу уақытына айтарлықтай әсер ететінін білдіреді.

Кескін спрайттарын пайдаланыңыз

CSS Sprites – бірнеше кескінді бір кескін файлына біріктіру құралы. Өнімділікті жақсарту үшін оны веб-сайтта одан әрі пайдаланыңыз. Кескінді спрайттарды пайдалану ескі әдіс. CSS файлының өлшемін азайту және бетті жүктеу уақытын азайту туралы сөз болғанда, бұл әдіс міндетті болып табылады.

Кескін спрайттары кескіндерді бір үлкен .png файлына жинауға мүмкіндік береді. Бұл әдіс HTTP сұрауларын азайтады және бетті жүктеу уақытын жылдамдатады. Егер сіз сайтта көптеген белгішелер мен графиканы пайдалансаңыз, кескін спрайты тамаша таңдау болып табылады. Бұл опция бірнеше кескінді шығаруға байланысты қосымша шығындарды айтарлықтай азайтады.

CSS оңтайландыруы

CSS-ті қысқарту файлыңызды мүмкіндігінше аз бос орынмен жаңа файлға қысу ғана. Код неғұрлым аз болса, оны пайдаланушы браузері соғұрлым жылдам оқиды.

Әрине, оны қолмен жасаудың қажеті жоқ, өйткені Интернетте автоматты компрессорлар бар. Осындай қарапайым онлайн құралдардың арқасында ғана бірнеше минут ішінде қысуды жүзеге асыруға болады. Міне, осындай минификаторлардың бірі: http://www.cssminifier.com

Қажет емес кодты азайтыңыз

Бізге қайталанатын код қажет емес. Мұндай код элементтердің жүктелуін айтарлықтай баяулатады. Браузер қайталанатын кодты қайталап өтуі керек, оған секундтың қосымша бөлігін жұмсайды.Бетті жүктеу жылдамдығын арттырудың тағы бір амалы - қажетсіз кодты азайту. Мұндай жақсартуға артық немесе қайталанатын кодты тексеру арқылы қол жеткізуге болады.

CSS кестелерін басына және JS сценарийлерін төменгі деректемеге қойыңыз

Стиль кестесін жоғарғы жағына (бас тегтерінің арасына) және JavaScript кодын төменгі жағына қою жақсы тәжірибе. Кодыңыздың беттің қалған бөлігінен бұрын жүктелетініне көз жеткізіңіз. JavaScript-ті сайттың төменгі жағында орналастырудың негізгі себебі - оның үлкен өлшемі. Сондай-ақ оның веб-сайт жылдамдығына одан әрі әсері. Сондықтан мұндай сценарийлер сайттың төменгі жағында орналастырылады. Бұл оларға беттің негізгі компоненттерінен кейін жүктеуге мүмкіндік береді.

Беттің жоғарғы жағындағы мазмұнды стильдеу үшін қажетті негізгі мәнерлер сызылған және құжатқа бірден қолданылады. Толық small.css файлы беттің бастапқы көрсетілуінен кейін жүктеледі. Оның мәнерлері маңызды мазмұнның бастапқы көрсетілуін бұғаттамай, жүктеуді аяқтағаннан кейін бетке қолданылады.

Үлкен деректер URI мекенжайларын ендірмеңіз

Мәнер файлдарына деректер URI кодтарын ендіру кезінде абай болыңыз. CSS-де шағын деректер URI кодтарын таңдамалы түрде пайдалану мағынасы бар болса да, үлкен деректер URI мекенжайларын ендіру CSS-ді бүктеменің жоғарғы жағында үлкенірек етіп, бетті көрсету уақытын баяулатуы мүмкін.

CSS атрибуттарын ендірмеңіз

Мүмкіндігінше HTML элементтеріне CSS атрибуттарын (мысалы, ) енгізуден аулақ болу керек, себебі бұл жиі кодтың қажетсіз қайталануына әкеледі. Сондай-ақ, HTML элементтеріндегі кірістірілген CSS әдепкі бойынша Content Security Policy (CSP) арқылы бұғатталған.

CSS файлдарын бөлу

Сондай-ақ, CSS файлдарын, яғни әртүрлі стиль кестелерін бөлуге болады. Мысалы, егер сіз IE, Chrome немесе Firefox сияқты бірнеше шолғыштарды бағыттап жатсаңыз. Мысалы, бір мәнерлер парағында CSS бұзылуларын тексерудің орнына басқа стиль кестесін жүктеу үшін IE шартты мәлімдемелерін пайдалануға болады (мысалы, IE6 үшін).Осылайша Chrome пайдаланған кезде IE кодын жүктей алмайсыз. Бұл файл өлшемін айтарлықтай азайтады.

Кодыңыздағы бос орындар санын азайтыңыз

Сіз әрқашан стильдер кестесіндегі бос орындар санын азайтуға тырысуыңыз керек. Бос кеңістікті ұлғайту бос байтты алады. Бұл өте үлкен жобаларда жылдамырақ және баяу сайт арасында айырмашылықты жасай алады.Ақ бос орындардың санын азайту арқылы файл өлшемі кішірейеді. Осылайша, салмағы аз болғандықтан, файлды жүктеуді тездетеміз.

Кодыңызды құжаттаңыз

Мүмкіндігінше кодыңызды құжаттауыңыз керек. /* Осы жерде түсініктеме жазу */ сияқты пікірлерді пайдалану пайдасыз кодты анықтауға көмектеседі. Пікір қосу көп орын алса да, оларды елемеу оңай.Кейбір жағдайларда пайдасыз пікірлер жай ғана жойылады. Бұл әдіс сізге CSS-тің артық салмағынан өте өнімді түрде құтылуға мүмкіндік береді.

Кодыңызды реттеңіз

CSS кодын оңтайландыру Бұл туралы көпшіліктің ойына да келмейтін техника. Шын мәнінде, көптеген деңгейлерде кодты ұйымдастыру файл өлшемін айтарлықтай азайтуға көмектеседі. Нәтижесінде сайтыңыздың жылдамдығын арттырыңыз.Қызық қалай? Бұл өтте оңай.

CSS сыныптарын дұрыс тармақтар жинағына қойыңыз. Бұл әдіс ең аз қайталануға кепілдік береді. Ұйымдастырылмаған код - қазіргі веб-дизайндағы кең таралған мәселе. Кейбір сценарийлерде ретсіз кодты иерархиялық тармақтарға бөлу - сайтты жүктеу үшін қажет нәрсе.Бір стиль парағында CSS бұзушылығын болдырмауға тырысыңыз. Оның орнына 5 және 8-тармақтарда көрсетілген әдістерді қолданыңыз.

KISS техникасы (Keep It Simple Stupid)

Соңғы сөз - сіз жасаған барлық әрекеттер KISS техникасына сәйкес келетініне көз жеткізу. KISS сөзінің қысқартылған сөзі Keep it Simple Stupid дегенді білдіреді. Егер сіз қайтадан файл жасасаңыз! Сонда сіз міндетті түрде ұйымдасқан, жақсы жазылған, аз артық және таза кодқа дұрыс жолда болуыңыз керек. Көріп отырғаныңыздай, CSS-ті оңтайландыру қиын емес. Әсіресе кейбір жағдайларда сіз осы мақаланың бірнеше абзацын орындай аласыз. Бұл әдістер кейде сайтты жылдамдатуға көмектеседі.

Осы мақаланы оқу:

• JS және CSS сайт кодын онлайн режимінде оңтайландыру - егжей-тегжейлі нұсқаулық
• Веб-сайтты техникалық оңтайландыру - ең маңызды әрекеттер

Оқығаныңыз үшін рахмет: SEO HELPER | NICOLA.TOP