Скорость загрузки Google PageSpeed Insights

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

Удалите неиспользуемый код CSS. Если вы щелкните по этой рекомендации, то там откроется некоторый текст и текстовая ссылка Подробнее... Если вы перейдете по этой ссылке, то вас перенаправят на руководство Гугл Отложить неиспользованный CSS. В этом руководстве есть много полезной информации и рекомендаций. Например:

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

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

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

Там также дают вам рекомендации для оптимизации ваших стилей, например:

CSS, необходимый для загрузки страницы, называется критическим CSS. Как правило, загрузка страницы должна блокироваться только на критических CSS. Теоретически, наиболее оптимальный подход - встроить критический CSS в HTML. Как только HTML загружен, браузер имеет все, что ему нужно для отображения страницы. Больше не нужно делать сетевые запросы. Смотрите встраивание CSS.

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

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

Пересмотрите иерархическую структуру веб-страницы. Оставьте в прямом потоке загрузки только содержание которое имеет наиболее важную информацию. Например, вызывает некоторое сомнение тот факт, что ваш баннер с информацией о том, что "Реклама - двигатель торговли", является важной информацией. Также вызывает сомнение в важности слайд-шоу, которое расположено ниже. По моему скромному мнению, все то же самое, относиться к всей последующей информации. Если вы всю эту информацию установите в аккордеонах или в модульных всплывающих окнах, то тем самым вы удалите много информации из прямого потока загрузки. Для этой, второстепенной и неважной информации, стили будут не критичными и это означает что скорость загрузки повысится. Кроме того, для дизайна UX, важно понимать, что человек может за один раз воспринимать максимально 7 объектов на веб-странице и оптимальное количество объектов равно 5. Избыточная информация может путать пользователя и он будет уходить без действий и без конверсии.

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

Используйте современные форматы изображений. Для анализа критичных ресурсов, особенно изображений, используйте бесплатный онлайн инструмент webpagetest и выберите наиболее старую модель смартфона для тестирования. Этот инструмент создает три версии анализа веб-страницы такие как Waterfall. Выберите наиболее низкую скорость загрузки, например Run 1 и щелкните по нему. Вам покажут информацию с ресурсами анализируемой веб-страницы, например список загружаемых внешних ресурсов = 57.

1 https://vashkaweb.ru/work/sait/ text/html 0.791 s 61 ms 244 ms 451 ms 283 ms 178 ms 28.6 KB - 200 - 2 https://vashkaweb.ru...rk/sait/img/user.svg image/svg+xml 1.217 s - - - 358 ms 61 ms 1.2 KB - 200 - 3 https://vashkaweb.ru...it/css/style.min.css text/css 1.218 s - - - 178 ms 1135 ms 214.2 KB - 200 - 4 https://vashkaweb.ru...it/img/megaphone.png image/png 1.218 s - - - 366 ms 104 ms 3.7 KB - 200 - 5 https://vashkaweb.ru...k/sait/img/paint.png image/png 1.219 s - - - 363 ms 101 ms 4.6 KB - 200 - 6 https://vashkaweb.ru...sait/img/printer.png image/png 1.22 s - - - 360 ms 109 ms 1.1 KB - 200 - 7 https://vashkaweb.ru...k/sait/img/tools.png image/png 1.22 s - - - 357 ms 114 ms 2.2 KB - 200 - 8 https://vashkaweb.ru...mg/advantagesSl1.png image/png 1.221 s - - - 401 ms 1323 ms 93.6 KB - 200 - 9 https://vashkaweb.ru...mg/advantagesSl2.png image/png 1.221 s - - - 353 ms 1372 ms 158.7 KB - 200 - 10 https://vashkaweb.ru...rk/sait/img/logo.png image/png 1.229 s - - - 372 ms 96 ms 3.5 KB - 200 - 11 https://vashkaweb.ru...it/img/promotion.png image/png 1.25 s - - - 345 ms 474 ms 3.1 KB - 200 - 12 https://vashkaweb.ru...k/sait/img/start.png image/png 1.252 s - - - 345 ms 465 ms 2.7 KB - 200 - 13 https://vashkaweb.ru.../sait/img/rating.png image/png 1.252 s - - - 342 ms 465 ms 2.6 KB - 200 - 14 https://vashkaweb.ru.../sait/img/podium.png image/png 1.253 s - - - 345 ms 468 ms 0.9 KB - 200 - 15 https://vashkaweb.ru.../sait/img/global.png image/png 1.255 s - - - 345 ms 472 ms 0.8 KB - 200 - 16 https://vashkaweb.ru...ait/img/photo_sl.png image/png 1.261 s - - - 340 ms 489 ms 42.6 KB - 200 - 17 https://vashkaweb.ru...k/sait/img/close.png image/png 1.262 s - - - 339 ms 462 ms 0.5 KB - 200 - 18 https://vashkaweb.ru...sait/img/popupsl.jpg image/jpeg 1.264 s - - - 335 ms 1348 ms 79.8 KB - 200 - 19 https://vashkaweb.ru...t/img/right-link.png image/png 1.264 s - - - 345 ms 455 ms 0.5 KB - 200 - 20 https://vashkaweb.ru.../sait/img/Paypal.svg image/svg+xml 1.266 s - - - 335 ms 704 ms 7.7 KB - 200 - 21 https://vashkaweb.ru...rk/sait/img/visa.svg image/svg+xml 1.267 s - - - 334 ms 713 ms 2.1 KB - 200 - 22 https://vashkaweb.ru...t/img/mastercard.svg image/svg+xml 1.269 s - - - 334 ms 734 ms 8.8 KB - 200 - 23 https://vashkaweb.ru...ait/img/computer.png image/png 1.269 s - - - 345 ms 395 ms 0.8 KB - 200 - 24 https://vashkaweb.ru...rk/sait/img/bank.svg image/svg+xml 1.27 s - - - 332 ms 692 ms 1.2 KB - 200 - 25 https://vashkaweb.ru.../img/right-arrow.png image/png 1.27 s - - - 345 ms 287 ms 0.6 KB - 200 - 26 https://vashkaweb.ru...k/sait/img/purse.svg image/svg+xml 1.27 s - - - 330 ms 616 ms 1.0 KB - 200 - 27 https://vashkaweb.ru...ait/img/sberbank.svg image/svg+xml 1.272 s - - - 331 ms 619 ms 3.1 KB - 200 - 28 https://vashkaweb.ru...t/img/left-arrow.png image/png 1.273 s - - - 345 ms 396 ms 0.6 KB - 200 - 29 https://vashkaweb.ru...mg/advantagesSl3.png image/png 1.274 s - - - 345 ms 376 ms 55.1 KB - 200 - 30 https://vashkaweb.ru...rk/sait/img/cash.svg image/svg+xml 1.274 s - - - 330 ms 707 ms 3.0 KB - 200 - 31 https://vashkaweb.ru...ait/img/facebook.svg image/svg+xml 1.275 s - - - 328 ms 726 ms 1.2 KB - 200 - 32 https://vashkaweb.ru...work/sait/img/vk.svg image/svg+xml 1.275 s - - - 329 ms 719 ms 2.3 KB - 200 - 33 https://vashkaweb.ru...work/sait/img/ok.svg image/svg+xml 1.276 s - - - 326 ms 716 ms 1.3 KB - 200 - 34 https://vashkaweb.ru.../sait/img/google.svg image/svg+xml 1.277 s - - - 325 ms 724 ms 1.1 KB - 200 - 35 https://vashkaweb.ru...k/sait/img/smail.svg image/svg+xml 1.277 s - - - 326 ms 739 ms 2.1 KB - 200 - 36 https://vashkaweb.ru...sait/img/twitter.svg image/svg+xml 1.278 s - - - 324 ms 731 ms 1.4 KB - 200 - 37 https://vashkaweb.ru...t/js/parallax.min.js application/javascript 1.279 s - - - 322 ms 728 ms 1.0 KB - 200 - 38 https://vashkaweb.ru...rk/sait/js/slider.js application/javascript 1.28 s - - - 323 ms 726 ms 5.8 KB - 200 - 39 https://vashkaweb.ru.../sait/js/main.min.js application/javascript 1.282 s - - - 321 ms 738 ms 14.4 KB - 200 - 40 https://cdnjs.cloudf...1.12.4/jquery.min.js application/javascript; charset=utf-8 1.626 s 4 ms 47 ms 218 ms 57 ms 193 ms 94.9 KB - 200 - 41 https://fonts.google...700,800&display=swap text/css; charset=utf-8 1.672 s 103 ms 47 ms 256 ms 58 ms 34 ms 9.7 KB - 200 - 42 https://vashkaweb.ru...sait/img/indexbg.png image/png 2.694 s - - - 150 ms 1388 ms 426.0 KB - 200 - 43 https://vashkaweb.ru...sait/img/faq_mob.png image/png 2.695 s - - - 291 ms 79 ms 20.7 KB - 200 - 44 https://vashkaweb.ru...work/sait/img/h2.png image/png 2.699 s - - - 776 ms 57 ms 0.4 KB - 200 - 45 https://vashkaweb.ru...k/sait/img/sites.png image/png 2.703 s - - - 774 ms 1122 ms 93.1 KB - 200 - 46 https://vashkaweb.ru...tdoorAdvertising.png image/png 2.705 s - - - 771 ms 1141 ms 72.4 KB - 200 - 47 https://vashkaweb.ru...ork/sait/img/web.png image/png 2.705 s - - - 372 ms 73 ms 13.9 KB - 200 - 48 https://vashkaweb.ru...photographersMob.png image/png 2.708 s - - - 689 ms 1165 ms 110.6 KB - 200 - 49 https://vashkaweb.ru.../sait/img/formbg.png image/png 2.711 s - - - 264 ms 1499 ms 205.4 KB - 200 - 50 https://fonts.gstati...3g3D_vx3rCubqg.woff2 font/woff2 3.37 s - - - 362 ms 99 ms 8.3 KB - 200 - 51 https://fonts.gstati...9W1hyyTh89ZNpQ.woff2 font/woff2 3.372 s - - - 264 ms 194 ms 8.4 KB - 200 - 52 https://fonts.gstati...dJE3gnD_vx3rCs.woff2 font/woff2 3.372 s - - - 190 ms 146 ms 13.8 KB - 200 - 53 https://fonts.gstati...3g3D_vx3rCubqg.woff2 font/woff2 3.376 s - - - 357 ms 99 ms 8.3 KB - 200 - 54 https://fonts.gstati...ZpC3gnD_vx3rCs.woff2 font/woff2 3.379 s - - - 113 ms 43 ms 13.8 KB - 200 - 55 https://fonts.gstati...3g3D_vx3rCubqg.woff2 font/woff2 3.38 s - - - 243 ms 170 ms 8.4 KB - 200 - 56 https://fonts.gstati...m459WlhyyTh89Y.woff2 font/woff2 3.381 s - - - 198 ms 213 ms 13.8 KB - 200 - 57 https://fonts.gstati...bZF3gnD_vx3rCs.woff2 font/woff2 3.382 s 43 ms 54 ms 291 ms 117 ms 122 ms 13.6 KB - 200 -

Выберите наиболее важные ресурсы и удалите не важные. Например, вызывает сомнение тот факт, что для представления информации на этой веб-странице, требуются специальные шрифты, такие как woff2, которые вы здесь используете и которые имеют 8 внешних файлов (это 8 отдельных запроса сервера). Браузеры уже имеют встроенные шрифты, которые вы можете просто указать в стилях, например Verdana. Для оптимизации ваших изображения используйте следующие ресурсы:

• руководство Гугл для отзывчивых изображений
• руководство Гугл Автоматизация выбора ресурсов с помощью клиентских подсказок
• руководство Mozilla для отзывчивых изображений
• Применение srcset: выбор правильных размеров для адаптивных изображений в разных точках останова
• инструмент сжатия изображений Compress Image (я обычно использую 65% сжатие).

Устраните ресурсы, блокирующие отображение. Вероятно для этого вам могут помогать информация и мои рекомендации для первого пункта.

Для сжатия исходного кода веб-страницы вы можете использовать бесплатный онлайн инструмент HTML Compressor. Кстати, если вы откроете исходный код этого инструмента, то там вы можете видеть, что все стили встроены внутрь HTML элемента head.

По моему скромному мнению, наилучшим решение для вашего веб-сайта может быть использование фреймворка АМП, который рекомендует Гугл.