Чтобы установить бюджет для количества и размера ресурсов на странице добавьте файл budget json
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
"2018" : |
"January" : |
"food" : 240.5 , |
"heating" : 89.2 , |
"rent" : 1709.10 |
>, |
"February" : |
"food" : 202.5 , |
"heating" : 112.2 , |
"rent" : 1709.10 |
>, |
"March" : |
"food" : 320.5 , |
"heating" : 45.2 , |
"rent" : 1709.10 |
> |
>, |
"2019" : |
"January" : |
"food" : 120.5 , |
"heating" : 88.2 , |
"rent" : 1809.10 |
>, |
"February" : |
"food" : 102.5 , |
"heating" : 122.2 , |
"rent" : 1809.10 |
>, |
"March" : |
"food" : 120.5 , |
"heating" : 35.2 , |
"rent" : 1809.10 |
> |
>, |
"2020" : |
"January" : |
"food" : 220.5 , |
"heating" : 18.2 , |
"rent" : 1909.10 |
>, |
"February" : |
"food" : 223.5 , |
"heating" : 12.2 , |
"rent" : 1909.10 |
>, |
"March" : |
"food" : 120.5 , |
"heating" : 25.2 , |
"rent" : 1909.10 |
> |
> |
> |
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
Поисковый маркетинг или SEM (Search Engine Marketing) — это набор действий, направленных на увеличение потока клиентов на сайт через ул.
Как и для чего необходимо уменьшать вес страниц сайта?
Мы сейчас потребляем значительно больше информации, чем какое-либо поколение за всю историю человечества. Люди сидят в социальных сетях.
Обновление Google Page Experience и новый фактор ранжирования Core Web Vitals
В течение многих лет Google подчёркивал важность качества сайтов, их безопасности и удобства использования для пользователей. Занимая л.
Что может дать уменьшение загрузки сайта на 0,1 секунды на мобильных устройствах
Компании Akamai и SOASTA провели много исследований, в результате которых выявлено, что более половины посетителей покидают страницу, к.
Выбираем домен для сайта: на что следует обратить внимание
Выбор домена — одна из главных вещей, о которых необходимо подумать при создании сайта. Правильно подобранное доменное имя впечатляет п.
Юзабилити — удобство использования сайта: что это такое и рекомендации по его улучшению
Вы когда-нибудь закрывали сайт просто потому что загрузка занимала слишком много времени? Нет ничего утомительнее, чем ожидание пока эл.
Локальное SEO продвижение — как оптимизировать сайт под локальный поиск
В поисковой выдаче постоянно усовершенствуются алгоритмы, кроме того, она становится с каждым днём более персонализированной. Одним из .
Психология веб-дизайна: на что пользователи обращают внимание в первую очередь
Сайт для гаджетов. Или почему важно обращать внимание на руки пользователя
Персональные компьютеры и ноутбуки больше не являются основным инструментом, посредством которого люди получают информацию из интернета.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
"2018" : |
"January" : |
"food" : 240.5 , |
"heating" : 89.2 , |
"rent" : 1709.1 , |
"notes" : " January was cold " , |
"in_the_red" : false , |
"urls" : [ |
" http://www.example.com/budget/2018 " , |
" http://www.example.com/budget/2019 " |
] |
>, |
"February" : |
"food" : 202.5 , |
"heating" : 112.2 , |
"rent" : 1709.1 , |
"notes" : " Too much rent " , |
"in_the_red" : false |
>, |
"March" : |
"food" : 320.5 , |
"heating" : 45.2 , |
"rent" : 1709.1 , |
"notes" : " Notes for this time " , |
"in_the_red" : false |
> |
>, |
"2019" : |
"January" : |
"food" : 120.5 , |
"heating" : 88.2 , |
"rent" : 1809.1 , |
"notes" : " Was in the hole " , |
"in_the_red" : true |
>, |
"February" : |
"food" : 102.5 , |
"heating" : 122.2 , |
"rent" : 1809.1 , |
"notes" : " Doing good " , |
"in_the_red" : false |
>, |
"March" : |
"food" : 120.5 , |
"heating" : 35.2 , |
"rent" : 1809.1 , |
"notes" : " Had to pay for B-day " , |
"in_the_red" : false |
> |
>, |
"2020" : |
"January" : |
"food" : 220.5 , |
"heating" : 18.2 , |
"rent" : 1909.1 , |
"notes" : " This is a very very very long note. maybe too long " , |
"in_the_red" : false |
>, |
"February" : |
"food" : 223.5 , |
"heating" : 12.2 , |
"rent" : 1909.1 , |
"notes" : " Test it out " , |
"in_the_red" : false |
>, |
"March" : |
"food" : 120.5 , |
"heating" : 25.2 , |
"rent" : 1909.1 , |
"notes" : " So Winning " , |
"in_the_red" : true |
> |
> |
> |
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.
This repository tracks the current budget.json format as well as upcoming changes and features. budget.json is the format used by Lighthouse for declaring performance budgets.
NOTE: The Lighthouse npm module is updated periodically, so it doesn't necessarily reflect very recent code changes. Features affected by this are noted in the API docs below. If you don't want to wait for the updated npm package, you can install Lighthouse directly from Github to get the most up-to-date code.
Sample budget.json file
The budget.json file is an array containing one or more Budget objects.
This sample budget.json file below contains two Budget objects:
- The first budget applies to all pages except those with URL path starting with /blog . The budget sets the following thresholds: a 300KB limit on total page resources, a 150KB limit on total JavaScript resources, and a limit of 10 third-party requests.
- The second budget that applies to pages with a URL path starting with /blog . The budget sets the following thresholds: a 200KB limit on total page resources.
The Budget Object
This section provides more information on the properties that are a part of the Budget object.
Optional, String, Lighthouse 5.3 & up
The path property indciates the pages that a budget applies to. This string should follow the robots.txt format.
If path is not supplied, a budget will apply to all pages.
If a page's URL path matches the path property of more than one budget in budget.json , then the last matching budget will be applied. As a result, global budgets (e.g. "path": "/*" ) should be listed first in budget.json , followed by the budgets that override the global budget (e.g. "path": "/blog" ).
Examples
Match all URL paths.
"path": "/" (This is equivalent to writing "path": "/*" )
Match all URL paths starting with /articles .
Match URL paths within the uk/ directory and ending with shopping-cart .
This is an array of resourceSizeBudget objects. A resourceSizeBudget object contains two properties: resourceType and budget . resourceType is one of the resource types supported by budget.json . The budget property is defined in kilobytes and refers to the transfer size of a resource.
Example
This array contains two resource size budgets: a budget of 500KB for total resources & a budget of 300KB for script resources.
This is an array of resourceCountBudget objects. A resourceCountBudget object consists of two required properties: resourceType and budget . resourceType is one of the resource types supported by budget.json . budget is defined in number of requests..
Example
This array contains one resource count budget: a budget of 10 requests for third-party resources.
The following resource types are supposed by budget.json :
- document
- font
- image
- media
- other
- script
- stylesheet
- third-party
- total
- Support setting budgets for specific files.
- Support whitelisting of first-party domains.
- Support timing-based budgets.
- Support setting budgets for the change in resource size(s).
If you have feedback or ideas on the budget.json format, please file an issue in this repo to get involved.
If you are interested in contributing to the Lighthouse budget.json implementation, please refer to the Lighthouse repo.
От автора: проверка производительности сайта — одно из важнейших действий для его успешной работы. Но простого аудита может быть недостаточно. На днях я спросила в Твиттере, сколько людей создали и применяют бюджет производительности для веб-сайта, над которым они работают. Не удивительно, что подавляющее большинство людей этого не делают.
До недавнего времени я также не устанавливала официальный бюджет производительности и не применяла его. Это не значит, что я никогда не проводила аудит производительности. Я часто использую такие инструменты, как PageSpeed Insights, и принимаю отзывы, чтобы внести улучшения. Но я никогда не создавала список метрик, которым должен соответствовать сайт, и не применяла их с помощью какого-то автоматизированного инструмента.
Причиной этого было незнания того, какие именно цифры мне следует использовать для бюджетов, в сочетании с отсутствием различий между установкой бюджета и его проверкой / исполнением. Вот почему я была очень взволнована, когда в этом году на Google I/O команда Lighthouse объявила о поддержке бюджетов производительности, которые можно интегрировать с Lighthouse. Теперь мы можем определить простой бюджет производительности в файле JSON, который будет протестирован в рамках аудита Lighthouse!
Бюджет Lighthouse
Как мы знаем, существует бесчисленное множество показателей производительности. От ориентированных на пользователя, таких как Время до первого взаимодействия, до ориентированных на ресурсы метрик, таких как размер файлов JavaScript.
Бюджет производительности, который мы можем установить для Lighthouse, ориентирован на последнее и основан исключительно на исходных значениях активов и ресурсов вашего сайта. Мы можем создать два типа бюджетов:
Количество данного ресурса — например, бюджет, который задает загрузку только 2 файлов javascript с данной страницы.
JavaScript. Быстрый старт
Изучите основы JavaScript на практическом примере по созданию веб-приложения
Размер данного ресурса — например, бюджет, который задает, что данная страница загружает только 500 КБ JavaScript
Создание budget.json
Lighthouse ожидает, что бюджет производительности будет записан в файле JSON, обычно с именем budget.json.
Файл JSON настроен как массив объектов, каждый из которых представляет собой набор бюджетов для одного пути. Следует отметить, что в настоящее время Lighthouse поддерживает только один набор бюджетов для одного пути, что означает, что массив budgets.json должен иметь только один объект. Однако предполагается, что мы сможем указать бюджеты для разных путей в одном файле, поэтому он настроен таким образом с расчетом на будущее.
Основной объект бюджета организован по типу бюджета (resourceCounts или resourceSizes), каждый из которых содержит массив бюджетов для каждого типа ресурса. Например, давайте создадим budget.json, который задает следующий бюджет:
Читайте также: