Что такое компрессия данных в браузере
Предлагаем вашему вниманию подборку всевозможных лайфхаков и трюков по оптимизации объема загружаемого кода и файлов, а также общего ускорения загрузки веб-страниц.
В основе статьи расшифровка выступления Виталия Фридмана из Smashing Magazine на декабрьской конференции Holy JS 2017 Moscow.
Чтобы нам с вами не было скучно, я решил подать эту историю в формате небольшой игры, назвав ее Responsive Adventures.
В игре будет пять уровней, и начнем мы с простого уровня — компрессии.
Уровень 1 — Компрессия
Компрессия — это сжатие, а сжимать во frontend можно, например, изображения, текст, шрифты и так далее. Если имеется необходимость максимально оптимизировать страницу в плане текста, то на практике обычно используют библиотеку для сжатия данных gzip. Чаще всего применяют наиболее распространенную реализацию gzip — zlib, которая использует комбинацию алгоритмов кодирования LZ77 и Huffman.
Обычно нас интересует, как сильно библиотека должна сжимать, ведь чем лучше она это делает, тем больше времени занимает данный процесс. Обычно мы выбираем либо быстрое сжатие, либо хорошее, так как одновременно быстрого и хорошего сжатия добиться невозможно. Но как разработчики мы заботимся о двух аспектах: размере файлов и скорости компрессии/декомпрессии — для статического и динамического веб-контента.
Существуют алгоритмы сжатия данных Brotli и Zopfli. Zopfli можно рассматривать как более эффективный, но при этом более медленный вариант gzip. Brotli — это новый формат сжатия и декомпрессии без потерь.
В будущем мы сможем использовать Brotli. Но сейчас не все браузеры его поддерживают, а нам необходима полная поддержка.
Brotli и Zopfli
Стратегия сжатия Brotli/Zopfli
Стратегия выглядит следующим образом:
- Предварительно сжимать статические ресурсы с помощью Brotli + Gzip.
- Сжимать при помощи Brotli HTML на лету с уровнем сжатия 1-4.
- Проверить поддержку Brotli на CDN (KeyCDN, CDN77, Fastly).
- Использовать Zopfli, если нет возможности установить/поддерживать Brotli на сервере.
Уровень 2 — изображения
А вот что мы будем делать с изображениями?
Давайте представим, у вас есть хороший landing page со шрифтами и изображениями. Необходимо, чтобы страница загружалась очень быстро. И мы говорим об экстремальном уровне оптимизации изображений. Это проблема, и она не надуманная. Мы предпочитаем о ней не говорить, ведь в отличие от JS изображения не блокируют рендеринг страницы. На самом деле это большая проблема, ведь размер изображений со временем увеличивается. Сейчас в ходу уже 4K-экраны, скоро будет 8K.
В целом 90% пользователей видят на странице 5,4 МБ изображений — это очень много. Эта проблема, которая требует решения.
Конкретизируем проблему. Что если у вас есть большая картинка с прозрачной тенью, как на примере ниже.
Как ее сжать? Ведь png достаточно тяжела, а после компрессии тень будет выглядеть не очень хорошо. Какой формат выбрать? JPEG? Тень так же будет выглядеть недостаточно хорошо. Что можно сделать?
Один из самых лучших вариантов — разделить изображения на две составляющие. Основу изображения поместить в jpeg, а тень в png. Далее соединить две картинки в svg.
Почему это хорошо? Потому что изображение, которое весило 1,5 МБ, теперь занимает 270 КБ. Это большая разница.
Но есть еще пара трюков. Вот один из них.
Возьмем два изображения, которые визуально отображаются на веб-сайте с одинаковыми пропорциями.
Первое — с очень плохим качеством, имеет реальный и визуальный размер 600 x 400 px, а ниже оно же, но визуально уменьшенное до 300 x 200 px.
Давайте сравним это изображение с изображением, которое имеет реальный размер 300 x 200 px, но сохранено с качеством 80%.
Большинство пользователей не в состоянии различить эти изображения, но картинка слева весит 21 КБ, а справа — 7 КБ.
Есть две проблемы:
- тот, кто решит сохранить картинку, сохранит ее в плохом качстве
- браузеру придется увеличивать или уменьшать изображения
В итоге их главная страница с 40 изображениями с применением данной техники заняла 450 КБ. Впечатляет!
Вот еще хорошая техника.
У нас есть картинка, и нам нужно уменьшить ее размер. За счет чего она будет лучше сжиматься? Контраст! Что если его убрать или уменьшить значительно, а потом вернуть при помощи CSS-фильтров? Но опять таки, тот, кто захочет скачать эту картинку, столкнется с плохим качеством.
Этим приемом можно добиться больших результатов. Вот несколько примеров:
Все бы хорошо, но как же дополнительные задержки рендеринга? Ведь браузеру приходится применять фильтры к изображению. Но тут все достаточно позитивно: 27 мс против 23 мс без применения фильтров — разница несущественная.
Фильтры поддерживаются везде, кроме IE.
Какие еще есть приемы? Сравните два фото:
Разница — это размытие несущественных деталей фотографии, которое позволяет уменьшить размер до 147 КБ. Но этого недостаточно! Пойдем в кодирование JPEG. Предположим, у вас есть последовательный и прогрессивный JPEG.
Последовательный JPEG грузится на странице построчно, прогрессивный — сначала в плохом качестве сразу целиком, а затем качество постепенно улучшается.
Если посмотреть, как работают кодировщики, то можно увидеть несколько уровней сканирования.
Множество разных уровней сканирования находятся в этом файле. Наша цель, как разработчиков, показать сразу детальную информацию об этой картинке. Тогда можно позаботиться о том, чтобы Ships Fast и Shows Soon были с какими-то коэффициентами, которые могут подходить картинке лучше, и тогда уже на первом уровне мы увидим структуру, а не просто нечто размытое. А на втором — практически все.
Существуют библиотеки и утилиты, которые позволяют делать такие трюки: Adept, mozjpeg или Guetzli.
Уровень 3
Помню, семь-десять лет назад — захотел шрифты, добавил font-face и готово. А сейчас нет, необходимо думать, что я хочу сделать и как необходимо загружать. Итак, какой оптимальный метод выбрать для загрузки шрифтов?
Мы можем использовать синтаксис font-face, чтобы избежать общих ловушек на этом пути:
Если мы хотим поддерживать лишь более менее нормальные браузеры, то можно написать еще короче:
Что происходит, когда у нас есть этот font-face в css? Браузеры смотрят, есть ли в body или где-то еще указание на шрифт, и если есть, тогда браузер начинает его загружать. И нам приходится ждать.
Если шрифты еще не кэшированы, они будут запрашиваться, загружаться и применяться, отодвигая рендеринг.
Но разные браузеры действуют по-разному. Есть подходы отображения FOUT и FOIT.
FOIT (Flash of Invisible Text) — ничего не отображается, пока шрифты не загрузятся.
FOUT (Flash Unstyled Text) — контент отображается сразу с дефолтными шрифтами, а потом загружаются нужные шрифты.
Обычно браузеры ждут загрузки шрифтов три секунды, и если они не успели подгрузиться, то подставляются дефолтные шрифты. Есть браузеры, которые не ждут. Но самое неприятное, что есть браузеры, которые ждут до упора. Так не пойдет! Есть множество различных вариантов, как это обойти. Один из них — CSS Font Loading API. Создаем новый font-face в JS. Если шрифты загружаются, то навешиваем их в соответствующие места. Если не загружаются, навешиваем стандартные.
Также мы можем использовать новые свойства в CSS, например, font-rendering, который позволяет нам эмулировать либо FOIT, либо FOUT, но на самом деле они нам даже не нужны, потому что есть Font Rendering Optional.
Существует еще один способ — критический FOFT с Data URI. Вместо загрузки через JavaScript API веб-шрифт внедряется непосредственно в разметку как встроенный Data URI.
Двухступенчатый рендеринг: сначала римский шрифт, а потом остальные:
- Загрузка полных шрифтов со всеми весами и стилями
- Минимальное подмножество шрифтов (A-Z, 0-9, пунктуация)
- Используйте sessionStorage для обратных посещений
- Загрузите подстрочный шрифт (Roman) в первую очередь
Я подумал, что можно сделать еще лучше. Вместо использования sessionStorage мы встраиваем веб-шрифт в разметку и используем Service Workers.
Например, у нас есть какой-то шрифт, но он весь нам не нужен. И мы делаем не то, чтобы subsetting, а именно выбираем, что для данной страницы нужно. Например, берем italic, уменьшаем его, сначала подгружаем его, отображаем на странице, и он будет выглядеть как normal, bold будет как normal, все будет как normal. Потом подгружается все как нужно. Далее делаем subsetting и отправляем это в Service Workers.
Потом, когда пользователь приходит на страницу первый раз, проверяем наличие шрифта, если его нет, то отображаем сразу текст, асинхронно загружаем этот шрифт и добавляем в Service Workers, если коротко. Когда пользователь заходит второй раз шрифт по идеи должен быть уже в Service Workers. Далее проверяем есть ли он и если есть, то сразу берем его оттуда, а если нет, то все эти действия происходят заново.
Здесь существует проблема с кэшированием. Какова вероятность того, что кто-то приходит на ваш сайт и у него все файлы, которые должны быть в кэше, присутствуют в нем?
Браузеры удаляют из кэша то, что считают уже не нужным.
Необходимо заботиться о том, чтобы шрифты действительно оставались в кэше. Раньше мы полагались на local storage, а сейчас более разумно полагаться на Service Workers. Потому что если я положил что-то в Service Workers, то оно там и будет.
Что еще можно сделать? Можно использовать unicode-range. Многие думают, что происходит динамический subsetting, то есть у нас есть шрифт, он динамически разбирается, и подгружается только указанная часть в unicode-range. На самом деле это не так, и загружается весь шрифт.
Действительно, это полезно, когда у нас есть unicode-range, например, для кириллицы и для английского текста. Вместо того, чтобы загружать шрифт, который имеет английский и русский тексты, можем разбить его на несколько частей и подгружать русский, если у нас есть на странице русский текст, и тоже самое делать с английским.
Что можно еще сделать? Есть классная вещь, которую необходимо использовать всегда и везде — preload.
Preload дает возможность загружать ресурсы в начале загрузки страницы, что в свою очередь позволяет с меньшей вероятностью блокировать рендеринг страницы. Данный подход повышает производительность.
Мы также можем использовать font-display: optional. Это новое свойство в css. Как оно работает?
У font-display есть несколько значений. Давайте начнем с block. Данное свойство устанавливает блокировку шрифта на три секунды, в течение которых шрифт подгружается, потом происходит замена шрифта и далее непосредственно его отображение.
Свойство swap работает почти так же, но за некоторым исключением. Браузер сразу отрисовывает текст запасным шрифтом, а когда загрузится указанный, то произойдет замена.
Fallback устанавливает маленький период блокировки в 100 мс, период замены будет равен 3 с, после чего произойдет замена шрифта. Если за это время шрифт не подгрузился, то браузер отрисует текст с запасным шрифтом.
И наконец мы подошли к optional. Период блокировки равен 100 мс, если за это время шрифт не подгрузился, то текст отображается сразу. Если у вас медленное соединение, то браузер может перестать загружать шрифт. Когда шрифт загрузится, то все равно вы будете видеть дефолтный шрифт. Чтобы увидеть прописанный шрифт, необходимо перезагрузить страницу.
Уровень 4
Если происходит повторная загрузка страницы, то все находится в кэше.
А вот если мы сделаем server push, то наши css дойдут до пользователя гораздо быстрее.
Но также это значит, что даже если css в кэше, они все равно будут пересылаться.
То есть если вы пушите много файлов от сервера, они будут подгружаться много раз.
Идем дальше. Есть некоторые рекомендуемые рамки по времени загрузки страниц. Например, для средненького аппарата на android оно составляет пять секунд. Это не так много, если учитывать, что у нас, например, 3G.
Если посмотреть на рекомендуемое ограничение размера загружаемых файлов, необходимое для начала рендеринга, которое упоминает Google, то оно составляет 170 КБ.
Поэтому, когда речь заходит о фреймворках, то нам нужно думать о парсинге, компиляции, качестве сети, стоимости времени выполнения и т.д.
Существуют различные возможности загружать файлы, например, классический способ, который немного устарел — scout. Мы заводим файл scout.js, он находится в html, мы его подгружаем. Его задача — сделать остальное окружение максимально кэшируемым и при этом своевременно сообщать об изменениях в нем.
Это значит, что этому файлу необходимо малое время для хранения в кэше, и если что-то меняется в окружении, тогда scout сразу инициирует обновление. Это действенный способ, потому как нам каждый раз не нужно подгружать и подменять html.
Пакеты лучше комплектовать, опираясь на частоту обновлений файлов: часто обновляемые в одних пакетах, а редко обновляемые в других, чтобы избежать лишних загрузок. Например, библиотеки паковать вместе с утилитами и т.д. Ничего особенного. А что же делать с css, как загружать его? Server push тут не подойдет.
В начале мы все загружали как минимизированные файлы, потом подумали, что часть необходимо загружать в критический css, ибо у нас всего 14 КБ, и их необходимо загрузить как можно быстрее. Начали делать loadCSS, писать логику, потом добавили display:none.
Необычно! Данный вариант работает хорошо в Chrome, плохо в IE, в Firefox работа немного замедлялась, так как они поменяли рендеринг. Таким образом мы улучшили скорость работы на 120 мс.
Если посмотреть на работу с прогрессивным css и без. То с прогрессивным css все подгружается быстрее, но по частям, а вот без его использования медленнее, т.к. css располагается в header и блокирует страницу как js.
Уровень 5
И последний уровень, о котором я не могу не рассказать — Resource Hints. Это замечательная функция, которая позволяет делать множество полезных вещей. Пройдемся по некоторым из них.
Prefetch
Prefetch — указывает браузеру, что тот или иной файл нам скоро потребуется, и браузер грузит его с низким приоритетом.
Prerender
Prerender — данной функции уже нет, но она помогала раньше делать пререндер страницы. Возможно, у нее появится альтернатива…
Dns-prefetch
Dns-prefetch также ускоряет процесс загрузки страниц. Использование dns-prefetch предполагает, что браузер заранее подгружает адрес сервера указанного доменного имени.
Preconnect
Preconnect позволяет делать предварительный хэндшейк с указанными серверами.
Preload
Preload — указывает браузеру, какие ресурсы необходимо предварительно загрузить с высоким приоритетом. Preload можно использовать для скриптов и шрифтов.
Помню в 2009 году прочитал статью "Gmail for Mobile HTML5 Series: Reducing Startup Latency", и она поменяла мои взгляды на классические правила. Посмотрите сами! У нас есть JS-код, но ведь он нам весь сейчас не нужен. Так почему нам большую часть JS-кода не закомментировать, а потом, когда нужно, раскомментировать и выполнить в eval?
Давайте обратимся к статистике. Чтобы сделать парсинг 1 МБ кода на среднем телефоне, нужно 4 с.
Это очень много! Но нам не нужен 1 МБ сразу. Если опять обратиться к статистике, выяснится, что сайты используют всего лишь 40% JS-кода из того, что они загрузили.
И мы можем использовать preload взамен eval для таких же ситуаций.
То есть мы храним файл в кэше, а потом, когда нужно, мы добавляем его на страницу.
Итак, это лишь половина того, чем планировал поделиться Виталий Фридман. Остальные фишки и лайфхаки будут в расшифровке его второго выступления на HolyJS 2017 Moscow, которую мы также подготовим и выложим в нашем блоге.
И если вы любите изнанку JS так же, как и мы, наверняка вам будут интересны вот эти доклады на нашей майской конференции HolyJS 2018 Piter, ключевым из которых мы опять поставили рассказ Виталия Фридмана:
Понятие экономии интернет-трафика появилось во времена существования лимитного проводного Интернета. В наше время безлимитный проводной Интернет поставляется по приемлемым ценам. А вот безлимитные тарифы провайдеров, поставляющих беспроводной Интернет, еще не всем могут быть доступны по цене. Как сэкономить денежные средства, работая с лимитным интернет-подключением? Кроме осознанного отказа от лишних операций по скачиванию файлов и посещению веб-ресурсов, сэкономить интернет-трафик можно, используя различные способы и инструменты браузеров. Что это за способы и что это за инструменты – об этом ниже.
1. Способы экономии интернет-трафика
1.1. Блокировщики рекламы
Одним из действенных способов экономии трафика являются блокировщики рекламы. Блоки с контекстной рекламой, особенно, если это анимированные баннеры, обычно и составляют большую часть интернет-трафика. Так что блокировщики рекламы выполняют целых две конструктивных миссии – блокируют рекламу и экономят деньги пользователей лимитного Интернета. Функцию блокировки рекламы можно внедрить в любой браузер, поддерживающий установку расширений. Однако блокировщики рекламы на отдельных сайтах придется отключать. Так, некоторые медиа-ресурсы не откроют доступ к бесплатному просмотру видео, пока для их сайтов не будет отключен блокировщик рекламы. В числе популярных блокировщиков рекламы – Adguard, uBlock, AdBlock, AdBlock Plus и пр.
1.2. Режим сжатия трафика
Специально для медленного интернет-соединения некоторые браузеры предусматривают режимы сжатия трафика. Это режимы, в рамках работы которых трафик проходит через серверы поставщика технологии, а на устройствах пользователей страницы сайтов отображаются уже в сжатом виде – с урезанным качеством изображений, заблокированной флеш-анимацией и т.п. Режимы сжатия трафика полезны не только в условиях медленного Интернета, но еще при работе с маломощными компьютерами и медленными сайтами. Также режимы сжатия трафика используются в качестве способа доступа к территориально заблокированным сайтам. Так, сжатие трафика предусматривает посредничество серверов поставщика технологии, и они, соответственно, выполняют ту же роль, что и прокси- или VPN-серверы. Если серверы поставщика технологии не находятся в стране блокировки сайта, доступ к нему будет открыт. Режимы сжатия трафика предустановлены в Opera и Яндекс.Браузере. А в Google Chrome и браузеры, поддерживающие работу с контентом из его магазина, режим экономии трафика может быть внедрен с помощью специального расширения.
1.3. Блокировка плагина Adobe Flash
Для экономии интернет-трафика можно настроить запрос разрешения перед использованием плагина Adobe Flash. Без разрешения пользователя проигрыватель флеш-анимации не будет запускаться и, соответственно, расходовать интернет-трафик.
1
1.4. Блокировка изображений
Блокировка изображений на веб-страницах является крайней мерой. Блокировка изображений – это, как и блокировка рекламы, действенный способ экономии трафика, плюс к этому, существенно ускоряющий веб-серфинг, причем не только в плане скорости открытия сайтов, но еще и как методика концентрации внимания на полезной информации, а не картинках. Блокировка изображений обычно предусматривается в настройках браузера, но для этих целей лучше установить специальное расширение с удобным доступом на панели инструментов. Для Chromium-браузеров и «наследников» движка Gecko таким расширением является Chrome HTML Content Blocker, оно реализует на панели инструментов браузеров кнопки блокировки изображений, а также иных типов контента. Расширение можно установить в магазинах Opera (для нее самой и Яндекс.Браузера), Chrome и Mozilla Firefox.
2
Какие из описанных выше способов экономии интернет-трафика реализованы в популярных браузерах и как задействовать эти способы?
2. Opera
Браузер Opera поставляется сразу с двумя эффективными инструментами сжатия трафика на борту. В его настройках (раздел «Основные») можно активировать штатный блокировщик рекламы.
3
И использовать функцию Opera Turbo – запатентованную компанией Opera Software технологию сжатия трафика.
4
В рамках работы Opera Turbo флеш-контент блокируется автоматически и запускается вручную пользователем. Заблокировать полностью Adobe Flash или настроить его работу вне режима сжатия трафика можно в разделе настроек Оперы «Сайты». Здесь же настраивается и блокировка изображений.
5
3. Яндекс.Браузер
С разрешения Opera Software технологией Opera Turbo обустроен собиратель лучшего у других браузеров - Яндекс.Браузер. Режим сжатия трафика в Яндекс.Браузере называется режимом «Турбо». Этот режим сам активируется в условиях медленного интернет-соединения. Самостоятельно включить его можно в меню браузера, а настроить – в разделе «Турбо» настроек браузера.
6
Яндекс.Браузер обустроен собственным блокировщиком рекламы, но не всей, а лишь агрессивной.
7
На его борту обнаружим блокировщик флеш-данных в разделе дополнений
и блокировщик изображений в числе возможностей панели Protect.
9
4. Google Chrome
Режим сжатия трафика по технологии от Google в браузере Chrome и его клонах появляется после установки расширения «Экономия трафика». Для его включения необходимо активировать галочку «Экономия трафика».
10
Без установки специальных расширений заблокировать Adobe Flash и изображения можно в настройках Chrome, кликнув опцию «Показать дополнительные настройки» и нажав в разделе «Личные данные» кнопку «Настройки контента».
5. Vivaldi
Браузер Vivaldi построен на базе Chromium и поддерживает установку расширений для Chrome. Реализовать режим сжатия трафика в этом браузере можно с помощью того же расширения «Экономия трафика». Vivaldi примечателен встроенными функциями и эффектами для веб-страниц, в числе которых:
Режим чтения на борту Vivaldi можно использовать как инструмент экономии трафика, поскольку при его активации для каждого отдельного сайта статейные материалы такого сайта будут открываться постоянно в режиме чтения – очищенном от веб-элементов книжном формате. Настроить блокировку Adobe Flash можно в настройках Vivaldi, в разделе «Веб-страницы».
6. Mozilla Firefox
У Mozilla Firefox нет ни своей технологии сжатия данных, ни реализуемой за счет расширений. Но это на момент написания статьи. В истории браузера были экспериментальные расширения типа «ускоритель Интернета» и, возможно, таковые появятся в будущем. На данный момент экономить трафик, работая с Firefox, можно с помощью расширений – блокировщиков рекламы и прочего контента (Content Blocker), в частности, упомянутого HTML Content Blocker.
При активном серфинге в Интернете нередко возникает вопрос, что такое кэш браузера, какие функции он выполняет, и нужно ли его чистить. Эти и другие моменты вызывают много дискуссий, но большинство пользователей сходятся к единому мнению — кеш (cache) веб-проводника требует периодической очистки для защиты ПК или телефона от загрязнения, повышения безопасности и конфиденциальности работы. Но обо всем подробнее.
Что такое кэш браузера?
Для начала разберемся с терминологией. Кэш браузера — это хранилище веб-проводника, которое сохраняет определенные данные с сайтов для более быстрой загрузки. Благодаря хранению статических файлов, тяжелые данные загружаются не из сервера, а с веб-проводника. Такая особенность существенно снижает время скачивания таких элементов, как JS, CSS, HTML и других. Со временем эти данные накапливаются и замедляют работу устройства. Вот почему каждый пользователь должен знать, что такое кэш браузера, и как его очистить.
Для чего он нужен?
Выше мы рассмотрели суть этой функции, но остановимся на ней более подробно. Благодаря кэшированию, пользователю не нужно долго ждать загрузки разных элементов. Эта особенность позволяет сэкономить время, трафик и скорость загрузки. Если говорить в целом, cache веб-проводника дает следующие плюсы:
- ускоренная вторичная загрузка ресурсов;
- уменьшение размера загружаемого трафика;
- высокая скорость повторной загрузки видео, изображений или музыки;
- возможность извлечения данных и сохранения на компьютер;
- при перемещении кэша в оперативную память на загрузку уходит еще меньше времени;
- возможность просмотра страниц сайта из cache даже при выключенном подключении к Сети.
Иными словами, задача кеша — ускорить работу в Интернете и сделать ее комфортной за счет более быстрой загрузки страниц.
Что значит почистить кеш и как это сделать?
Не меньший интерес вызывают другие моменты — что значит очистить кэш браузера, и как это сделать правильно. На втором вопросе мы остановимся немного ниже. Что касается первого аспекта, здесь подразумевается удаление всей информации, которая находится во временном хранилище. Как результат, после очистки всего кэша при первом доступе к ресурсу требуется дополнительное время для запуска. Иными словами, пользователь удаляет накопившиеся временные файлы из специальных папок.
После рассмотрения, что такое кеш в браузере, разберем, как его почистить. Это необходимо для решения следующих задач:
- Освобождение свободного места на жестком диске. Если долго не чистить cache, память ПК, телефона или другого устройства забивается. Иногда размер временных файлов может достигать нескольких гигабайт. Этот факт негативно влияет на скорость работы компьютера.
- Обеспечение безопасности. Снижается риск взлома ПК или смартфона через накопившийся кэш.
- Восстановление актуальности информации. Если время от времени не чистить кэш, можно упустить разные обновления на ресурсе.
- Обеспечение правильной работы приложений и сервисов.
Теперь вы знаете, что это такое кэш в браузере, и зачем его чистить. Перейдем непосредственно к решению поставленной задачи.
Для Гугл Хром
- войдите в боковое меню и перейдите в раздел История;
- укажите временной промежуток, за который необходимо выполнить удаление;
- выберите необходимые элементы, которые требуется убрать;
Для Мозилла Фаерфокс
- жмите на три горизонтальные полоски;
- кликните на кнопку Настройки;
- зайдите в раздел Куки и данные сайтов и жмите по кнопке "Удалить";
- установите отметку возле Кэшированное веб-содержимое;
Можно воспользоваться и другим путем. Войдите в Библиотеку, жмите на Журнал, а после этого кликните Очистить историю. Возле указателя Удалить выберите Все из меню, укажите Кэш и жмите Удалить сейчас.
При желании можно задать очистку кэша браузера автоматически. Для этого:
- зайдите в раздел История;
- в выпадающем меню укажите Будет использовать ваши настройки хранения истории;
- отметьте Очищать историю при закрытии Фаерфокс;
- жмите по клавише Параметры возле Очищать историю при закрытии Фаерфокс;
- в окне настроек очистки истории отметьте Кэш и подтвердите внесенные изменения.
Для Опера
- в секции Уничтожить следующие элементы выберите С самого начала;
- установите галочку Очистить кэш и проверьте, что остальные отметки убраны;
- жмите Очистить историю посещений.
Для Яндекс
- кликните на три горизонтальные полоски;
- войдите в раздел Дополнительно, а там Очистить историю;
- в перечне Удалить укажите период, за который нужно удалить кэш;
- активируйте функцию Файлы, сохраненные в кэше;
- включите остальные опции, если не планируете их удалять;
- жмите Очистить.
Этих действий достаточно, чтобы избавиться от лишних файлов. Если стоит вопрос, как почистить кеш браузера на Андроиде, для большинства браузеров функционал идентичен. Отличия могут касаться только названий некоторых разделов. Чтобы упростить процесс, для очистки cache на ПК или телефоне можно использовать специальные программы, к примеру, CCleaner.
Что будет, если почистить кеш?
Многие люди не торопятся с удалением лишних файлов, ведь они не знают, что будет, если очистить кэш браузера. На самом деле, ничего страшного не происходит. Просто удаляются сведения, накопленные во время путешествия по Интернету. В результате:
- сайты в строке URL придется набирать полностью (подсказки исчезают);
- удаляются куки (если они были выбраны при очистке);
- медленнее загружаются сайты и т. д.
В целом, в работе ПК ничего не меняется. Единственное, что при первом входе некоторые сайты будут не так быстро грузиться. Но при хорошей скорости Интернета это почти незаметно.
Итоги
Теперь вы знаете все особенности cache, и что будет, если почистить кэш браузера. Не стоит игнорировать эту возможность, ведь с ее помощью можно убрать лишние данные, повысить конфиденциальность работы в Интернете и даже ускорить работу ПК.
Пользователи Интернета часто спрашивают, как в Гугл Хром включить турбо режим для экономии трафика и более быстрой загрузки страниц. Сразу отметим, что в Google Chrome встроенной опции Turbo не предусмотрено, но создано специальное приложение. Оно выполняет функцию сжатия данных и позволяет снизить расходы на Интернет. Но обо всем подробнее.
Что такое турбо режим в Гугл Хром
При отсутствии доступа к Вай-Фай пользователи Сети все чаще задумываются об экономии трафика. В такой ситуации поможет режим Турбо в Гугл Хром. Это специальная технология, предусматривающая сжатие файлов для быстрой загрузки страниц. После включения этой функции компрессия данных может достигать 80%, что существенно ускоряет время загрузки при небольшой скорости подключения. Кроме того, Турбо режим можно использовать в Гугл Хром в качестве замены анонимайзеру.
Такая опция пригодится при наличии ограничений по трафику или подключении через ADSL линии, где скорость Интернета значительно ниже. Правда, возникают подозрения по поводу скорости обмена данными. Дело в том, что информация сначала отправляется на сервер Гугл, где сжимается, а после этого поступает к пользователю. Появляется дополнительный посредник. Следовательно, за счет такого транзита скорость загрузки в Турбо режиме почти не меняется, а вот трафик действительно сжимается.
Как включить
Если ваша цель в том, чтобы сэкономить расходы на Интернет, необходимо знать, как в Хроме включить турбо режим. Здесь алгоритм действий имеет ряд особенностей для компьютера и телефона. Рассмотрим эти вопросы по отдельности.
На ПК
Как отмечалось, встроенный Турбо режим в Гугл Хроме не предусмотрен, как в Опере. Раньше имелось специальное приложение, которое замещало такой функционал — программа Data Saver. Расширение добавлялось на панель инструментов веб-проводника и выглядело в виде специальной кнопки.
- Запустите Гугл Хром.
- Войдите в меню браузера и перейдите в раздел Настройки.
- Найдите там раздел Система.
- Выберите пункт Использовать аппаратное ускорение и переведите тумблер в положение включено.
После этого можно в любой момент включить опцию и тем ускорять работу некоторых сайтов.
На телефоне
Теперь рассмотрим, как включить Турбо режим в Гугл Хроме на смартфоне. Для этого сделайте такие шаги:
- Войдите в веб-проводник на телефоне.
- Кликните на кнопку с тремя точками справа вверху.
- В выпавшем перечне найдите пункт Настройки.
- Жмите пальцем на Упрощенный режим (Экономия трафика).
После этого появляется статистика, свидетельствующая об активности функции. В отличие от ПК здесь устанавливать дополнительные приложения не нужно. После этого остается проверить, стал ли быстрее браузер или нет.
Как отключить турбо-режим
При отсутствии результата может возникнуть вопрос, как в Гугл Хром отключить режим турбо. В случае с ПК сделайте шаги, обратные включению:
- Зайдите в Настройки.
- Найдите Систему.
- В строке Аппаратное ускорение уберите отметку Включено.
Плюсы и минусы Турбо-режима
Перед тем как включить Турбо режим в Гугл Хром, необходимо разобраться с его плюсами и минусами. Рассмотрим их подробнее.
- Возможность входа на те сайты, которые запрещены в стране. Это связано с тем, что данные отправляются на сервера Google, а лишь после этого возвращаются провайдеру. Благодаря этой особенности, удается обойти ограничение, ведь де-факто информация поступает из-за границы, а не от запрещенного сервиса.
- Уменьшение расхода трафика за счет урезания рекламы, сжатия картинок и другой информации.
- Отсутствие необходимости устанавливать дополнительные расширения.
С учетом сказанного нужно еще подумать — стоит ли включить Турбо режим или от такой опции лучше отказаться. При пользовании Сети через Вай Фай в подключении этой функции нет необходимости. Если же необходима экономия трафика или скорость Интернета оставляет желать лучшего, турбо-режим становится реальным спасением для пользователей Гугл Хром.
В данном материале речь пойдёт о, без преувеличения, лучшем Интернет-браузере, который позволит самым существенным образом сэкономить Интернет трафик при просмотре веб-сайтов.
Согласитесь, что задача экономии трафика на смартфоне не потеряла актуальности, подавляющее большинство пользователей существенно ограничиваются пакетом трафика, что предусматривается по тарифу мобильного оператора, а подключить тариф с неограниченным интернетом либо невозможно ввиду его отсутствия, либо это весьма и весьма дорого!
Интернет браузер, позволяющий экономить Интернет-трафик на мобильном
За счёт чего достигается существенная экономия трафика? Отображаемые в браузере страницы загружаются не напрямую, а проходят через сжимающий сервер-посредник, что позволяет достичь небывалого уровня экономии трафика.
Данный весьма и весьма популярный браузер называется Opera Mini. Он полностью бесплатен и доступен в версии для самых популярных на текущий момент мобильных операционных систем – Android и iOS.
Его установка осуществляется стандартным образом: в случае с Android – это Play Маркет, если же это iOS (iPhone) – App Store.
Давайте рассмотрим функциональные возможности и опции, позволяющие самым основательным образом экономить интернет трафик на смартфоне при просмотре сайтов.
В основном окне программы мы видим экспресс-панель, на которую можно добавить часто посещаемые вами сайты, дабы можно было быстро их открыть для просмотра. Чуть выше располагается форма для ввода поискового запроса или интернет адреса.
В нижней части интерфейса располагаются следующие элементы интерфейса:
- стрелки, осуществляющие навигацию в рамках текущего просмотра и перемещения по сайту кнопка домой, нажатие которой осуществляет переход к экспресс-панели
- кнопка переключения между открытыми в браузере вкладками с сайтами
- основная кнопка браузера Opera Mini, нажатие по которой отобразит меню, в котором можно подчеркнуть текущий режим экономии трафика, количество сэкономленного трафика, перейти в настройки и т.д.
Давайте рассмотрим режимы экономии трафика, открытие которых осуществляется через кнопку меню браузера.
Доступно несколько вариантов сжатия:
- Экстремальный – в данном режиме обеспечивается максимальное сжатие и соответственно экономия Интернет-трафика. Однако, некоторые сайты в таком режиме отображения могут отображаться некорректно.
- Высокий – данный режим сжатия менее эффективен, но при его использовании не возникает проблем с отображением сайтов со сложным дизайном или структурой.
- Автоматический – выбрав данный режим, браузер Opera Mini в подавляющем большинстве случаев будет использовать вариант сжатия «Высокий».
Также поддаётся настройке уровень сжатия изображений. Выбрав низкое качество, отображаемые изображения потеряют былую чёткость, зато трафика на их загрузку будет потрачено минимальное количество.
Если выбран Экстремальный режим сжатия страниц, то в настройке качества изображений можно вовсе отключить загрузку и отображение оных. В режиме Высокого сжатия страниц можно лишь выбрать степень сжатия качества изображений, а отключить полностью их загрузку и отображение не представляется возможным.
И наконец, имеется возможность включения блокировки рекламы, что также немного снизить суммарное потребление трафика при просмотре страниц.
На этом описание лучшего решения для экономии Интернет-трафика на мобильных устройствах можно считать завершённым. Воспользуйтесь им, и вы решите проблему с преждевременным исчерпанием трафика, что включён в ваш тариф.
В свою очередь, Вы тоже можете нам очень помочь.
Просто поделитесь статьей в социальных сетях с друзьями.
Поделившись результатами труда автора, вы окажете неоценимую помощь как ему самому, так и сайту в целом. Спасибо!
Н есмотря на развитие сетей третьего и четвертого поколений (3G и 4G), бывают такие ситуации, когда интернет нужен позарез, а вы находитесь в дороге или вдали от цивилизации, где нет соты, обеспечивающей мощный и стабильный сигнал. Что же предпринять в таком случае? Одно из решений – использовать браузер с режимом сжатия трафика (другими словами, компрессией). Благодаря ему, можно пользоваться интернетом даже при слабом и нестабильном EDGE-подключении с передачей трафика в несколько десятков килобайт/сек. В этой статье мы расскажем вам, в какие мобильные браузеры встроена эта технология, как именно она работает, и в каком программном продукте будет наиболее полезна.
Хотя в описании практически всех браузеров для мобильных систем указано, что этот конкретный веб-навигатор самый быстрый, загружает веб-страницы буквально за 2 секунды, и потребляет самую малую долю аппаратных ресурсов смартфона, в действительности такое описание означает, что вся оптимизация обмена ресурсами между устройством и сервером выполнена лишь в исходном коде. По сути, чтобы обмен трафиком происходил быстро, придется обзавестись современным двух- , а лучше четырех-ядерным девайсом, чтобы движок мог быстрее преобразовать входящий поток данных в удобоваримый вид и представить его вам в правильной, структурированной форме, с корректной версткой и выполняемыми скриптами. Так неужели пользуясь средним или устаревшим по сегодняшним меркам смартфоне, нельзя сэкономить проходящий трафик при серфинге? На самом деле, в некоторых мобильных приложениях есть средства и для аппаратной платформы с относительно малой производительностью. Отличный способ выйти из такого неудобного положения, – это использовать сжатие трафика. Ниже мы поделимся с вами некоторыми нюансами, как использовать данный механизм при работе в сети.
Браузеры, в которых доступно сжатие трафика (компрессия)
Функция компрессии данных при обмене входящим и исходящим трафиком встроена лишь в 3 актуальных программных продуктах для веб-серфинга, а именно в Google Chrome, Opera и Opera Mini. Режим компрессии в каждом из этих приложений имеет свои особенности, на них мы подробно и остановимся в дальнейшем.
Google Chrome
Этот навигатор по праву считается одним из лучших. Среди массы прочих достоинств он обладает одной очень полезной для нас функцией, а именно, — сжатием трафика. Как ее активировать? Установим приложение на смартфон.
Официальная страница в Google Play
Зайдем на веб-страницу проекта в магазине Google и нажмем кнопку «Установить».
Дальше все, как обычно: соглашаемся с разрешениями, ждем пару минут и запускаем программу.
При первом запуске вам будет предложено принять лицензию и определить, хотите ли вы отправлять на сервера компании данные о вылетах и багах приложения. Принимаем решение и идем дальше.
В следующей форме нужно выбрать аккаунт, для которого будет выполнена синхронизация Chrome, а именно: закладок, вкладок, истории посещений, настроек и пр. Отмечаем соответствующий аккаунт, с которым вы будете работать. При желании этот пункт можно и пропустить.
После выбора учетной записи нужно закончить этап предварительной настройки, нажав кнопку «Готово».
Если вы хотите понаблюдать за тем, как происходит процесс синхронизации, кликните кнопку «Настройки».
Итак, когда установка закончена, можем приступать к работе с приложением. На домашней форме активной программы щелкните на кнопку с тремя вертикальными точками в правом верхнем углу.
В ниспадающем списке выберите пункт «Настройки».
В нижней части меню параметров обратите внимание на пункт «Экономия трафика». По умолчанию он выключен.
Активируйте эту функцию.
Перед вами появится наглядная диаграмма, где указан объем исходного трафика, количество полученных данных после сжатия, процентное соотношение компрессии, а также график загрузки сети, разбитый по числам.
Как видим, вначале эта диаграмма абсолютно пуста. Пока что закроем ее, и посетим несколько предпочтительных для вас сайтов. Теперь снова проделаем то же самое, откроем статистику экономии трафика, и видим, что функция работает.
По существу, механизм сжатия работает довольно хорошо: в результате получаем более 50% объема трафика от исходного. Также все страницы отображаются правильно, контролы на своих местах, скрипты тоже работают корректно. Но поговорим о других браузерах, обладающих аналогичной функциональностью.
Opera
Официальная страница на Google Play
Мобильная версия Opera ни в чем не уступает, а в некоторых аспектах даже превосходит свой десктопный вариант. Установим браузер на устройство. Процедура абсолютно такая же.
При первом запуске появляется форма с приглашением начать работу. Следуем дальше, нажав кнопку «Продолжить».
После небольшого введения попадаем на главную форму программы. Щелкнем на логотип компании-производителя в правом нижнем углу.
В верхней части всплывающего меню есть переключатель режима экономии трафика. Убедимся, что он включен.
Чтобы детально настроить этот режим, перейдите в меню Настройки и выберите пункт «Экономия трафика».
Какие настройки нам доступны? Прежде всего, мы можем изменить качество загружаемых картинок от низкого до высокого. Хардкорщики вправе отключить отображение картинок на сайтах вовсе. Еще одна опция – это сжатие видео (отличный способ сэкономить деньги и трафик любителям стриминговых сервисов и потокового видео (Twitch, Youtube ).
Получить краткие сведения об эффективности данной функциональности можно в том же ниспадающем меню с иконками для быстрого доступа, вызываемого из домашней формы.
После тестирования технологии компрессии в Opera, можно сделать вывод, что в сравнении с Хромом норвежский веб-навигатор более успешно справляется с данной задачей. Процент сжатых данных доходит до 60-65 процентов, что нисколько не сказывается на корректной HTML-разметке и поддержке стандартов для визуализации контента. Исполнение скриптов также не пострадало.
Opera Mini
Официальная страница на Google Play
Специально для тех, кто смотрит в сторону минимализма в вещах и технологиях, Opera Software создала облегченную версию своего флагманского продукта Opera Mini. Мало того, что он занимает мизерные 3 Мб, так еще и в интересующей нас функции компрессии данных обходит своего старшего брата.
Механизм сжатия трафика в этом приложении работает абсолютно другим образом. В Opera Mini обработка веб-контента (текста, графики, динамических вставок и роликов) происходит на удаленном прокси-сервере компании. Клиентское же устройство принимает поток данных уже полностью в обработанном виде. Такая схема позволяет использовать Opera Mini даже на наименее производительных смартфонах и планшетах, а экономия доходит до 90 процентов всей проходящей через девайс информации.
Чтобы воспользоваться этой функциональностью, нужно скачать Opera Mini на телефон и инсталлировать его.
После первой загрузки соглашаемся с лицензией и входим в браузер.
Нововведений здесь масса, но нас интересует исключительно процесс компрессии(сжатия). Как его активировать и настроить?
Щелкнем на логотипе в том же самом нижнем правом углу и нажмем на круговой диаграмме режима компрессии в верхней части ниспадающего меню.
Как видим, триггера включения и отключения сервиса в Opera Mini нет. К тому же, доступно несколько режимов экономии: высокий и экстремальный. При высокой экономии задействуется тот же принцип, что и в полновесной Opera. Для сжатия применяется режим турбо, обеспечивающий 60-65 процентов компрессии благодаря использованию фирменной технологии Opera Turbo. Посмотрим повнимательней на экстремальную экономию. При задействовании этого механизма уровень компрессии достигает тех самых обещанных 90%. Но так как весь процессинг осуществляется на сервере, пришлось пожертвовать точностью отображаемого на веб-странице контента. Не все контролы на сайтах находятся там, где надо, а поддержка HTML5, CSS и JS и вовсе не гарантируется. Помимо этого, в экстремальном режиме можно гибко кастомизировать размер и перенос текста на новую строку, выбрать протокол для обмена данными, а также задать пару других параметров.
В эффективности алгоритма сжатия можно убедиться, посетив пару сайтов и взглянув на статистику еще раз.
Эксклюзивной фишкой Opera Mini является детализированная диаграмма с показателями обработки контента за последние 5 дней. Она вызывается по нажатию кнопки «Подробнее» в настройках компрессии. Здесь же можно переключать режимы.
Помимо выбора наиболее подходящего веб-навигатора, существует еще ряд действенных и результативных способов обеспечить сжатие трафика на мобильном аппарате. О них мы и поговорим в следующем материале: Минимизация и мониторинг трафика на Андроид .
Мобильный браузер Opera Mini теперь предлагает пользователю два разных режима компрессии данных: Extreme Mode и High mode. Оба в конечном счёте направлены на уменьшение размера данных запрашиваемых веб-страниц, что может быть востребовано при ограниченных и дорогих объёмах мобильного трафика. Разница между режимами заключается в том, насколько каждый из них сжимает данные и тем самым насколько конкретная веб-страница теряет от своего первоначального вида за счёт удаления из разметки «некритичных» фрагментов.
При включении Extreme Mode данные, включая изображения, будут подвергаться максимальному сжатию: экономия трафика тут может составить до 90%. При этом, однако, внешний вид веб-страницы может существенно измениться. Режим High mode более бережно относится к содержимому HTML — уровень сжатия изображений уменьшен и пропускаются видеоплееры, но и уровень компрессии данных составляет в среднем 30-40%. Пользователь может выбирать между обоими режимами, руководствуясь тем в какой сети он находится.
Разница в представлении мобильной версии Facebook: слева — Extreme Mode, справа — Normal Mode
20 августа этого года, когда Opera Software отмечала 20-летний юбилей своего главного продукта — браузера Opera, компания приоткрыла статистику использования различных версий браузера. Самой популярной является самая простая java-версия Opera Mini — ей пользуется 269 миллионов человек по всему миру. Мобильные версии для Android и iOS делят свою аудиторию с десктопной версией — общее число пользователей в этом случае составляет 81 миллион человек.
Читайте также: