Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Влияние rel="preload" на попугаев

RGB

Автор: ,
в Курилка

 Share

Recommended Posts

RGB Grand Master

RGB

Опубліковано:
Опубліковано:

Недавно мне написал один товарищ-разработчик (имя которого из соображений профессиональный этики раскрывать не будем):

Цитата

Зашел у клиента и увидел preload
<link href="catalog/view/javascript/jquery/jquery-2.1.1.min.js" rel="preload" as="script"></link>
.....
уберите preload
Реально с preload скриптов 40 баллов
Убираем получаем 90+
Суть в том preload совершенно не эффективен

 

Лирическое отступление, если кто не знает, что это такое:

https://developer.mozilla.org/ru/docs/Web/HTML/Preloading_content

Значение preload атрибута rel в элементе <link> позволяет вам запросить данные через <head> вашего HTML, указав необходимые вашей странице ресурсы ещё в начале её жизненного цикла, - до того, как сработает основной механизм отрисовки браузера. Это гарантирует, что предзагрузчик нужных ресурсов с меньшей вероятностью заблокирует отрисовку страницы, тем самым улучшая её производительность.

 

Пример:

Идеальный сценарий использования предзагрузчика контента описан в документации https://web.dev/uses-rel-preload/ 

Когда у нас на странице есть некая критическая цепочка ресурсов, к примеру, index.html содержит app.js, а в последнем идет подгрузка пары ресурсов styles.css и ui.js, то наша страница, очевидно, не будет полностью загружена, пока эта парочка ресурсов не будет также загружена и выполнена.

Without preload links, styles.css and ui.js are requested only after app.js has been downloaded, parsed, and executed.

Соответственно, узким местом такого сценария является загрузка и обработка app.js, до выполнения которой про вышеупомянутую парочку ресурсов никто не знает. Использование rel="preload" позволяет "вклиниться" в этот процесс и запросить загрузку дополнительных ресурсов (та самая парочка styles.css и ui.js) ДО того, как будет загружен и обработан app.js, поэтому при использовании предзагрузчика картинка заметно меняется и нам не приходится ждать, пока поочередно загрузятся все ресурсы, мы сразу заранее требуем их загрузчки: 

<head>
  ...
  <link rel="preload" href="styles.css" as="style">
  <link rel="preload" href="ui.js" as="script">
  ...
</head>

after.png

Так вот, у меня в шаблоне (да и не только у меня и не только в шаблонах) rel="preload" используется "втупую" для всех ресурсов, поскольку я не знаю, какие ресурсы могут оказаться критически важными, ведь отвечаю только за ресурсы шаблона, а пользователь может дополнительно поставить модули и подключать что угодно еще, что может быть как критичным, так и нет.

 

Этот сценарий не особо эффективен и практического смысла в таком использовании rel="preload" мало, но я был уверен, что никакого заметного влияния на попугаев PageSpeed это иметь не может, поэтому, чтобы на практике подтвердить это, показал своему оппоненту результат использования/отсутствия rel="preload" на демке шаблона (много текста и картинок):


 

Спойлер

 

Чтобы не быть голословным, рассказывая про прибавку мифических 20-40 баллов, вот результаты трех последовательных проверок при использовании "тупого" предзагрузчика ресурсов, т.е. все ресурсы имеют rel="preload" (для чистоты эксперимента минификация отключена и все ресурсы вываливаются всем скопом, без объединения в один файл):

Спойлер 


<!-- mmr2 2.7.2 ocs2.3 -->
<style>@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:300;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.eot');src: local('Open Sans Light'), local('OpenSans-Light'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:400;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.eot');src: local('Open Sans'), local('OpenSans'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:700;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.eot');src: local('Open Sans Bold'), local('OpenSans-Bold'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'FontAwesome';font-weight:normal;font-style:normal;src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');src: url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('catalog/view/javascript/font-awesome/fonts/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('catalog/view/javascript/font-awesome/fonts/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg')}</style>
  <link href="catalog/view/javascript/jquery/jquery-2.1.1.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
  <link href="catalog/view/javascript/bootstrap/js/bootstrap.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
  <link href="catalog/view/javascript/jquery/moneymaker2/velocity.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/velocity.min.js"></script>
  <link href="catalog/view/javascript/common.moneymaker2.js?v=272" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/common.moneymaker2.js?v=272"></script>
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js"></script>
    <link href="catalog/view/javascript/jquery/moneymaker2/background-check.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/background-check.min.js"></script>
    <link href="catalog/view/javascript/jquery/moneymaker2/jquery.ba-throttle-debounce.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/jquery.ba-throttle-debounce.min.js"></script>
    <link href="catalog/view/javascript/jquery/moneymaker2/bootstrap-hover-dropdown.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/bootstrap-hover-dropdown.min.js"></script>
    <link href="catalog/view/javascript/jquery/moneymaker2/jquery.mask.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/jquery.mask.min.js"></script>
    <link href="catalog/view/javascript/jquery/moneymaker2/js.cookie.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/js.cookie.js"></script>
    <link href="catalog/view/javascript/jquery/moneymaker2/livesearch.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/livesearch.js"></script>
    <link href="catalog/view/javascript/jquery/moneymaker2/sidebars.responsive.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/sidebars.responsive.js"></script>
    <link href="catalog/view/javascript/jquery/moneymaker2/scrolltop.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/scrolltop.js"></script>
    <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="preload" as="style" />
  <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="preload" as="style" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="stylesheet" type="text/css" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="preload" as="style">
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="stylesheet">
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.moneymaker2.css" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.moneymaker2.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.transitions.css" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.transitions.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203134351" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203134351" type="text/css" rel="stylesheet" media="screen" />

 

Видим следующее кол-во попугаев:

Спойлер

 

f88b94196821ae73e1a7f7a0a35c3b79.png

3f00d50a979782a72bb6c5a7a4cbbbf7.png

 

А вот результаты таких же трех последовательных замеров, когда предзагрузчик убран:

Спойлер 


<!-- mmr2 2.7.2 ocs2.3 -->
<style>@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:300;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.eot');src: local('Open Sans Light'), local('OpenSans-Light'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:400;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.eot');src: local('Open Sans'), local('OpenSans'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:700;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.eot');src: local('Open Sans Bold'), local('OpenSans-Bold'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'FontAwesome';font-weight:normal;font-style:normal;src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');src: url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('catalog/view/javascript/font-awesome/fonts/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('catalog/view/javascript/font-awesome/fonts/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg')}</style>
  
  <script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
  
  <script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
  
  <script src="catalog/view/javascript/jquery/moneymaker2/velocity.min.js"></script>
  
  <script src="catalog/view/javascript/common.moneymaker2.js?v=272"></script>
    <script src="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js"></script>
    <script src="catalog/view/javascript/jquery/moneymaker2/background-check.min.js"></script>
    <script src="catalog/view/javascript/jquery/moneymaker2/jquery.ba-throttle-debounce.min.js"></script>
    <script src="catalog/view/javascript/jquery/moneymaker2/bootstrap-hover-dropdown.min.js"></script>
    <script src="catalog/view/javascript/jquery/moneymaker2/jquery.mask.min.js"></script>
    <script src="catalog/view/javascript/jquery/moneymaker2/js.cookie.js"></script>
    <script src="catalog/view/javascript/jquery/moneymaker2/livesearch.js"></script>
    <script src="catalog/view/javascript/jquery/moneymaker2/sidebars.responsive.js"></script>
    <script src="catalog/view/javascript/jquery/moneymaker2/scrolltop.js"></script>
    
  <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
    <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="stylesheet" type="text/css" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="stylesheet">
  
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
  
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.moneymaker2.css" type="text/css" rel="stylesheet" media="screen" />
  
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.transitions.css" type="text/css" rel="stylesheet" media="screen" />
  
  <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" />
  
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" />
  
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203134351" type="text/css" rel="stylesheet" media="screen" />

 

Попугаи:

Спойлер

 

6953874b228855dde462b90950e7facc.png

a2a768101de32c777ed9a776a6dff0d4.png

 


 

 

 

С preload:

56/72

55/69

57/70

 

Без preload:

56/70

52/69

54/70

 

Как видите, разницы вообще нет, ведь что мы сделали, добавив всем ресурсам rel=preload? Да ничего полезного (и вредного) в целом, мы объявили, что все ресурсы - критические, и их всех надо грузить в первую очередь, в результате пузомерка больше не ругается на традиционный пункт:

Устраните ресурсы, блокирующие отображение
И накидывает нам 1-2 попугая, которых можно списать на статистическую погрешность.

Изменилась ли фактическая скорость загрузки страницы? Да ничуть, ведь у нас как раньше все эти ресурсы грузились сразу, так и сейчас грузятся сразу.

 

Мой оппонент, продолжая спорить и подчеркивая свою важность и экспертность, ответил мне, что всему виной мой быстрый сервер:

Цитата

Вы можете сколько угодно на своем быстром сервер ставить эксперименты

Хотя по факту у меня на демо даже не VPS, но ладно - мы, как говорится, люди не гордые, иду на бесплатный Beget, разворачиваю там чистый движок и копию чистого шаблона и что же видим:

 

Спойлер

http://a975371k.beget.tech/

5088b830566a9c7e0566b8964b867ebd.png

Вот результат с чистой установкой шаблона со штатным rel="preload":

Спойлер 


<!-- mmr2 2.7.2 ocs2.3 -->
<style>@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:300;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.eot');src: local('Open Sans Light'), local('OpenSans-Light'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:400;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.eot');src: local('Open Sans'), local('OpenSans'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:700;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.eot');src: local('Open Sans Bold'), local('OpenSans-Bold'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'FontAwesome';font-weight:normal;font-style:normal;src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');src: url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('catalog/view/javascript/font-awesome/fonts/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('catalog/view/javascript/font-awesome/fonts/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg')}</style>
  <link href="catalog/view/javascript/jquery/jquery-2.1.1.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
  <link href="catalog/view/javascript/bootstrap/js/bootstrap.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
  <link href="catalog/view/javascript/jquery/moneymaker2/velocity.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/velocity.min.js"></script>
  <link href="catalog/view/javascript/common.moneymaker2.js?v=272" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/common.moneymaker2.js?v=272"></script>
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js"></script>
    <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="preload" as="style" />
  <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="preload" as="style" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="stylesheet" type="text/css" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="preload" as="style">
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="stylesheet">
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203190614" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203190614" type="text/css" rel="stylesheet" media="screen" />

 

Попугаи

Спойлер

229775315fcfbf2bf57b0f1765a4949e.png

0c48e0136a8cbdf7ec99db1f72fa3620.png

 

Убираю rel="preload":

Спойлер 


<!-- mmr2 2.7.2 ocs2.3 -->
<style>@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:300;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.eot');src: local('Open Sans Light'), local('OpenSans-Light'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-300.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:400;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.eot');src: local('Open Sans'), local('OpenSans'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-regular.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'Open Sans';font-style:normal;font-weight:700;src: url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.eot');src: local('Open Sans Bold'), local('OpenSans-Bold'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.eot?#iefix') format('embedded-opentype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.woff2') format('woff2'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.woff') format('woff'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.ttf') format('truetype'),url('catalog/view/theme/moneymaker2/fonts/open-sans-v13-latin-ext_latin_cyrillic-700.svg#OpenSans') format('svg')}@font-face{font-display:swap;font-family:'FontAwesome';font-weight:normal;font-style:normal;src: url('../fonts/fontawesome-webfont.eot?v=4.7.0');src: url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.eot?#iefix&v=4.7.0') format('embedded-opentype'),url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff2?v=4.7.0') format('woff2'),url('catalog/view/javascript/font-awesome/fonts/fontawesome-webfont.woff?v=4.7.0') format('woff'),url('catalog/view/javascript/font-awesome/fonts/fonts/fontawesome-webfont.ttf?v=4.7.0') format('truetype'),url('catalog/view/javascript/font-awesome/fonts/fonts/fontawesome-webfont.svg?v=4.7.0#fontawesomeregular') format('svg')}</style>
  <script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
  <script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
  <script src="catalog/view/javascript/jquery/moneymaker2/velocity.min.js"></script>
  <script src="catalog/view/javascript/common.moneymaker2.js?v=272"></script>
  <script src="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js"></script>
  <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="stylesheet" type="text/css" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="stylesheet">
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203190614" type="text/css" rel="stylesheet" media="screen" />

 

Попугаи:

Спойлер

89d6c24139020656fcbe280afa0d8607.png

248e9a64082256f4c51112a9a43351a1.png

 

 

 

 

С preload:

84/92

83/93

86/92

 

Без preload:

84/91

83/95

85/92

 

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

Цитата

Beget самый быстрый из всех шаред

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

 

picard-facepalm.jpg

 

Ну что ж поделать, иду на медлительный бесплатный американский Awardspace (чтоб уж наверняка медленно все было, даже пинг в 2 раза дольше бегета) и повторяю процедуру, получая предсказуемое подтверждение отсутствия разницы в попугаях:

 

Спойлер

 Ну что, не пожалел свое время эксперимента ради, поставил на самый днищенский бесплатный Awardspace из США, где даже CURL нет и нельзя залить файл тяжелее 15 мб, скорость работы соответствующая:

http://relpreload.atwebpages.com/

Спойлер

134dc4f7687c150f5ff2f4090a6f8dad.png

И что же мы видим с попугаями?

 

С rel="preload":

Спойлер 


  <link href="catalog/view/javascript/jquery/jquery-2.1.1.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
  <link href="catalog/view/javascript/bootstrap/js/bootstrap.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
  <link href="catalog/view/javascript/jquery/moneymaker2/velocity.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/moneymaker2/velocity.min.js"></script>
  <link href="catalog/view/javascript/common.moneymaker2.js?v=272" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/common.moneymaker2.js?v=272"></script>
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js" rel="preload" as="script"></link>
  <script src="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js"></script>
    <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="preload" as="style" />
  <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="preload" as="style" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="stylesheet" type="text/css" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="preload" as="style">
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="stylesheet">
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203232733" type="text/css" rel="stylesheet" media="screen" rel="preload" as="style" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203232733" type="text/css" rel="stylesheet" media="screen" />
      <link href="http://relpreload.atwebpages.com/image/catalog/cart.png" rel="icon" />

 

Спойлер

46842adfc4101393a3dd49d3730ec929.gif

 

Без rel="preload"

Спойлер 


  <script src="catalog/view/javascript/jquery/jquery-2.1.1.min.js"></script>
  <script src="catalog/view/javascript/bootstrap/js/bootstrap.min.js"></script>
  <script src="catalog/view/javascript/jquery/moneymaker2/velocity.min.js"></script>
  <script src="catalog/view/javascript/common.moneymaker2.js?v=272"></script>
    <script src="catalog/view/javascript/jquery/owl-carousel/owl.carousel.min.js"></script>
    <link href="catalog/view/javascript/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen" />
  <link href="catalog/view/javascript/font-awesome/css/font-awesome.min.css?v=272" rel="stylesheet" type="text/css" />
  <link href="catalog/view/theme/moneymaker2/stylesheet/fonts.css" rel="stylesheet">
    <link href="catalog/view/javascript/jquery/owl-carousel/owl.carousel.css" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/bootstrap-theme-colors.store0.css?v=272" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.css?v=272" type="text/css" rel="stylesheet" media="screen" />
    <link href="catalog/view/theme/moneymaker2/stylesheet/stylesheet.custom.store0.css?v=201203232733" type="text/css" rel="stylesheet" media="screen" />
      <link href="http://relpreload.atwebpages.com/image/catalog/cart.png" rel="icon" />

 

Спойлер

31a49cf1e2d53d716d7982ef80f7fb0d.gif

 

(как видишь, появилось логичное предупреждение пейджспида "Устраните ресурсы, блокирующие отображение")

 

 

С preload:

67/91

63/85

63/87

 

Без preload:

65/81

66/89

62/86

 

Какой я получаю ответ от оппонента? Думаете, признание собственной неправоты? Как бы не так!

Цитата

У тебя тесты синтетические, совершенно не отражающие реальность

...

Что ты там тестируешь
Один обьедененный файл с прелоад

Оказывается, теперь уже тесты неправильные, а файл у меня внезапно оказался объединен (хотя выше 3 раза демонстрирую, что это не так и в тестах минификация выключена и проверяется подключение всех 12-ти штатных файлов, а не одного объединенного, но мой оппонент не опускается до таких скучных задач, как чтение аргументов).

stmangab20496_600.jpg?v=1527144880.743

 

 

Внимание, вопрос!

Что я делаю не так и почему не вижу разницы в попугаях и с чего вдруг использование rel="preload" должно давать просадку в 20-40 попугаев (как это утверждает мой оппонент)?

 

  • +1 2
Надіслати
Поділитися на інших сайтах
1
1
1

buslikdrev Grand Master

buslikdrev

Опубліковано:
Опубліковано:

Где скриншоты со страницы https://developers.google.com/speed/pagespeed/insights/?hl=ru (нашёл)?

 

Когда много скриптов, прелоад не поможет - лучше урезать функционал на что никто не пойдёт.

Надіслати
Поділитися на інших сайтах
1
1

sazonoff Community Regular

sazonoff

Опубліковано:
Опубліковано:

Утверждать однозначно, что preload помогает или мешает невозможно.   Все зависит от конкретной ситуации.

Тотальное использование preload для всех подряд стилей и скриптов будет бессмысленным делом или даже вредным.

 

Некоторые разработчики абсолютно не понимают как работает preload и как именно его нужно использовать.

Часто просто дублируют preload строчкой выше перед самим скриптом или стилем, что в принципе ничего не дает, но и не мешает.

 

Грамотное и уместное использование preload - это бывает полезно. Но просто пихать его везде и как попало - плохой подход, неграмотный подход.

Надіслати
Поділитися на інших сайтах
1

RGB Grand Master

RGB

Опубліковано:
  • Автор
Опубліковано:
10 минут назад, sazonoff сказал:

в принципе ничего не дает, но и не мешает.

Я об этом и пишу

Все, что на практике дает использование вышеуказанной конструкции из заметного невооруженным глазом - это убирает предупреждение "Устраните ресурсы, блокирующие отображение"

Мне же начали доказывать, что rel="preload" убивает 20-40 попугаев и стоит его убрать, как оценка с 40 магическим образом поднимается до 90

Надіслати
Поділитися на інших сайтах
1
1
1

sazonoff Community Regular

sazonoff

Опубліковано:
Опубліковано:
26 минут назад, RGB сказал:

убивает 20-40 попугаев и стоит его убрать, как оценка с 40 магическим образом поднимается до 90

 

такая разница из-за " вреда preload" вряд ли возможна в реальных условиях.

задавшись целью сделать вред, конечно, можно понизить скорость сайта немножко из-за preload, но это нужно очень постараться.

Могу привести такие вредные советы - сделать preload всех изображений в самом начале html, особенно "полезно" загрузить баннеры 6000х4000 и карты местности, которые потом даже использоваться не будут.  При желании все возможно.

 

но все же лучше разбирать конкретную страницу чтобы понимать ее особенности.

Надіслати
Поділитися на інших сайтах
1

GetWeb Community Regular

GetWeb

Опубліковано:
Опубліковано:

Бессмысленная вставка preload во все файлы это явно лишнее и явно не по назначению. Если у вас свой шаблон, то создать свой критический css не так уж и сложно и займет он не больше 200 строк, но тогда и эффективность будет очевидна. Кроме того у preload слабая поддержка и сейчас критический css более практично вставлять инлайново, тогда серфинг по страницам летает в реальном смысле этого слова, пользователи могут даже не заметить что страница обновилась.

Надіслати
Поділитися на інших сайтах

RGB Grand Master

RGB

Опубліковано:
  • Автор
Опубліковано:

@GetWeb когда-то проверял это, при общем весе минифицированных стилей главной страницы в 240 кБ (это не только стили шаблона, но и bootstrap, fa, всякие слайдшоу и прочее) критическая часть имела вес около 50 кБ. Допустим, если вручную с умом это делать, получится уменьшить еще больше, но инлайнить на каждой странице сайта простыни из минимум 30-40 кБ стилей - мне показалось не очень перспективной затеей, разве что для накрутки попугаев.

  • +1 1
Надіслати
Поділитися на інших сайтах
1
1
1

GetWeb Community Regular

GetWeb

Опубліковано:
Опубліковано:
32 минуты назад, RGB сказал:

@GetWeb когда-то проверял это, при общем весе минифицированных стилей главной страницы в 240 кБ (это не только стили шаблона, но и bootstrap, fa, всякие слайдшоу и прочее) критическая часть имела вес около 50 кБ. Допустим, если вручную с умом это делать, получится уменьшить еще больше, но инлайнить на каждой странице сайта простыни из минимум 30-40 кБ стилей - мне показалось не очень перспективной затеей, разве что для накрутки попугаев.

Мне кажется вы не до конца понимаете смысла и назначения критического css, он нужен для отрисовки первого контента и минимизации смещения, то есть чтобы в начале построения разметки и в конце, когда все стили подключены, было минимум различий, в идеале чтобы разницы вообще не было и это вполне досягаемо. На баллы PageSpeed это влияет, но помимо баллов от такого сайта создается приятное впечатление, когда нет никаких  дерганий, цветовых изменений и прочей загрузочной грязи, а так же создается  впечатление что сервер быстро отвечает. Это не значит что нужно взять все стили, которые используются например в шапке и вставить в критический css и не значит что нужно подрубить всю сетку bootstrap чтобы она начала работать. Варианты критического css зависят от конкретного случая, можно даже создать стартовые стили, сетку, имитацию иконок и прочее, которые вообще не похожи на финальный css и будут переопределены после полной загрузки.

 

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

Надіслати
Поділитися на інших сайтах

RGB Grand Master

RGB

Опубліковано:
  • Автор
Опубліковано:

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

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

1 час назад, GetWeb сказал:

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

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

Надіслати
Поділитися на інших сайтах
1
1
1

GetWeb Community Regular

GetWeb

Опубліковано:
Опубліковано:
1 минуту назад, RGB сказал:

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

Если реализация не грамотная, то это уже не критический css..

 

4 минуты назад, RGB сказал:

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

Ну я с этим не спорю, собственно и написал что скорее всего это не нужно для массового потребления, а вам тем более виднее

  • +1 1
Надіслати
Поділитися на інших сайтах

sazonoff Community Regular

sazonoff

Опубліковано:
Опубліковано:
30 минут назад, RGB сказал:

critical css нужен в первую очередь для того, чтобы как можно скорее показать пользователю контент

 

именно.

но в конечном итоге последующая загрузка основного CSS может привести к повторному перестроению страницы (рендерингу). Это если сравнивать с загрузкой сразу всех основных стилей CSS.

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

Т.е. время на отображение всей страницы может увеличиться, но зато первоначальный контент появится быстрее.

Все же нужно помнить в первую очередь о пользователе, а не о попугаях.

Делайте удобно и приятно пользователю - и будет вам счастье и вашим пользователям. Попугаи - это вторично.

  • +1 1
Надіслати
Поділитися на інших сайтах
1

Створіть аккаунт або увійдіть для коментування

Ви повинні бути користувачем, щоб залишити коментар

Створити обліковий запис

Зареєструйтеся для отримання облікового запису. Це просто!

Зареєструвати аккаунт

Вхід

Уже зареєстровані? Увійдіть тут.

Вхід зараз
 Share
Перейти до списку тем

Покупцям

Розробникам

Корисна інформація

Останні розширення

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.

  Я даю згоду