We are talking a lot about performance, how it can be improved, which tools to use for performance improvements but less about how to keep reached performance on a proper level.

So, let’s take a look at tools which can help you to do so:

Size Limit

Size Limit is a tool to prevent JavaScript libraries bloat. With it, you know exactly for how many kilobytes your JS library increases the user bundle.

Что все они означают?

Измерение производительности загрузки страницы — это сложная задача. Чтобы сделать её проще, инженеры компании Google вместе с сообществом работают над прогрессивными веб-метриками, или ПВМ.

Что такое ПВМ и зачем они нужны? Для начала, давайте сделаем небольшой экскурс в историю браузерных метрик. Некоторое время назад мы имели всего две точки (события) для измерения производительности:

  1. DOMContentLoaded срабатывает, когда страница загрузилась, но скрипты только начали выполняться.
  2. Событие load срабатывает, когда страница полностью загрузилась и пользователь может полностью с ней взаимодействовать.

Если взглянуть на трейс сайта Reddit (Chrome DevTools помогает нам, помечая эти точки синей и красной линиями), мы можем увидеть почему эти метрики…

Measuring performance of page loading is a hard task. Hence Google Developers together with the community are working on Progressive Web Metrics (PWM’s).

What are PWM’s and why do we need them?

A bit history of browser metrics.

A while ago we had 2 main points (events) for measuring performance:

DOMContentLoaded — fired when page is loaded but scripts just started to be executed.

load event which is fired then a page is fully loaded and a user can engage with either page or application.

If we take a look, as example, at timeline trace of reddit.com (Chrome Dev Tools…

Мобильные устройства используются всё чаще, чем десктопные и веб столкнулся с проблемой медленных приложений. Многие из нас тестируют приложения в Chrome и потом сразу выкатывают его в продакшен. Лишь немногие разработчики пытаются тестировать свои приложения на реальных мобильных устройствах и реальных сетях.

Я попытался следовать советам Сэма (частично) и протестировал сайт документации фреймворка Vue.js.

Тестовое окружение




As far as mobile devices became more usable then desktops web faced the problem with slow applications. A lot of us test applications in Chrome and then ship. Not many developers try to test their applications on real devices and real networks.

Lighthouse for Progressive Web Metrics

Improving your web page loading is not a trivial task. It takes a lot of time and requires a lot of knowledge. To make it easier we have pwmetrics library which should help you with that.

How do you always measure? Let me guess — you open chrome, timeline tab and so on and so far.

What do we provide you with? Command in console — pwmetrics.

pwmetrics uses Lighthouse API for getting metrics values like First Contentful Paint, First Meaningful Paint, First Interactive, Perceptual Speed Index (more about it), First Visual Changing, Visually Complete 100% and Visually Complete 85%.

This article is going to be helpful for people who just started learn javascript frameworks. Some of you might be aware about this and other articles which are describing how it’s hard to dive into javascript world. We decided to write this article to make lives easier for people want join javascript community.

There are a lot of libraries, frameworks, tools and other stuff which might confuse javascript newcomer. If you knew something about javascript and want to try some javascript framework then we propose Marionette.js.

In this article we will try to create start page creating html page and…

Artem Denysov

Software Engineer: @Ciklum, @EPAMSystems • Makes developers and users lives easier helping them with #webperf • Speaker • @__treo advocate

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store