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

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

Веб-сайттың JS және CSS кодын оңтайландыру, техникалық веб-сайтты оңтайландырудың маңызды аспектілерінің бірі болып табылады. Мұның себебі дерекқор шақыруларының азаюына және код құрылымының оқу мүмкіндігінің жақсаруына байланысты көбірек сайт ресурстарының шығарылуы болып табылады.

Әдетте, JavaScript және CSS кодын оңтайландыру сайттың жауап беру жылдамдығын айтарлықтай арттырады. Осылайша, сайт жылдамырақ жұмыс істейді және сервер бөлігін ауыртпалықсыз жүктейді.

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

• JS және CSS коды - бұл не?
• JS және CSS кодын оңтайландыру - неге сценарийлер мен стильдерді оңтайландыру керек?
• Apache, Nginx және Node.js үшін Gzip модулі
• Javascript-ті кішірейту арқылы оңтайландыру
• Веб-қаріпті пайдалану үшін CSS оңтайландыруы
• Сәйкес қаріпті жүктеу опциясын пайдалану
• Интернетте кодты оңтайландыру
• CMS Wordpress плагиндерімен JS және CSS-ті кішірейтіңіз

JS және CSS сайт коды - бұл не?

JavaScript және CSS әрқайсысы сайтқа белгілі бір функционалдылықты қамтамасыз ететін ортақ бағдарламалау тілдері болып табылады. HTML, JS, CSS негізгі веб-бағдарламалау тілдерін қолданудың арқасында сайтпен пайдаланушының тамаша әрекеттестігіне қол жеткізілді.

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

css - сайттың негізгі бағдарламалау тілдерінің біріне жатады. CSS (стиль файлы) - сайттың кез келген дерлік элементінің сыртқы түрі туралы ақпаратты тасымалдайды. Түсі мен орналасуынан белгілі бір бет элементінің атышулы анимациясына дейін.

JS және CSS кодын оңтайландыру - бұл не үшін қажет?

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

• Пайдаланылмаған және қосымша таңбалар;
• бос орындар;
• Аяқталмаған және жұмыс істемейтін код жолдары.

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

Apache, Nginx және Node.js үшін Gzip модулі

Gzip - Интернет қазіргідей жылдам болмаған кезде жасалған таңғажайып технология. Мұрағаттаушылар танымал технология болды (олар кейіннен танымалдығы төмендеді, өйткені USB флэш-дискілері 1 ТБ жадты қамтамасыз ете алады).

Идеясы интернеттегі веб-трафик үшін мұрағатшыларды пайдалану болды (веб-сайт файлдарын жасауға ұқсас), сондықтан gzip веб-серверлердегі файлдарды статикалық (мәтіндік) файлдарды бастапқы өлшемінен 99% дейін қысу арқылы сығуға арналған. JavaScript мәтіндік файл болғандықтан, gzip JavaScript файлдарын қысу үшін, сондай-ақ бетті жүктеу уақытын қысқарту үшін пайдаланылуы мүмкін.

Javascript-ті кішірейту арқылы оңтайландыру

Оңтайландыру - JavaScript минификациясының ерекше түрі. Мұндай минимизаторлар қажет емес бос орындарды, үтірлерді, түсініктемелерді және т.б. алып тастап қана қоймайды, сонымен қатар «өлі кодты» болдырмауға көмектеседі:

• Google жабу компиляторы
• UglifyJS
• Microsoft AJAX минификаторы

Веб-қаріпті пайдалану үшін CSS оңтайландыруы

Google қаріптері және ұқсас қаріп жасаушылар веб-қаріптерді өзгертті, бірақ қаріп кодының бірнеше жолы жүздеген килобайт өткізу қабілеттілігін тұтынуы мүмкін.

1. Қажетті қаріптерді ғана жүктеп алыңыз: пайдаланылмаған қаріптерді жойыңыз және жаңа қаріптер қажет екенін тексеріңіз.
2. Қажетті салмақтар мен мәнерлерді ғана жүктеп алыңыз: Қаріп өндірушілерінің көпшілігі жүктеп алуды белгілі бір таңбалар жиынына (мысалы, тек латынша), салмақтарға (қалыңдық) және курсивке (қиғаш) шектеуі мүмкін. Нәтижелер нашар болуы мүмкін болса да, браузерлер жоқ мәнерлерді автоматты түрде көрсетуі мүмкін.
3. Қажетті таңбалар санын шектеңіз: Сирек қолданылатын қаріптер белгілі бір таңбалармен шектелуі мүмкін. Мысалы, Open Sans ішіндегі "CSS оқулығы" тақырыбын Google қаріптері сұрау жолына & text= параметрін қосу арқылы анықтауға болады: fonts.googleapis.com/css? family=Open+Sans&text=CStuorial
4. Айнымалы қаріптерді қарастырыңыз: Айнымалы қаріптер векторлық интерполяцияны пайдалана отырып, әртүрлі стильдерді, салмақтарды және курсивтерді анықтайды. Қаріп файлы сәл үлкенірек, бірақ сізге бірнеше емес, біреу ғана қажет. Рекурсивті шрифт айнымалы қаріптердің икемділігін көрсетеді.
5. Жергілікті серверден қаріптерді жүктеп алыңыз. Өзін-өзі хостинг қаріптері тиімдірек. Азырақ DNS іздеулері қажет және сіз барлық заманауи браузерлер қолдайтын WOFF2 жүктеуін шектей аласыз. Ескі браузерлер (IE) ОЖ қаріпіне оралуы мүмкін.
6. Операциялық жүйенің қаріптерін қарастырыңыз: бұл 500K веб-қаріп керемет көрінуі мүмкін, бірақ Helvetica, Arial, Georgia немесе Verdana қоғамдық доменіне ауыссаңыз, біреу байқайды ма? OS-қауіпсіз немесе веб-қауіпсіз қаріптер өнімділікті арттырудың оңай жолы болып табылады.

Сәйкес қаріпті жүктеу опциясын пайдалану

Веб-қаріптерді жүктеуге және өңдеуге бірнеше секунд кетуі мүмкін. Сізге қажет:

1. Стильсіз мәтінді көрсету (FOUT): Бірінші қол жетімді резервтік қаріп пайдаланылады, бірақ ол веб-қаріп дайын болғанда ауыстырылады.
2. Көрінбейтін мәтінді көрсету (FOIT): веб-қаріп дайын болғанша мәтін көрсетілмейді. Бұл заманауи браузерлердегі әдепкі процесс, ол әдетте резервтік қаріпке оралмас бұрын үш секунд күтеді.
   Екеуі де мінсіз емес.

Font-display CSS сипаты және Google Font & display= параметрі балама таңдай алады:

• auto: Әдепкі шолғыш әрекеті (әдетте FOIT).
• блок: тиімді FOIT. Мәтін үш секундқа дейін көрінбейді. Қаріпті ауыстыру жоқ, бірақ мәтін біраз уақыттан кейін пайда болуы мүмкін.
• айырбас: тиімді FOUT. Бірінші резерв веб-қаріп қолжетімді болғанша пайдаланылады. Мәтін бірден оқылады, бірақ қаріпті ауыстыру әсері тітіркендіргіш болуы мүмкін. Қаріп мәнері сәйкестігін ұқсас өлшемді қалпына келтіруді анықтау үшін пайдалануға болады.
• қалпына келтіру: FOIT және FOUT арасындағы ымыра. Мәтін қысқа уақыт ішінде (әдетте 100 мс) көрінбейді, содан кейін веб-қаріп қол жетімді болғанша бірінші резерв пайдаланылады.
• қосымша: Қаріп ауыстыруды қоспағанда, резервтік нұсқаға ұқсас. Веб-қаріп бастапқы кезеңде қолжетімді болған жағдайда ғана пайдаланылады. Бірінші бет көрінісі кері қаріпті көрсетеді, ал кейінгі бет көріністері жүктеп алынған және кэштелген веб қаріпті пайдаланады.

Ауыстыру, сақтық көшірме жасау немесе қосымша пайдалану өнімділікті айтарлықтай арттыруды қамтамасыз етеді.

JS және CSS кодын онлайн оңтайландыру

Интернетте онлайн қызметтердің айтарлықтай көп саны бар. Бір-екі минут ішінде JavaScript және стиль файлдарын қысу бойынша барлық күнделікті жұмыстарды орындай алады. Олардың барлығында кодпен жұмыс істеудің өзіндік алгоритмдері бар. Осындай әртүрліліктің фонында ең маңызды екі қызметті бөліп көрсетуге болады. Олардың тиімді қысу шегі ұқсас бәсекелес онлайн құралдарға қарағанда әлдеқайда жоғары. Осы екі веб-құралға толығырақ тоқталайық:

cssresizer.com
Жақын бәсекелестермен салыстырғанда 84% қысу тиімділігі. Кодтың жарамдылығы айтарлықтай қысу кезінде де сақталады. Осылайша сіз тамаша оңтайландырылған кодты ала аласыз. Бұл құралмен жұмыс істеу интуитивті және бірнеше қысу әдістері бар:

• Максималды;
• жылдам;
• Декомпрессия;

Сіз сығуға болады:

• URL мекенжайы;
• Файлды жүктеп салу;
• Кодты тікелей енгізу;

Refresh-sf.com

JavaScript, CSS және HTML кішірейтуге арналған тағы бір, бірақ бірдей қуатты веб-интерфейс. Құрал жұмыс істеу үшін UglifyJS 2, Clean-CSS және HTML Минификаторын пайдаланады. Бұл жағдайда қысу тиімділігі кодтың жарамдылығын көрінетін бұзушылықтарсыз 85%-ге жетеді. Қысуды құрал терезесіне кодты тікелей енгізу арқылы жасауға болады.

CMS Wordpress плагиндерімен JS және CSS-ті кішірейтіңіз

Барлығымыз білетіндей, оның бүкіл әлемде айтарлықтай таралуы бар. 2018 жылдың деректері бойынша бұл смс жетекші орын алады. Арнайы WordPress үшін бірнеше танымал оңтайландыру плагиндерін қарастырыңыз:

Плагинді автоматты түрде оңтайландыру

HTML, JS және CSS оңтайландыру плагині. Бұл CMS Wordpress сайттарын жылдамдатуға арналған ең танымал плагиндердің бірі. Оның қарапайым және функционалды конфигурация интерфейсі бар. Қысу процесі жылдам жүреді.

• Оңтайландыру (HTML, JS, CSS) және CDN орнату.
• Статикалық ресурстардан эмодзилерді, Google қаріптерін, сұрау жолдарын жою.
• Суреттерді оңтайландыру мүмкіндігі.

Webcraftic Clearfy плагині

Алдыңғы плагин сияқты ескі емес. Бірақ ол сұранысқа ие және ұқсас бәсекелестер арасында танымал. Webcraftic Clearfy - өте күрделі конфигурация интерфейсі бар. Ең жақсы нәтиже үшін плагиндердің біріктірілген комбинациясынан тұрады.

Параметрлер беттері мәзір бөлімдеріне бөлінген. Осылайша, сайттың нақты бөліктерін оңтайландыруға болады, мысалы, HTML. Бұл плагин не істей алады?

• Оңтайландыру (суреттер, JS, CSS, HTML және сценарийлер);
• Кириллица транслитерациясы және көшірмелерді жою. Alt атрибуттармен жұмыс істеу және дұрыс robots.txt жасау. Сервер тақырыптарымен және олардың жауаптарымен жұмыс.
• Талап етілмеген WordPress виджеттерін жою.
• WordPress нұсқасын жасыру және статикалық сұраулардан сұрау айнымалы мәндерін жою. Автордың логинін және әкімшіге кіру бетін жасыру.
• Түсініктемелерді жаһандық жою немесе тазалау. Түсініктемелерде бақылауды сақтаңыз.
• WordPress импульсін және жоғарғы басқару тақтасын орнату.
• Плагин компоненттерін бақылау.

Қорытындылай келе, белгілі бір қорытынды жасауға болады. Жоғарыда айтылғандарға сүйене отырып, js және css-ті қысу соншалықты қиын нәрсе емес. Осы әрекеттердің арқасында жобаңыздың жауап беру жылдамдығы айтарлықтай артады.

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

• Веб-бет өнімділігін оңтайландыру
• Сайт жылдамдығы үшін CSS-ті оңтайландыру - 9 әдіс

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