Обновить
32K+

Клиентская оптимизация *

Делаем сайты удобнее и приятнее

24,14
Рейтинг
Сначала показывать
Порог рейтинга
Уровень сложности

[Не] используйте CDN

Время на прочтение10 мин
Охват и читатели25K
Практически в любой статье или инструменте для оптимизации скорости сайтов есть скромный пункт «используйте CDN». Вообще, CDN – это content delivery network или сеть доставки контента. Мы в компании «Метод Лаб» часто встречаемся с вопросами клиентов по этой теме, некоторые самостоятельно включают себе CDN. Цель этой статьи разобраться, что может дать CDN с точки зрения скорости загрузки сайта, какие проблемы могут возникать и в каких случаях использование CDN оправдано.

image

Обведённые на картинке задержки вызваны использованием CDN.
Читать дальше →

Оптимизация загрузки JavaScript-кода в Wikipedia

Время на прочтение5 мин
Охват и читатели7.7K
Автор материала, перевод которого мы сегодня публикуем, говорит, что он, в середине сентября 2019, наконец-то завершил проект, которым занимался уже год. Целью этого проекта было сокращение размеров манифеста, необходимого для инициализации асинхронного JavaScript-конвейера Wikipedia. А именно, размер манифеста составлял 36 Кб. Его нужно было уместить в менее чем 28 Кб, что соответствует двум 14-килобайтным фрагментам последовательности интернет-пакетов.

Результатом этого проекта стала ежедневная экономия 4.3 терабайт трафика.


Сначала размер манифеста превышал 36 Кб, а после оптимизации его размер стал меньше 28 Кб

На графике показано постепенное уменьшение размеров манифеста. Речь идёт о сжатых данных (то есть это — чистая нагрузка на сеть, которую создаёт передача этих данных с сервера в браузер).
Читать дальше →

Уменьшение размеров бандлов с помощью Webpack Analyzer и React Lazy/Suspense

Время на прочтение9 мин
Охват и читатели23K
По мере того, как растёт сложность клиентских приложений, размеры их бандлов становятся всё больше и больше. В этой ситуации сильнее всего страдают люди, вынужденные, по разным причинам, пользоваться медленными интернет-соединениями. При этом с каждым днём всё становится только хуже.



Автор статьи, перевод которой мы сегодня публикуем, работает в Wix. Он хочет рассказать о том, как смог уменьшить размер одного бандла примерно на 80%, используя Webpack Analyzer и React Lazy/Suspense.
Читать дальше →

Структуры данных для программистов игр: bulk data

Время на прочтение19 мин
Охват и читатели18K
image

Любому программисту будет полезно понимание различных структур данных и способов анализа их производительности. Но на практике мне ни разу не пригождались АВЛ-деревья, красно-чёрные деревья, префиксные деревья, списки с пропусками, и т.д. Некоторые структуры данных я использую только для одного конкретного алгоритма и ни для чего больше (например, кучи для реализации очереди с приоритетом в алгоритме поиска пути A*).

В повседневной работе я обычно обхожусь на удивление малым количеством структур данных. Чаще всего мне пригождаются:

  • Общие массивы данных (Bulk data) — способ эффективного хранения большого количества объектов.
  • Слабые ссылки (Weak reference) (или дескрипторы (handle)) — способ обращения к объектам в bulk data без сбоев программы в случае, если объект удалён.
  • Индексы — способ быстрого доступа к отдельным подмножествам в bulk data.
  • Массивы массивов — способ хранения объектов bulk data с динамическими размерами.

Я посвящу несколько статей тому, как я обычно реализую все эти структуры. Давайте начнём с простейшей и самой полезной — bulk data.
Читать дальше →

Ускорение instagram.com. Часть 2

Время на прочтение6 мин
Охват и читатели5.5K
Сегодня мы представляем вашему вниманию перевод второго материала из серии, посвящённой оптимизации instagram.com. Здесь речь пойдёт об улучшении механизма заблаговременного выполнения GraphQL-запросов и о повышении эффективности передачи HTML-данных клиенту.



→ Читать, затаив дыхание, первую часть
Читать дальше →

Как рисует браузер. Доклад Яндекса

Время на прочтение8 мин
Охват и читатели22K
До недавнего времени я работал в команде Яндекс.Браузера и по следам этого опыта сделал доклад на конференции YaTalks. Доклад был о том, что у браузера под капотом и как ваши странички превращаются в пиксели на экране. Минимум фронтенда, только внутренности браузера, только хардкор.



— Всем привет, меня зовут Костя. Удивительно — сейчас я работаю в команде виртуальной сети Яндекс.Облака. До этого я пять с лишним лет проработал в команде Браузера, так что сегодня буду говорить о вещах, общих для нас с вами.

Читать дальше →

Разгоняем Google PageSpeed до 100 и больше

Время на прочтение6 мин
Охват и читатели62K
Google PageSpeed

Простые и полезные советы, которые позволят вам максимально разогнать сайт без необходимости закапываться в метриках Google PageSpeed и Lighthouse.
Читать дальше →

Мы забыли про делегирование в JavaScript. Event delegation in React

Время на прочтение5 мин
Охват и читатели14K

Всем привет. Статья о делегирование событий в JavaScript и реализация его в react.js.



О чем собственно речь? Зачем и почему?


Для начала давайте кратко обсудим:


  1. что есть событие;
  2. как происходит распространение;
  3. обработка DOM Level 2 с примером на JavaScript;

И в конце: почему не надо забывать об делегировании в React.


Событие


JavaScript с HTML взаимодействуют между собой за счёт событий (events). Каждое событие служит для того, чтобы сказать JavaScript’у о том, что в документе или окне браузера что-то произошло. Для того чтобы отловить эти события нам нужны слушатели (listeners), этакие обработчики, которые запускаются в случае возникновения события.


Распространение событий


Порядок. Решая проблему: как понять, какой части страницы принадлежит событие? Было реализовано два способа: в Internet Explorer — “всплытие событий”, а в Netscape Communicator — “перехват событий”.

Читать дальше →

Приглашаем на JavaScript Meetup SuperJob 10 октября

Время на прочтение1 мин
Охват и читатели1.6K
10 октября в офисе SuperJob состоится встреча JavaScript-разработчиков.

Специалисты SuperJob поделятся своим опытом оптимизации приложений на React/Redux, использования статических типов с Flow и работы с Node.js.
Традиционно в программе бургеры и неформальное общение.

Дата и время: 10 октября c 19:00 до 21:30
Адрес: Москва, Малая Дмитровка, дом 20
Регистрация: superjob-meetup.timepad.ru/event/1063170/

image
Читать дальше →

Почему для открытия меню Windows читает один файл сто тысяч раз?

Время на прочтение4 мин
Охват и читатели160K

«Проводник тратит 700 мс на то, чтобы открыть контекстное меню панели задач. 75% этого времени он выполняет 114 801 операцию считывания из одного файла, средний объём считываемых данных 68 байт.

Мне стоит написать пост об этом, или достаточно саркастичного твита?»


За компьютером я работаю быстро, и поэтому меня раздражает, когда приходится ждать завершения операции, которая должна выполняться мгновенно. Постоянной помехой на моём сверхмощном домашнем ноутбуке стало медленное закрывание окон на панели задач. Я нажимаю правой клавишей на значок, жду, пока откроется меню, а затем выбираю «Закрыть окно». Самым медленным в этом процессе должны быть перемещения мыши, но выясняется, что наиболее долгим компонентом оказывается задержка перед появлением меню.

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

Этот пост написан как проверка скоростного блогинга. От момента нахождения проблемы и саркастичного твита о ней до публикации поста прошло примерно 90 минут.
Читать дальше →

Видео и доклады со SmartMail Meetup: Frontend

Время на прочтение2 мин
Охват и читатели2.1K


Лето выдалось холодным, а это хороший повод потратить дождливые деньки на просмотр пары-тройки лекций по frontend-разработке. 27 июня прошел первый SmartMail Meetup, посвященный фронтенду. С техническими докладами выступили сотрудники команды frontend-разработки Почты. Вместе с ними и еще 300 участниками мы обсудили, чем живут фронтендеры Mail.ru Group и каково это, работать с высоконагруженными сервисами.

Особенности Google PageSpeed: улучшение оценки сайта и его рейтинга в поиске

Время на прочтение8 мин
Охват и читатели61K
Материал, перевод которого мы сегодня публикуем, посвящён рейтингу скорости сайтов, который можно вычислить с помощью Google PageSpeed Insights.

Ни для кого не секрет то, что скорость сайта в наше время стала одной из его важнейших характеристик. Чем быстрее сайт загружается и готовится к работе — тем выше может быть доход, который он приносит своему владельцу. Ускорение сайта означает снижение числа пользователей, которые, едва зайдя на этот сайт, покидают его, устав ждать загрузки его материалов. Особую значимость быстродействию сайта придаёт тот факт, что теперь показатели Google PageSpeed используются как один из факторов ранжирования сайтов в результатах поиска. В результате сегодня многие организации уделяют скорости своих сайтов самое пристальное внимание.


Читать дальше →

SEO в 2019 году не работает?

Время на прочтение5 мин
Охват и читатели15K
Постоянные споры на эту тему заставляют задуматься, почему многие считают, что привлечение естественного (не рекламного) трафика с поисковых систем не работает?

Читать дальше →

Ближайшие события

А не фигню ли я делаю? Зачем разработчики ходят в гембу

Время на прочтение5 мин
Охват и читатели23K
Привет, Хабр. Я тестировщик и очень верю в то, что гемба – это отличный инструмент для понимания своего продукта. Там хорошо получается ответить себе на вопрос: «А не фигню ли я делаю?» Сегодня хочу рассказать подробнее про его преимущества, а также инсайты, которые мы получили после похода в пиццерии.


Читать дальше →

Правила выбора JS-фреймворка

Время на прочтение13 мин
Охват и читатели6.7K
TL;DR

  • В статье не рассматриваются JS-фреймворки из списка TOP-3
  • При разработке на JS-фреймворке не из списка TOP-3 приходится решать на порядок больше технических вопросов, чем это ожидается в начале разработки
  • История основана на реальных событиях
Читать дальше →

Приглашаем на митап по frontend-разработке в высоконагруженных сервисах

Время на прочтение2 мин
Охват и читатели4.4K


27 июня команда Почты Mail.ru проведёт SmartMail Meetup, посвященный frontend-разработке. В программе митапа — технические доклады о frontend-разработке Почты. Обсудим, чем живут фронтендеры Mail.ru и каково работать с высоконагруженными сервисами.

Читать дальше →

Готовимся к 2020 году: 8 трендов клиентской JavaScript-разработки, о которых нужно знать

Время на прочтение7 мин
Охват и читатели57K
Автор материала, перевод которого мы сегодня публикуем, говорит, что хочет поделиться с читателями прогнозом, который касается развития веб-технологий на ближайшие годы. В частности, здесь речь пойдёт о том, что, по мнению автора, фронтенд-разработчикам, вероятно, стоить начать изучать уже сегодня.

Всё, что связано с JavaScript, очень быстро развивается. Это касается и того, что можно отнести к сфере веб-разработки. В наши дни те, в основе чьих проектов не лежат самые современные технологии, начинают особенно сильно ощущать разрыв между тем, чем они пользуются, и тем новым, что появляется едва ли не ежедневно. К таким технологиям можно отнести Webpack, React, Jest, Vue, Angular в их современном состоянии. В то время как «население» мира фронтенд-разработки, включающее в себя технических специалистов и программистов, постоянно растёт, этот мир стремится к стандартизации. Появление новых технологий и инструментов уже меняет ситуацию.



Можно с изрядной долей уверенности говорить о том, что общим трендом развития фронтенд-технологий будет стандартизация разработки пользовательских интерфейсов. В частности, речь идёт о композиции, основанной на компонентах, о стремлении к модульности систем. Эта тенденция воздействует практически на всё — от стилизации до тестирования и даже до управления состоянием приложений. В этот тренд можно включить технологии, построенные вокруг веб-компонентов, ES-модулей, сюда же попадают соответствующие инструменты и многое другое.
Читать дальше →

Приключения в отдельном потоке. Доклад Яндекса

Время на прочтение11 мин
Охват и читатели6.9K
Как работать с изображениями на клиенте, сохраняя плавность UI? Разработчик интерфейсов Павел Смирнов рассказал об этом на основе опыта разработки поиска по фотографиям на Маркете. Из доклада можно узнать, как правильно использовать Web Workers и OffscreenCanvas.



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

Читать дальше →

Как я писал свой мониторинг

Время на прочтение4 мин
Охват и читатели14K
Решил поделиться своей историей. Может даже кому пригодится подобное бюджетное решение всем известной проблемы.

Когда я был молод и горяч и не знал, куда девать свою энергию, я решил немного пофрилансить. Мне удалось быстро набить рейтинг и я нашёл пару постоянных клиентов, которые попросили поддерживать их сервера на постоянной основе.
Читать дальше →

Улучшаем производительность ПО с инструментами Intel для разработчика. Численное моделирование астрофизических объектов

Время на прочтение3 мин
Охват и читатели2.8K
Мы начинаем цикл статей, рассказывающих о различных ситуациях, в которых использование инструментов Intel для разработчиков позволило существенно повысить скорость работы программного обеспечения и улучшить его качество.

Наша первая история произошла в Новосибирском Университете, где исследователи разрабатывали программное средство для численного моделирования магнитогидродинамических проблем при ионизации водорода. Данная работа проводилась в рамках глобального проекта моделирования астрофизических объектов AstroPhi; в качестве аппаратной платформы использовались процессоры Intel Xeon Phi. В результате использования Intel Advisor и Intel Trace Analyzer and Collector производительность вычислений увеличилась в 3 раза, а скорость решения одной задачи сократилась с недели до двух дней.


Читать дальше →