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

Как мы получили 100% результативность Lighthouse для нашего приложения Vue.js

  1. Бегущий маяк
  2. Первая остановка: размер пачки
  3. Gutting moment.js: 1,75 МБ -> 1,58 МБ
  4. Потеря кода: 1.58MB -> 1.05MB (!)
  5. Удаление полного кода: 1.05Mb -> 1019.82KB
  6. Выборочный импорт начальной загрузки: 1019,82 КБ -> 934,75 КБ
  7. Вторая остановка: разделение кода
  8. Бегущий маяк снова
  9. Заключение

С момента запуска мы не обращали слишком много внимания на производительность основного веб-приложения Checkly. Позор нам. Что может быть лучше для этого, чем публикация превосходного Стоимость Javascript в 2018 году Адди Османи от Google?

TL; DR: в нашем приложении Vue.js потребовалось около полдня, чтобы перейти от ужасных 34 к 100 очкам Lighthouse.

В статье Османи рассказывается о том, почему важна производительность в Интернете и на мобильных устройствах, какое отношение к этому имеет Javascript и какие проблемы существуют в отношении мобильных устройств, типов устройств, циклов рендеринга, загрузки и т. Д. Прочтите его, если вы не знакомы с этими темами. Суть это:

  1. Javascript - самая дорогая часть производительности вашего сайта. Не изображения, не CSS.
  2. Более быстрые сайты увеличивают доход.
  3. Оптимизация JavaScript для повышения производительности - это многоэтапный процесс, ориентированный на аудиторию и устройство.

Если вы жаждете большего, прыгайте на высокопроизводительный браузер Илья Григорик (также в Google) для более глубокого знания этой темы.

Бегущий маяк

Чтобы узнать текущую производительность приложения Checkly, я запустил Маяк на экране входа в систему. Lighthouse - это инструмент аудита производительности, встроенный в каждый браузер Chrome.

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

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

  • Устройство: настольное. Использование мобильного телефона или планшета на самом деле не является фактором (пока?) Для текущей аудитории Checkly.
  • Аудиты: показатели. Другие варианты - SEO, доступность и т. Д. Мы заинтересованы только в производительности здесь.
  • Дросселирование: не дросселирование. Checkly - это приложение B2B, DevOps. 99% пользователей будут использовать его в офисе. Производительность 3G и 4G не так уж важна.

Обратите внимание, что настройки устройства и регулирования имеют значение для сайта и блога, которые вы сейчас читаете. По крайней мере 25% посетителей checklyhq.com находятся на мобильном телефоне.

Мы провели тест, и результаты говорят сами за себя. Оценка 34. Много красных букв и предупреждающих знаков. Довольно ужасно 😞

С момента запуска мы не обращали слишком много внимания на производительность основного веб-приложения Checkly

Некоторые «основные моменты»:

  • Первая значимая краска занимает более 6 секунд.
  • Процессор занят на целую секунду дольше.

Первая остановка: размер пачки

У меня было ноющее чувство, что количество Javascript, которое мы отправляли, было «неоптимальным». Webpack имеет большой Bundle Analyze Плагин, который говорит вам, что именно вы упаковываете (и отправляете). Быстрая установка NPM и пара строк в конфигурации Webpack:

npm i -D webpack-bundle-analyzer const BundleAnalyzerPlugin = require ('webpack-bundle-analyzer'). BundleAnalyzerPlugin ... плагины: [новый BundleAnalyzerPlugin ()] ...

Это запустит браузер после каждой сборки и покажет вам что-то похожее на это:

Это запустит браузер после каждой сборки и покажет вам что-то похожее на это:

Да. Это всего 2,01 МБ (несжатого) javascript, который поставляла Checkly. Это далеко от 170 КБ сжатых / 0,7 МБ несжатых файлов, что рекомендуется в статье о стоимости Javascript.

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

Сначала мы атаковали файл vendor.js .

Gutting moment.js: 1,75 МБ -> 1,58 МБ

Moment.js - отличная библиотека для обработки даты и времени. Он поставляется с полным набором файлов локали. Мы не используем ничего в нашем приложении. К сожалению, нет возможности установить их по желанию, и получается мы не единственные, кто немного раздражен этим , Мы избавились от локали, используя встроенный плагин Webpack Ignore:

плагины: [новый webpack.IgnorePlugin (/^\.\/ locale $ /, / moment $ /)]

Потеря кода: 1.58MB -> 1.05MB (!)

Codemirror используется на экране редактирования проверки браузера в приложении Checkly. Как и в случае с Moment.js, он поставляется с целым набором стилей и тем кода, которые мы не используем. К счастью, уже была тонкая оболочка Vue.js для уменьшенной установки Codemirror, которая называется VueCodeMirrorLite , После незначительных изменений кода и отдельной установки темы Monokai и стиля кода Javascript мы сэкономили почти 0,5 МБ!

Удаление полного кода: 1.05Mb -> 1019.82KB

Быстрое сканирование кода показало, что мы использовали только четыре метода Lodash (clonedeep - это золото). Мы отказались от полной установки и просто установили методы, которые мы фактически использовали. Слава людям Lodash за поддержку этого.

Выборочный импорт начальной загрузки: 1019,82 КБ -> 934,75 КБ

Части пользовательского интерфейса используют Vue.js-ified версию Bootstrap, которая называется Bootstrap Vue , Просто импортировав модули из библиотеки, которую мы используем (модалы, всплывающие подсказки, навигация и т. Д.), Мы получили комплект vendor.js размером менее 1 МБ.

Вторая остановка: разделение кода

Чтобы атаковать файл app.js , мы посмотрели на разделение кода. Идея разделения кода состоит в том, что вы используете нужное количество JavaScript в нужный момент, используя вызовы XHR. Это означает, что для загрузки полной версии приложения не требуется больших первоначальных затрат. Это должно привести к более быстрому времени для первой краски и последующего взаимодействия.

Эта замечательная статья на разделение кода в Vue.js описывает мелкие мелочи. Суть это:

  1. Вы хотите использовать компоненты, «Один файл» или нет. (в Checkly мы используем отдельные .pug и .scssfiles)
  2. Вы хотите использовать Webpack. Прочтите упомянутую статью о том, как это настроить. Если вы используете Vue-CLI для запуска приложения Vue, у вас все хорошо.
  3. Вы хотите разделить по маршруту. Существуют и другие варианты, но это, безусловно, самый простой и имитирующий традиционные (не SPA) сайты, запрашивая ресурсы для навигации по страницам.

Я был приятно удивлен, что буквально единственными изменениями, необходимыми в нашем приложении, был список операторов import в нашем файле router.js. Это может работать не для всех, но в приложении Checkly каждый маршрут аккуратно отображается на один компонент master / container

Это:

import Login from './components/authentication/login' import Registration from './components/authentication/signup' ...

Становится так:

const Login = () => импорт ('./ компоненты / аутентификация / логин') const Registration = () => импорт ('./ компоненты / аутентификация / регистрация') ...

Теперь вы эффективно меняете стандартный импорт из операторов в специальные операторы import () Webpack, обеспечивая разделение и асинхронную загрузку ваших компонентов. Ваш код назначения маршрута даже не меняется:

маршруты: [{путь: '/ логин', имя: 'логин', компонент: логин}, {путь: '/ регистрация), имя:' регистрация ', компонент: регистрация} ...

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

Бегущий маяк снова

Мы были очень довольны уменьшением размера пакета и тем, насколько легко было реализовать разбиение кода. Мы не были готовы к огромному влиянию, которое это имело. Снова запустив Lighthouse - те же настройки, что были упомянуты выше - нарисовал совершенно другую картину: счет 100 и зеленый текст везде! Вот Это Да!

Вот Это Да

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

домашняя панель приборов

проверить результаты

проверить результаты

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

Заключение

Приведенные выше оптимизации заняли от 4 до 6 часов, чтобы их внедрить, протестировать и развернуть. Большая часть этого времени была потрачена на незначительные изменения кода для оптимизации используемых модулей и библиотек. Время хорошо проведено!

Просто не забудьте работать в итерациях, где вы

  1. Таргетинг на область.
  2. Оптимизация.
  3. Измерьте результаты.
  4. GOTO 1.

изображение баннера: «Скоростной туннель» Секино Дзюнъитиро (конец 20 века) - Ukiyo.org

Похожие

SEO мертв, как мы его знаем
По слухам, SEO мертва Аббревиатура «SEO» уже давно подвергается критике, и многие скептики твердо придерживаются мнения, что поисковая оптимизация мертва. Зачем? Некоторые приписывают эту теорию тому факту, что потребительские требования изменились (что ключевые слова, которые раньше привлекали посетителей на ваш сайт, просто больше не используются), и что конкуренция за эти ключевые слова создала конкурентный сценарий, создав спрос-предложение цикл, который поднял цены до небес.
Изображения как инструмент SEO
Изображения, размещенные на сайтах, могут быть оптимизированы для SEO. Определенные методы SEO в изображениях позволяют увеличить целевой трафик на сайт через поисковые системы. Поисковая оптимизация, обычно называемая SEO, может улучшить видимость веб-сайтов, если они хорошо работают,
Как нырять с морскими ежами и как их есть
У всех есть детские воспоминания: заводить друзей в спортивном лагере или тратить дни на игры в Super Mario Kart. Мой ты спрашиваешь? Они включают в себя колючих и потенциально причиняющих боль морских существ. Читайте дальше, чтобы узнать, как нырять с морскими ежами и как их есть. Летние детские воспоминания! Они есть у всех: бегают в разбрызгивателях, заводят лучших друзей в спортивном лагере, тратят целые
Как сделать SEO в 2013 году
Стратегии SEO значительно изменились за последний год, особенно после двух основных обновлений Google: Panda и Penguin. С каждым днем ​​Google становится все умнее, и специалистам по SEO приходилось менять все свои стратегии и методы, чтобы сайты, которыми они управляют, не подвергались наказанию и продолжали иметь хорошие результаты в поиске Google.
Как поисковая система оптимизирует WordPress
... кода и будут отображаться поисковыми системами в результатах поиска в качестве вашей ссылки. ### Раздел 3 - Настройки ключевых слов Этот раздел посвящен мета-ключевым словам, эти ключевые слова имеют очень небольшое значение в сегодняшнем SEO, люди из Google говорят это сами, так что вы можете верить, что это правда, и больше не является значением для Google. Так что оставьте это отключенным. ### Раздел 4 - Настройки заголовков Этот раздел посвящен заголовкам вашего
Позиционирование сайтов
Компания SEOdot готовит для своих клиентов продуманные стратегии позиционирования в поисковых системах (SEO). Почему стоит доверить SEOdot SEO? Мы используем проверенные, эффективные методы, чтобы гарантировать, что результаты нашей работы будут устойчивыми и обеспечить
100% обучение гарантировано SEO обучение
100% Обучение Гарантировано Онлайн Обучение SEO Нам нужны поисковые системы для наших интернет-инициатив, чтобы привлечь больше аудитории. На данный момент SEO является наиболее важным ресурсом для привлечения посетителей на наши сайты. SEO-тренинг, который я редактировал, призван помочь вам в поисковой оптимизации. Неважно, являетесь ли вы новичком, экспертом, автором контента, разработчиком, онлайн-маркетологом или владельцем бизнеса. Я научу вас
SEO поисковая оптимизация
Получение сайтов первым в поисковых системах - это процесс, который обеспечит поток новых клиентов, которые ищут именно тот товар или услугу, которые вы предлагаете! Подавляющее большинство пользователей Интернета регулярно используют так называемые поисковые системы (наиболее известными представителями являются Google , Yahoo или чешские Seznam.cz или Centrum.cz ). Это сложные роботы, которые просматривают
Как SEO изменился за последние годы?
За прошедшие годы SEO изменилось во многих отношениях, но если вы понимаете, где оно сейчас, ваш бизнес может увидеть невероятные результаты, несмотря на то, что он выделяется среди конкурентов. В соответствии с
Плохие обратные ссылки: как вы их узнаете и как от них избавиться?
Как вы, вероятно, знаете, ссылки с внешних веб-сайтов (обратных ссылок) на ваш сайт полезны для вашего SEO. Чем больше качественных обратных ссылок, тем лучше будет ваш сайт в результатах поиска. Плохие обратные ссылки или обратные ссылки низкого качества вредны для вашего SEO. Но как вы узнаете эти плохие обратные ссылки? И еще важнее: как от этого избавиться? В этой статье из двух частей о плохих обратных ссылках мы максимально поможем вам обнаружить и удалить эти ссылки. Теперь первая
Влияние сильной метки на ваш SEO
... gt; или <b> используются на языке html для выделения текстового элемента. Между сильным и б есть разница. <strong> определяет его содержимое как логическое состояние, а <b> определяет его содержимое как физическое состояние. Сделать простой сильный тег с смысловым смыслом. Важно то, что находится в этом теге, и его можно стилизовать. Тег b просто выделит текст. Чтобы узнать больше, разработчики Mozilla все объясняют

Комментарии

Мы можем взять пример для того, чтобы разобраться в этом - как мы генерируем доверие, когда мы новички на рынке?
Мы можем взять пример для того, чтобы разобраться в этом - как мы генерируем доверие, когда мы новички на рынке? Никто не знает, кто или что вы, и ваши возможности. Но нам нужно убедить их. И, чтобы убедить кого-то, взаимодействие должно произойти, а это значит, что взаимодействие - это первый шаг к тому, чтобы представить бизнес кому-то. И постоянное взаимодействие порождает дружеские отношения, которые будут медленно говорить людям, заслуживаете ли вы доверия или нет. Это тот же самый подход,
Когда рабочие заказы поступают через смартфон, и мы знаем, что, если мы не ответим немедленно, мы не сможем получить такую ​​возможность снова?
Когда рабочие заказы поступают через смартфон, и мы знаем, что, если мы не ответим немедленно, мы не сможем получить такую ​​возможность снова? Когда мы не можем даже поговорить с другим человеком о стоящей перед нами задаче, и мы должны работать без перерыва, просто чтобы получить минимальную заработную плату? Так же, как люди коммодитизируются, так же поступают и другие слои стоимости: В SEO в течение ряда лет многие рисуют бренд как решение для всего. Но рассмотрите
Но как мы можем улучшить читаемость нашего текста?
Но как мы можем улучшить читаемость нашего текста? Сначала я начну с последней точки. 14,7% предложений с более чем 20 словами действительно в зеленом. Но паршивая оценка Flesch Reading Ease советует Йоасту сокращать предложения. Здесь инструмент также помогает нам практически. Переключитесь в визуальный режим (вверху справа). Теперь перейдите к плагину Yoast SEO и читабельности. Здесь снова раздел предложений с более чем 20 словами. Перед ним символ, глаз. Нажмите на это. И все
Как вы думаете, каким образом один лучше другого, и как вы видите, как один помогает другому?
Как вы думаете, каким образом один лучше другого, и как вы видите, как один помогает другому? Об авторе: Кристи Хайнс - независимый писатель, блогер и энтузиаст в социальных сетях. Ее блог Kikolani посвящен блог-маркетинг , включая стратегии социальных сетей и советы по ведению блогов.
О " Как сделать предложение цены цитатой SEO ' " Как мы узнаем, что агентство SEO заслуживает доверия?
Как вы думаете, каким образом один лучше другого, и как вы видите, как один помогает другому? Об авторе: Кристи Хайнс - независимый писатель, блогер и энтузиаст в социальных сетях. Ее блог Kikolani посвящен блог-маркетинг , включая стратегии социальных сетей и советы по ведению блогов.
Итак, где же эти неуловимые авторитеты, как вы их идентифицируете и, самое главное, как вы пытаетесь получить ссылку от одного из них?
Итак, где же эти неуловимые авторитеты, как вы их идентифицируете и, самое главное, как вы пытаетесь получить ссылку от одного из них? Что такое авторитетный сайт? Давайте начнем с определения того, чем не является авторитетный сайт. Это не всегда лучший результат в Google. Это не всегда даже можно найти на первой странице, в зависимости от дня и последних алгоритмических изменений. Определенные ниши, как правило, тоже являются спамерскими, а главные результаты - полная хрень.
Поэтому мы подошли к камню преткновения - как измерить SEO, что мы должны отслеживать и почему?
Поэтому мы подошли к камню преткновения - как измерить SEO, что мы должны отслеживать и почему? KPI и метрики: какая разница? Давайте начнем с одной очень популярной ошибки, которую допускают многие: предположим, что KPI и метрики являются синонимами. На самом деле это не так. Что такое показатель SEO? SEO-метрика - это параметр или значение, которое используется маркетинговыми SEO-командами для отслеживания, мониторинга и сравнения процессов
Как еще мы могли бы управлять SEO, не понимая, как у нас дела?
Как еще мы могли бы управлять SEO, не понимая, как у нас дела? Обучение - это процесс, который предполагает постоянную обратную связь. Неудивительно, что и SEO тоже. Есть много способов проверить прогресс вашей страницы и оценить ее как 2018, а не 2014. Давай, пойдем в путешествие вниз по рейтингу страницы. Понимание PageRank в 2018 году
Gt;>> Вы оптимизируете свой сторонний контент?
gt;>> Вы оптимизируете свой сторонний контент? Содействие неправде и некомпетентности В течение многих лет в Бухаресте существует компания, продвигаемая с помощью ложных рекламных сообщений. Некая интернет-антенна 3, которая не предназначена для пенсионеров, но тех пользователей интернета, которые не читали книги в своей жизни, ничего не узнали в школе, но их деньги были получены в результате кражи. Запад. И они вернулись, чтобы сделать интернет-магазин или
Теперь, когда мы знаем, что плохо, как мы можем определить проблемы?
Теперь, когда мы знаем, что плохо, как мы можем определить проблемы? Обнаружение конкретной проблемы с вашими перенаправлениями зависит от стороннего программного обеспечения, разработанного специально для определения кодов состояния в масштабе. Некоторые из наших любимых: A1 Website Analyzer : Промышленный сканер для серьезных сканирований, независимо от размера
Как мы нацеливаемся на место, где мы хотим, чтобы результаты появились?
Как мы нацеливаемся на место, где мы хотим, чтобы результаты появились? Есть люди, которые ищут информацию, для которой было бы хорошо выделить наш сайт, категорию продукта или определенный продукт, даже статью в блоге, я всегда рекомендовал создавать статьи в блоге, потому что это важный компонент для всего Ваш бизнес, в том числе важная часть процесса SEO. Вы должны сделать SEO, чтобы получить различные типы результатов. Следующим и, вероятно, удивительным является то,

Пока?
Зачем?
Мой ты спрашиваешь?
Почему стоит доверить SEOdot SEO?
Но как вы узнаете эти плохие обратные ссылки?
И еще важнее: как от этого избавиться?
Мы можем взять пример для того, чтобы разобраться в этом - как мы генерируем доверие, когда мы новички на рынке?
Когда рабочие заказы поступают через смартфон, и мы знаем, что, если мы не ответим немедленно, мы не сможем получить такую ​​возможность снова?
Когда мы не можем даже поговорить с другим человеком о стоящей перед нами задаче, и мы должны работать без перерыва, просто чтобы получить минимальную заработную плату?
Но как мы можем улучшить читаемость нашего текста?
Реклама
Навигация сайта
Реклама
Популярные новости
Хорошая туристическая компания

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

Финансы и бизнес
Чтобы повысить производительность и результативность бизнеса, руководителям и персоналу маркетинга, сбыта, цепочки поставок, производства необходимо понимать конкретную ситуацию, что происходит и куда

Курсы изучения китайского языка
Хотите получить помощь в изучении китайского языка, но не знаете кому можно доверять ? Отвечаю вам товарищи, ещё недавно я был таким же, как вы ровно до того момента, как узнал здешний адрес. Друзья,

Выдача свидетельства государственной регистрации
Вот пожалуй и все, что нужно знать о документах которые Вы получите из налоговой инспекции после регистрации ООО. Процедура государственной регистрации общества с ограниченной ответственностью теперь

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

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

Виза в Китай
Виды виз в КНР определяются целью поездки и сроком их действия. В целом это классификация не отличается от перечня виз в другие государства: основными являются туристическая, деловая, учебная, рабочая

Реклама
Облако тегов