Разница между минификацией и gzip-сжатием

Обе эти программы вы используете по отношению к ресурсам на вашем сайте (таким как .css files и .js files). Обе эти программы уменьшают размер файла, делая процесс передачи между браузером и сервером более действенным. Так как, это усиливает производительность.

Интернет – это скоростная база глобальной паутины и сжатый размер файла оказывает помощь этому.

Но эти два понятия совсем разнятся. Если вы еще не знали об этом, эту отличие стоит осознавать.

Минификация удаляет пробелы, комментарии, ненужные запятые, сокращает длину шестигранного кода

и тому подобное. Файл остается с совсем верным кодом. Вам бы не хотелось пробовать прочесть его либо трудиться с ним, но и, однако, он не нарушает никаких правил.

Браузер может прочесть его и применять, как словно бы это исходный файл.

Минификация формирует новый файл, что вы в конечном итоге используете. К примеру, вы создаете документ style.css, с которым вы трудитесь. После этого вы имеете возможность уменьшить его в style.min.css.

Gzip-сжатие находит все повторяющиеся строчки и заменяет их указателями на первом примере данной строки.

Юлия Эванс создала превосходный метод для понимания данной совокупности (см ее статью и видео). Посмотрите на первый абзац стиха:

Once upon a midnight dreary, while I {pon} dered weak an {d wea}{ry,}
Разница между минификацией и gzip-сжатием
Over many{ a }quaint{ and }curious volume of forgotten lore,
W{hile I }nodded, n{ear}ly napping, su{dde}n{ly }th{ere} ca{me }a t{apping,}
As{ of }so{me o}ne gent{ly }r{apping, }{rapping} at my chamb{er }door.
‘Tis{ some }visitor, { I }mu{tte}r{ed, }t{apping at my chamber door} –
O{nly th}is,{ and }no{thi}{ng }m{ore}.

Текст в фигурных скобках был выяснен Gzip, как повторяющийся. Так, они будут заменены указателями, каковые занимают меньше места, чем текст сам по себе.

Gzip возможно поразительно действен при сжатии размера файла, в особенности с кодом, поскольку код может повторяться множество раз. Представьте себе, как много образцов

Вы имеете возможность создать сжатую версию файла (т.е. style.css.zip), но вы вряд ли когда-либо делали это, и браузер не знает, что с ним делать.

В сети, gzip-сжатие осуществляется конкретно вашим сервером. Это делается в настройках сервера. По окончании того, как вы настроите его один раз, gzipping трудится машинально, и не требуется делать никакой текущей работы. Сервер сжимает файл и отправляет его по сети.

Браузер приобретает файл и распаковывает его, перед тем как применять. Я ни при каких обстоятельствах не слышал, дабы кто-нибудь упомянул о накладных расходах распаковки и архивирования, так что я просто не принимаю это в расчет, да и пользы намного перевешивают издержки.

Вот как возможно включить его на серверах Apache, где он применяет модуль mod_deflate. И H5BP предлагает серверные конфигурации для всех популярных серверов, каковые включают gzip-сжатие.

Пример

Мы будем применять файл CSS из Bootstrap, поскольку это, пример общего достояния.

1compressing

Вы станете экономить около 17% минифицируя CSS, 85% применяя gzip-сжатие либо 86%, если вы станете пользоваться обоими.

Вот совершенная обстановка при проверке, в то время, когда все трудится, от DevTools:

2 ideal

Gzip-сжатие значительно более действенно. А применение обоих – это самый лучший вариант.

Gzipping сокращает размер файла приблизительно в пять раз, столько же какое количество минификация. Но, вы получите маленькое преимущество и от минификации кроме этого, потому, что он требует мало дополнительных упрочнений на этапе сборки, вы имели возможность бы кроме этого выбрать и его.

Существуют кроме этого кое-какие свидетельства того, что браузеры смогут стремительнее просматривать и разбирать уменьшенный файл:

Как и ожидалось, минификация оказывает помощь разобрать и загрузить матириал в дополнение ко времени передачи через сеть. Это, возможно, из-за отсутствия комментриев и лишних пробелов.

Микрософт кроме этого начинает оптимизировать собственные анализаторы для него:

Так, в Windows 10 и Микрософт Edge, мы добавили новые стремительные дороги, улучшили встраивание и оптимизировали кое-какие мотоды в компиляторе JIT Chakra, дабы обеспечивать, что уменьшенный код трудится так же скоро, если не стремительнее, чем не-уменьшенные версии кода. С учетом этих трансформаций, производительность отдельных моделей кода значительно уменьшается посредством UglifyJS, что мы испытали, улучшили на 20-50%.

Кэширование ресурсов кроме этого связано с данной темой, поскольку нет ничего стремительнее браузера, которому по большому счету не приходится потребовать ресурсов! Существует большое количество информации об этом в сети (либо в книгах), но мы можем пост об этом в скором будущем с добавлением некоторых хитростей.

Урок 20: Оптимизация скорости загрузки сайта. Введение в SEO


riasevastopol