Pull to refresh
  • by relevance
  • by date
  • by rating

Brotli — новый алгоритм сжатия веб-данных от Google

ua-hosting.company corporate blogWebsite developmentGoogle Web ToolkitAlgorithms
image

Так как веб-сайты и онлайн-сервисы с каждым годом становятся все «тяжелее», возрастает необходимость и сжатия данных в вебе. По этой причине Google выпустил новый алгоритм сжатия данных для веб-сайтов — Brotli, что в переводе с швейцарского немецкого означает «маленькая булка хлеба». Алгоритм уже доступен широкой аудитории на GitHub.
Читать дальше →
Total votes 36: ↑24 and ↓12 +12
Views27.6K
Comments 12

Внедряем Brotli с помощью Nginx — экономим байты почти бесплатно

Website developmentClient optimizationBrowsers
Tutorial
Эта статья пригодится всем, кто неравнодушен к скорости доставки своего веб-приложения пользователю и хочет выжать дополнительные миллисекунды и килобайты экономии.


Читать дальше →
Total votes 28: ↑26 and ↓2 +24
Views30.3K
Comments 4

Цена JavaScript

High performanceWebsite developmentJavaScriptClient optimizationWeb services testing
Translation
Tutorial
По мере того как наши сайты всё сильнее зависят от JavaScript, приходится расплачиваться за то, что мы отправляем пользователям. Иногда цена не видна с первого взгляда. В этой статье я объясню, почему полезно проявить немного дисциплины, если вы хотите ускорить загрузку и производительность на мобильных устройствах.

tl;dr: меньше кода = меньше парсинг/компиляция + меньше передача + меньше распаковка

Сеть


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



Это может стать проблемой даже в странах первого мира, поскольку эффективный тип сетевого соединения у пользователя необязательно 3G, 4G или WiFi. Вы можете сидеть в кафе с WiFi, но быть подключённым к хотспоту через сотовую связь со скоростью 2G.
Читать дальше →
Total votes 17: ↑17 and ↓0 +17
Views16.8K
Comments 2

«Быстрорастворимый» фронтенд. Лекция в Яндексе

Яндекс corporate blogJavaScriptClient optimizationInterfaces
Ускорить доставку элементов фронтенда на устройство пользователя можно несколькими способами. Разработчик Артём Белов из самарского офиса норвежской компании Cxense попробовал самые многообещающие: HTTP/2, Server Push, Service Worker, а также оптимизацию в процессе сборки и на стороне клиента. Итак, что же нужно сделать, чтобы сократить время отклика приложения до минимума?


Выясняется, что алгоритмы сжатия существуют уже давно. Это произошло где-то в июне — видимо, где-то над Самарой пролетал метеорит и идея проверить новые алгоритмы сжатия, Zopfli и Brotli, пришла мне и парню из соседней компании. Больше чем уверен, вы читали его статью, это Александр Субботин. Статья разошлась на Medium, и он известен, а я нет.

Читать дальше →
Total votes 71: ↑68 and ↓3 +65
Views23.5K
Comments 21

«Шакал»: сжимаем фронтенд

TINKOFF corporate blogWebsite developmentNode.JS
Привет! Я — Ваня, лид платформенной команды в Тинькофф Бизнес.

Мое любимое занятие — открывать вкладку DevTools и проверять, сколько весят артефакты сайта. В этой статье расскажу, как мы сократили вес приложения на 30% силами платформенной фронтенд-команды за один день без изменения кода сайта. Никаких хитростей и регистраций — только nginx, docker и node.js (опционально).


Читать дальше →
Total votes 63: ↑59 and ↓4 +55
Views17.9K
Comments 35

Битва WEB серверов. Часть 2 – реалистичный сценарий HTTPS:

UltraVDS corporate blogNginxApacheIIS


О методике мы рассказывали в первой части статьи, в этой мы тестируем HTTPS, но в более реалистичных сценариях. Для тестирования был получен сертификат Let’s Encrypt, включено сжатие Brotli на 11.

На этот раз попробуем воспроизвести сценарий развертывания сервера на VDS или в качестве виртуальной машины на хосте с типовым процессором. Для этого устанавливали лимит в:

  • 25% — Что в пересчете на частоту ~ 1350МГц
  • 35% -1890Мгц
  • 41% — 2214Мгц
  • 65% — 3510Мгц

Количество единовременных подключений сократилось с 500 до 1, 3, 5, 7 и 9,
Читать дальше →
Total votes 24: ↑20 and ↓4 +16
Views7.8K
Comments 13

Docker-образ для раздачи Single Page Application

Website developmentProgrammingDevOps
Sandbox

Single-page Application (SPA) – это набор статических JavaScript и HTML файлов, а так же картинок и других ресурсов. Поскольку они не изменяются динамически, опубликовать их в интернете очень просто. Для этого существует большое количество дешёвых и даже бесплатных сервисов, начиная с простого GitHub Pages (а для кого-то даже с narod.ru) и заканчивая CDN вроде Amazon S3. Однако мне нужно было другое.


Мне нужен был Docker-образ с SPA, чтобы его легко можно было запустить как в продакшене в составе Kubernetes-кластера, так и на машине back-end разработчика, который понятия не имеет, что такое SPA.


UPD 07.07.20: Посмотерть самому на то, что в итоге получилось, можно тут: https://github.com/alexxxnf/spa-docker-example


Я для себя определил следующие требования к образу:


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

Сегодня я расскажу как:


  • выпотрошить nginx;
  • собрать brotli из исходников;
  • научить статические файлы понимать переменные окружения;
  • ну и конечно как собрать из всего этого Docker-образ.

Цель этой статьи поделиться моим опытом и спровоцировать опытных участников сообщества на конструктивную критику.

Читать дальше →
Total votes 16: ↑14 and ↓2 +12
Views8.9K
Comments 45

Эффективность Brotli в реальном мире

RUVDS.com corporate blogWebsite development
Translation
Одним из наиболее фундаментальных правил разработки быстрых веб-сайтов является оптимизация их ресурсов. Если речь идёт о текстовых ресурсах — о коде, написанном на HTML, CSS и JavaScript, это значит, что мы говорим о сжатии данных.



Стандартом де-факто в деле сжатия текстовых ресурсов в веб является метод Gzip. А именно, около 80% сжатых ресурсов, получаемых при загрузках сайтов, сжаты с использованием Gzip. Для сжатия оставшихся 20% ресурсов используется гораздо более новый алгоритм — Brotli.
Читать дальше →
Total votes 38: ↑37 and ↓1 +36
Views7.3K
Comments 15

Сервировка сжатых файлов и использование CDN

Website developmentJavaScript
Tutorial

При загрузке сайта на сервер ложится множество задач, которые необходимо выполнять быстро и стабильно. Но ответственность за часть из них (например, обработку запросов на получение файлов, их пересылку клиенту и компрессию передаваемых данных) можно переложить на специализировые файловые хранилища. Они, как правило, имеют несколько территориальных зон и отдают клиенту файлы от наиболее близкого сервера (так, время загрузки ресурсов из физически удаленных от расположения основного сервера мест значительно сократится). Эти преимущества использования CDN — разгрузка сервера, сокращение времени доставки контента, а также сокращение трафика, передаваемого основным сервером (который обычно дороже), привели к довольно широкому использованию подобного подхода. Сегодня разберемся, как работать с Amazon S3-совместимыми CDN и настраивать передачу сжатых файлов.

Читать дальше →
Total votes 2: ↑2 and ↓0 +2
Views1.3K
Comments 0