реклама

Ако имате уебсайт, вече трябва да знаете как да го направите използвайте правилните формати на изображения и оптимизирайте вашите изображения за мрежата 10 безплатни онлайн инструмента за партидни изображения, за да промените размера, да конвертирате и оптимизиратеИмате нужда от инструменти за редактиране на партиди, когато имате много снимки за обработка и много малко време. Представяме ви най-добрите пакетни резизъри, оптимизатори или конвертори, достъпни онлайн. Прочетете още . Но докато компресирането на изображения е добре позната практика, HTML компресията има тенденция да се пренебрегва, което е жалко, защото ползите си заслужават.

В тази статия ще разгледаме двата основни метода за свиване на HTML файловете, защо HTML файловете трябва да се свиват и как да се постигне това.

Компресия vs. Минимизиране

Що се отнася до оптимизирането на HTML файлове, има два основни метода за него: компресия и Минификация. Те звучат подобно на повърхността, но всъщност са две различни техники, така че не ги обърквайте.

Минимизиране

Можете да мислите за минификация като премахване на ненужни символи и редове в изходния код. Помислете за отстъпи, коментари, празни редове и т.н. Нищо от тях не се изисква в HTML - те съществуват, за да улеснят четенето на файла. Изрязването на тези детайли може да намали размера на файла, без да се засегне нищо.

Примерна HTML страница:

Това е хедър
Изпратете ми поща на [email protected].
Това е нов параграф!
Това е нов параграф с удебелен шрифт и курсив.

Примерна HTML страница, минимизирана:

Това е хедър
Изпратете ми поща на [email protected].
Това е нов параграф!
Това е нов параграф с удебелен шрифт и курсив.

Оригинален размер: 354. Минимизиран размер: 272. Спестяване: 82 (23.16%).

Много уеб разработчици и собственици на сайтове си запазват минификацията само за JS и CSS файлове, но тази остаряла практика е грешка. Важно е също така и опростяването на HTML.

Още през 2000-те години инструментите за минификация бяха рядкост. Трябваше ръчно да минимирате файловете всеки път, когато нещо се промени. Тъй като HTML файловете се променят по-често от JS и CSS файловете, просто беше твърде досадно да се минимизират всеки път тогава. В днешно време това е спорен въпрос.

компресия

Когато потребителите посещават вашия уебсайт, те правят това чрез HTTP протокол. Браузърът изпраща заявка до вашия уеб сървър за конкретна страница, вашият уеб сървър намира страницата, след което изпраща съдържанието на тази страница обратно в браузъра на посетителя.

Но тъй като HTTP протоколът поддържа компресия, вашият уеб сървър може да компресира страницата, преди да я изпрати на посетителя (ако приемем компресирането е активирано в настройките на вашия сървър) и тогава браузърът на посетителя може да декомпресира страницата до първоначалното й състояние.

Най-разпространената схема за компресиране е GZIP, което е файлов формат, който използва алгоритъм за компресия без загуби Как работи компресирането на файлове?Как работи компресирането на файлове? Научете основите на компресирането на файловете и разликата между компресията загуба спрямо компресия без загуби. Прочетете още наречен ДЕФЛАТ.

Алгоритъмът търси повторения на текст в HTML файла, след което замества тези повторени събития с препратки към предишно събитие. Всяка справка е просто две числа: колко далеч е референцията и колко знаци препращаме.

Помислете за низ от текст като този (пример, взет от уебсайта на GZIP):

Бла-бла-бла-бла-бла.

Алгоритъмът разпознава следното повторение:

B {lah b} {lah b} {lah b} {lah b} lah.

Първото събитие е нашата справка, така че оставете го:

Blah b {lah b} {lah b} {lah b} lah.

Второто събитие се отнася до първото събитие, което е с пет знака зад и пет знака:

Blah b [5,5] {lah b} {lah b} lah.

Но в този случай алгоритъмът разпознава, че следващото събитие е същата последователност от знаци, така че разширява референтната дължина с още пет:

Blah b [5,10] {lah b} lah.

И отново:

Благо б [5,15] лах.

И алгоритъмът е достатъчно умен, за да осъзнае, че следващите три знака са първите три знака в референцията, така че се разширява с три:

Благо б [5,18].

Сега помислете за типичен HTML файл и колко повторения има вътре. Почти всеки маркер, като например, има съответния затварящ маркер, като. Освен това, много тагове се повтарят навсякъде, като например, , , и т.н. Атрибутите също се повтарят често, включително клас, HREF, и SRC. Лесно е да разберете защо GZIP компресията е толкова ефективна с HTML.

Единственият недостатък е, че уеб сървърът се нуждае от малко повече процесор, за да изпълни компресията всеки път, когато се поиска страница. Но тъй като процесорът в днешно време не представлява голяма грижа, почти винаги е по-добре да активирате GZIP, отколкото да продължите без, дори ако имате уеб хостинг на входно ниво Най-добрите уеб хостинг услуги: споделени, VPS и посветениТърсите най-добрата уеб хостинг услуга за вашите нужди? Ето нашите най-добри препоръки за вашия блог или уебсайт. Прочетете още .

Защо трябва да компресирате и съкращавате

Има две основни предимства, като и двете са от решаващо значение в днешния мобилен и тежък уеб пейзаж.

По-бързи товари

Средно HTML минификаторът може да намали размера на файл с около 3 процента с основни настройки. С незадължителни разширени настройки HTML файл може да бъде намален с още 3 до 7 процента, за потенциално намаление до 10 процента. Това директно се превръща в по-бързи времена за зареждане на страницата.

Използва се по-малко честотна лента

Нека да кажем, че имате 10 файла, всеки минимизиран от 50 KB до 45 KB за общо свиване от 50 KB. Да приемем, че вашият уебсайт обслужва средно 1000 посетители всеки ден, където всяко посещение е средно десет страници. Самото HTML минимизиране намалява използването на честотната лента с 50 MB на ден (1,5 GB на месец).

Компресия + Минимизиране

Както можете да видите, HTML минификацията е полезна сама по себе си, особено след като сайтът ви се разраства, файловете се увеличават и трафикът се увеличава. Забележи, че Указания за страници на Google на страница препоръчайте да коригирате HTML, така че ако сте скептични, нека това ви убеди в друго.

Но това, което е чудесно в оптимизацията на HTML е, че не е нужно да избирате нито минимизация, нито компресия. Можете да направите и двете! Всъщност вие Трябва направете и двете.

Средно можете да очаквате компресирането на GZIP да свие HTML файл със 70 до 90 процента. Използвайки горния пример с консервативна оценка на компресията, изтънените HTML файлове биха стигнали от 45 KB до 13,5 KB всеки за общо свиване от 365 KB. В сравнение с немиминирания / некомпресиран, честотната лента на вашия сайт вече е намалена с 365 MB на ден (11 GB на месец).

И освен спестяването на честотна лента, всяка страница се зарежда драстично по-бързо, тъй като браузърът на крайния потребител трябва да изтегли само 13,5 KB срещу 50 KB на страница.

Как да компресирате и минимизирате HTML

За щастие, нито един ден не е много труден и нямате нужда от много технически ноу-хау, за да ги настроите.

WordPress приставки

Ако стартирате сайт на WordPress, всичко, което трябва да направите, е да инсталирате един плъгин и можете да извлечете ползите както от компресията, така и от минификацията.

Повечето приставки за кеширане правят повече от просто кеширане на страници. Например, WP най-бързият кеш и W3 Общ кеш и двете имат настройки с едно щракване, които ви позволяват да включите минимизиране на HTML и GZIP компресия, наред с други функции, които допълнително ускоряват зареждането на страниците и намаляват използването на честотна лента.

Ако ти само искате минификация, препоръчваме ви Минимизиране на HTML плъгин. Той е прост, поддържа HTML / CSS / JS и ви позволява малко да настроите метода на минимизиране (например дали да премахнете HTTP: и HTTPS: от URL адреси).

Статични HTML Minifiers

Ако вашите HTML файлове са статични (т.е. не се генерират динамично от CMS или уеб рамка), тогава можете да поддържате два набора от HTML файлове: набор "източник", който не е минимизиран за лесно редактиране, и "минимизиран" набор, който създавате всеки път, когато направите промяна в изходния файл.

За да окомплектовате, използвайте един от тези инструменти:

• HTMLCompressor
• HTML Minifier
• HTML Minifier (различна от горната)

Това е жизнеспособна техника, ако сте се отдалечили от CMS, като WordPress и сега използвате генератори за статични сайтове 7 причини да изтриете вашата CMS и помислете за статичен генератор на сайтовеДълги години публикуването на уебсайт беше трудно за много потребители. CMS като WordPress промениха това, но все още могат да бъдат объркващи. Друга алтернатива е статичен генератор на сайтове. Прочетете още .

Активиране на GZIP компресия

Стъпките за активиране на компресирането на GZIP може да се различават в зависимост от това кой софтуер за уеб сървър използвате. Тъй като Apache е най-популярната опция, ще разгледаме как да я активирате с .htaccess.

Свържете се с вашия уеб сървър чрез FTP, след което създайте наречен файл .htaccess в основната директория. Редактирайте .htaccess файла, за да имате следните настройки:

 mod_gzip_on Да mod_gzip_dechunk Да файл mod_gzip_item_include. (html? | txt | css | js | php | pl) $ mod_gzip_item_include handler ^ cgi-script $ mod_gzip_item_include mime ^ text /.* mod_gzip_item_include mime ^ application / x-javascript. * mod_gzip_item_exclude mime ^ image /.* mod_gzip_item_exclude rspheader ^ Content-Encoding:.. * * Софтуерна.  SetOutputFilter DEFLATE. 

Не сте сигурни дали компресията работи на вашия уебсайт? Изпробвайте го с този инструмент.

За максимална ефективност също трябва научете как да проверявате, почиствате и оптимизирате вашия CSS 11 Полезни инструменти за проверка, почистване и оптимизиране на CSS файловеИскате ли да подобрите вашия CSS код? Тези CSS пулове и оптимизатори ще ви помогнат да подобрите CSS кода, синтаксиса и да изтриете вашите уеб страници. Прочетете още .