Как работи компресираният HTML и защо може да се нуждаете от него

Как работи компресираният HTML и защо може да се нуждаете от него

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





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



Компресия срещу минификация

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





Минификация

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

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





Your Title Here



Send me mail at support@yourcompany.com .

This is a new paragraph!

This is a new paragraph in bold and italics.

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

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



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

Компресия

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



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

Най -често срещаната схема на компресиране е GZIP , който е файлов формат, който използва алгоритъм за компресиране без загуби наречена DEFLATE.

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

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

Blah blah blah blah blah.

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

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.

И отново:

Blah b[5,15]lah.

И алгоритъмът е достатъчно умен, за да осъзнае, че следващите три знака са първите три знака в препратката, така че той се удължава с три:

Blah b[5,18].

Сега помислете за типичен HTML файл и колко повторения съществуват вътре. Почти всеки етикет, като напр

, има съответния затварящ маркер, като

. Освен това много маркери се повтарят навсякъде, като например

,

,

,

  • и т.н. Атрибутите също се повтарят често, включително

    class

    ,

    href

    , и

    src

    . Лесно е да се разбере защо GZIP компресията е толкова ефективна с HTML.

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

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

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

    По -бързо зареждане на страници

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

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

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

    Компресия + минификация

    Както можете да видите, минимизирането на HTML е полезно само по себе си, особено когато вашият сайт расте, файловете се увеличават и трафикът се увеличава. Отбележи, че Указания на Google за PageSpeed препоръчайте минимизиране на 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 минификатори

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

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

    Това е жизнеспособна техника, ако сте се отдалечили от CMS като WordPress и сега използвате статични генератори на сайтове.

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

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

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

    .htaccess

    в основната директория. Редактирайте .htaccess файла, за да имате следните настройки:


    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file .(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:.*gzip.*


    SetOutputFilter DEFLATE

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

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

    Дял Дял Туит електронна поща Трябва ли незабавно да надстроите до Windows 11?

    Windows 11 идва скоро, но трябва ли да актуализирате възможно най -скоро или да изчакате няколко седмици? Нека разберем.

    Прочетете Напред     Свързани теми
    • Програмиране
    • HTML
    • Уеб разработка
    За автора Джоел Ли(1524 публикувани статии)

    Джоел Лий е главен редактор на MakeUseOf от 2018 г. Той има бакалавърска степен по компютърни науки и над девет години професионален опит в писането и редактирането.

    Още от Джоел Лий

    Абонирайте се за нашия бюлетин

    Присъединете се към нашия бюлетин за технически съвети, рецензии, безплатни електронни книги и изключителни оферти!

    Щракнете тук, за да се абонирате