Искате ли да компресирате вашите CSS, HTML и javascript файлове в WordPress?
Когато компресирате CSS, HTML и Javascript файлове на уебсайта си, можете да спестите ценно време на скоростта на зареждане на страницата на уебсайта си. Сега не говорим за намаляване на скоростта на зареждане на вашата страница наполовина или нещо друго, но що се отнася до скоростта на вашия уеб сайт, малкото значение е от значение.
Скоростта на зареждане на вашия уебсайт е важна не само за новите посетители, но и за класирането в търсачките.
Терминът "смалявамВ език за програмиране се описва процесът на премахване на ненужни символи от изходния код. Тези знаци включват интервали, прекъсвания на редове, les коментари и блокирайте разделителите, които са полезни за нас хората, но безполезни за машините.
Минимизираме файловете на уебсайта, които съдържат CSS, HTML и JavaScript код, така че вашият уеб браузър да може да ги чете по-бързо.
Прочетете и нашата статия на 10 WordPress плъгини за подобряване на скоростта на вашия блог
Ето един пример за CSS minification.
CSS преди минификация
/ * Един примерен CSS файл ---------------------------------- * / .user-profile-card { марж: 0px; фон: #33E43} .user-profile-description {border: 0; позиция: абсолютна; ширина: автоматично; margin-top: 20px; }
CSS след минимизиране
.user-profile-card{margin:0;background:#33e43}.user-profile-description{border:0;position:absolute;width:auto;margin-top:20px}
Очевидно това е само малък пример, използващ CSS фрагмент, но можете да си представите колко място би спестило това при свиване на хиляди редове код.
Как да увеличите времето, прекарано във вашия блог на WordPress? Разберете, като се консултирате с тази статия.
Така че, ако искате да го направите ръчно, технически можете. Но вие ще изложите на висок риск от грешки и ще изгубите безценно своето ценно време!
Следвайте тези съвети и използвайте инструментите, които са на ваше разположение.
Някои инструменти за изпълнение на компресията
За щастие, не е задължително да сте разработчик или да знаете един от езиците за програмиране, за да намалите размера на файловете на уебсайта си. Минификацията се превърна в обичайна практика в света на уеб дизайна. Така че не бива да се изненадвате, когато научите, че има много прекрасни (и безплатни) инструменти, които да ви свършат работа.
Вижте и нашите 6 приставки за WordPress, за да вдъхнат нов живот на вашите статии
Ето списък на полезните инструменти за започване. Тъй като много от тях могат да минимизират множество типове код, включих опциите за типа код в скоби.
-
- cssminifier.com et javascript-minifier.com (CSS и JS) - Тези два минифайтъра на Андрю Чилтън са лесни за използване. Просто трябва да поставите кода си, след което щракнете върху бутона Намалявам за показване на компресиран код. Можете дори да изтеглите изходния код като файл за удобство.
- htmlcompressor.com (HTML, CSS и JS) - Този инструмент за онлайн компресиране / минимизиране поддържа типове HTML, CSS и JS кодове. Той дори поддържа различни комбинации от типове кодове като CSS + PHP и JavaScript + PHP. И дори можете да проверите компресирания код за грешки.
-
- csscompressor.net (Само CSS) - Този онлайн CSS компресор е бърз, лесен и безплатен за използване.
-
- jscompress.com (Само за JS) - Този инструмент за компресиране на JavaScript ви позволява да компресирате JavaScript кода чрез копиране и поставяне, но можете също да изтегляте няколко JavaScript файла наведнъж. Това е идеално за комбиниране на JavaScript файлове в един файл за по-добра скорост на зареждане на страницата.
- Инструменти на Дан - Инструменти на Дан предложи на ООН намаляване на CSS и за да намалите JavaScript . И двата инструмента имат наистина изчистен, лесен за използване потребителски интерфейс. Те не предлагат никакви усъвършенствани опции, но са чудесни за общи цели за минимизиране.
-
- refresh-sf.com (HTML, CSS и JS) - Този компресор ще намали типовете JavaScript, CSS и HTML кодове. Той също така включва всички опции за компресия за всеки тип код, ако имате нужда от тях.
- Компилатор за затваряне (Само за JS) - Компилаторът за затваряне е част от Закриване Инструменти , набор от инструменти от Google Developers. Той ви позволява да минимизирате вашия JavaScript код, заедно с други полезни оптимизации. Можете да минимизирате вашия JavaScript код, като въведете URL адреса на местоположението на js файла, след което изберете как искате кодът да бъде оптимизиран и форматиран.
Например избирате да оптимизирате кода си, за да премахнете само празните места, ако искате. След като щракнете върху бутона за компилиране, той ще намали кода (или го компилира) за вас.
-
- minifycode.com (HTML, CSS и JS) - Този уебсайт предлага минифайлери за JavaScript , CSS et HTML с прост и чист потребителски интерфейс, който компресира кода ви с едно щракване. Той също така предлага инструмент за разкрасяване, за да декомпресира измамения код, за да го направи по-четим (обратното на минификацията).
Ако търсите офлайн инструменти за минимизиране на CSS или JavaScript HTML локално, ето някои опции:
- phpied.com/cssmin-js/ (Само за CSS)
- yui.github.io/yuicompressor (JS и CSS)
Как да намалите размера на вашия HTML, CSS и JavaScript с помощта на онлайн инструмент
Много от тези онлайн инструменти имат подобен процес, който включва следните стъпки:
- Поставете изходния си код или изтеглете файла с изходния код.
- Оптимизиране на настройките за конкретен изход (ако има опции)
- Щракнете върху бутон, за да компресирате кода.
- Копирайте резултата от минифицирания код или изтеглете файла с изряден код.
За този пример ще използвам инструментите minify от minifycode.com.
Вижте също: Как да добавите CSS код безопасно на WordPress като се консултирате с тази връзка.
Първо намерете CSS файла (често наричан style.css) във файловете на вашия уебсайт и го отворете с редактор на страници. След това копирайте целия CSS код в клипборда.
отидете minifycode.com и кликнете върху раздела CSS minifier. След това поставете CSS кода в полето за въвеждане и кликнете върху бутона Минимизирайте CSS.
След като генерира новия минифициран код, копирайте го.
След това се върнете към CSS файла на уебсайта си и заменете кода с новата опростена версия.
Това е!
Повторете същия процес, за да намалите JavaScript и HTML файл (ите) на вашия уебсайт.
Как да минимизираме HTML, CSS и JavaScript в WordPress с помощта на приставки
Най-лесният начин да сведете HTML, CSS и JavaScript до минимум в WordPress е да използвате приставка. Това ви позволява автоматично да оптимизирате вашите файлове на уебсайта на WordPress, за да намалите времето за зареждане на страницата само с няколко щраквания върху бутона.
Има много приставки, които ще свършат работата, но накратко ще спомена няколко примера.
Оптимизиране (БЕЗПЛАТНО)
Autoptimize е може би най-популярният плъгин за минимизиране на кода в WordPress. Той е популярен, защото е лесен за използване и е пълен с мощни функции. Може да комбинира скриптове, минифицира и кешира кода ви. Като бонус получавате допълнителни опции за оптимизиране на шрифтове на Google, изображения и други.
За да използвате Autoptimize, можете да изтеглите, инсталирате и активирате приставката от таблото за управление на WordPress под Приставка> Добавяне на нова.
За повече информация вижте нашето ръководство на: Как да инсталирате плъгин в WordPress
След като плъгинът е активиран, отидете на Настройки> Автоматична оптимизация. След това, в раздела Основни параметри, проверете кода, който искате да оптимизирате (HTML, CSS и / или JavaScript) и щракнете върху Eзапамете промените.
Можете също да кликнете върху бутона Показване на разширени настройки в горната част на страницата, за да персонализирате допълнително вашата оптимизация на кода.
Това е горе-долу това! Съвсем просто и мощно.
Общо кеш W3 (безплатно)
W3 Общо Cache е отличен кешинг плъгин, който предлага възможност за минимизиране на вашите HTML, JS и CSS файлове.
WP най-бързият кеш (БЕЗПЛАТЕН)
WP Най-бърз кеш - Този плъгин WordPress кеширането е изключително популярно с високи отзиви. Той извършва различни оптимизации на производителността, включително комбиниране и намаляване на HTML CSS и JavaScript за по-добра производителност.
Прочетете и нашата статия на 8 WordPress плъгини за добавяне на чат на живо на вашия блог
След като плъгинът е инсталиран, просто щракнете върху раздела WP Най-бърз кеш в страничната лента на таблото за управление на WordPress. Под раздела Настройки, ще намерите опции за комбиниране и намаляване на HTML и CSS файлове. Въпреки че минимизирането на JavaScript е достъпно само в професионалната версия.
За да обобщим
Ако искате да направите своя блог по-бърз и да имате по-добра производителност, трябва да намалите размера на вашите HTML, CSS и JavaScript файлове. С всички налични онлайн инструменти можете лесно да намалите кода на всеки уебсайт.
9 WordPress плъгини за скриване на съдържанието на вашия блог да откривам абсолютно
За тези, които използват WordPress, имате на ваше разположение мощни плъгини, които автоматично да минимизират тези файлове с няколко щраквания.
Открийте и някои премиум приставки за WordPress
Можете да използвате други WordPress плъгини, за да придадете модерен вид и да оптимизирате сцеплението на вашия блог или уебсайт.
Предлагаме ви тук няколко премиум WordPress приставки, които ще ви помогнат да направите това.
1. Страница за грешка 404 Пренасочване към начална страница или персонализирана страница
Ето един от най-добрите начини за лесно добавяне на страница с грешка 404, която ще пренасочи посетителя към началната страница или към персонализираната страница след активирането на този плъгин. Премия за WordPress.
Всички 404 страници за грешки ще бъдат пренасочени към началната страница или към персонализиран URL адрес, Използвайки тази приставка за WordPress, вие ще позволите на Google да намали страницата на вашия уебсайт, ако има много страници за грешки в 404.
Открийте и вие Как да коригираме грешката на 413 на WordPress
Тази приставка за WordPress не просто пренасочва, но може да бъде и подходящо решение за подобряване на класирането на вашия уебсайт в резултатите от търсачките.
Изтегляне | демонстрация | уеб хостинг
2. Кеш на Borlabs
WordPress е платформа, задвижвана от база данни, която генерира съдържание динамично. Колкото повече съдържание и плъгини имате, толкова повече заявки към базата данни се изпълняват. Това може да забави работата на вашия уеб сайт, особено когато вашата база данни се намира на различен сървър.
Приставката за WordPress Borlabs Cache запазва динамично генерираното съдържание като статичен файл в паметта на вашия сървър. Когато страницата е заявена, този статичен файл се зарежда и изпраща на посетителя, което е значително по-бързо от обичайните заявки към база данни. Но това не е всичко.
Вижте и нашите 5 WordPress плъгина за почистване на базата данни на вашия уебсайт
Вашите страници съдържат много ненужно бяло пространство или HTML коментари, което увеличава общия размер на страницата. Borlabs Cache ги премахва всички и използва GZIP за компресиране на вашите страници.
Discover Как да показвате всичките си публикации в WordPress на една страница
Много плъгини имат свои собствени JavaScript и CSS файлове, което води до повече заявки на вашия сървър. Borlabs Cache комбинира всички тези JavaScript и CSS файлове, така че в най-добрите случаи посетителят ви трябва да зареди само един JavaScript файл и един CSS файл.
Изтегляне | демонстрация | уеб хостинг
3. Многоезичен преса
Multilingual Press работи с многосайтова инсталация на WordPress и ви позволява да свързвате преводи. Плъгинът идва със 174 езика, вградени в езиковия мениджър, и поддържа неограничен брой уебсайтове, така че можете да създавате и свързвате толкова преводи, колкото искате.
Това е добре за SEO, защото ще ви позволи да държите езиците си в отделни публикации и страници и ако някога решите да използвате превод, различен от приставката, вашето съдържание остава непокътнато (дори след деактивиране или премахване на плъгина Multilingual Press). Освен това можете да добавите приспособление за превод, за да превключвате лесно между преводите.
Discover Как да добавите кодов фрагмент с помощта на Gutenberg в WordPress
Multilingual Press е страхотна безплатна опция за добавяне на преводи към вашия WordPress сайт чрез многосайтово, Освен това, ако някога установите, че се нуждаете от повече опции, можете да изберете професионалната версия, която струва 75 долара.
Изтегляне | демонстрация | уеб хостинг
Други препоръчани ресурси
Също така ви каним да се консултирате с ресурсите по-долу, за да отидете по-далеч в управлението на вашия уебсайт и блог.
- Как да добавите надпис към изображение в Гутенберг
- 6 WordPress плъгини за подправка на вашия странични ленти
- 10 WordPress приставки за добавяне на мениджър за изтегляне
- Какво да разбирам DDoS атаки срещу WordPress
Заключение
Възможно използване на JS компресо https://www.jsonformatting.com/js-minify/