Как избавиться от цвета sh цвета при загрузке сайта

Question

При загрузке моего сайта на https://latestfooty.co.uk всегда есть флажок sh серого цвета перед загрузкой сайта. Сайт представляет собой относительно легкую целевую страницу, которая не должна загружаться так долго, поэтому я подозреваю, что проблема связана с сочетанием линейных градиентов и эффектов линии сканирования, которые я использую в качестве фоновых изображений. Ранее я использовал решение SVG для генерации линий сканирования вместо изображения, и эффект «fla sh» был настолько выраженным, что мне пришлось переключиться обратно на метод изображения.

Как я могу избавиться от этого цвета sh цвета с моего сайта, чтобы он более плавно загружался пользователю?

РЕДАКТИРОВАТЬ: Анализ PageSpeed ​​, похоже, не предлагает что-то не так, даже если это очень ясно, предполагая, что это может быть связано не столько с производительностью, сколько с ошибкой.

Answer 1

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

Ваш текущий (на момент написания) фон устанавливается :

html {
     background: linear-gradient( rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5) ), 
                 url('images/StockSnap_POIHJNTKDB_1920.jpg') right/cover;
}

Показывает, что линейный градиент серого цвета (черный с непрозрачностью 50%) применяется до загрузки фонового изображения.

У вас есть несколько способов улучшить это, выполнив одно из следующих действий (в сочетании или отдельно):

• Предзагрузчик , на который ссылается Zen , - вариант , Похоже, вам нужно установить этот продукт в целом, чтобы использовать эту единственную функцию, которая может на самом деле привести к дополнительным расходам.
• Вы можете изменить серый фон на другой цвет или полностью удалить его.
• Можно уменьшить размер файла изображения (в настоящее время 686 КБ) фонового изображения, чтобы ускорить его загрузку.
• Ваш PageSpeed ​​Insights показывает, что вы не кэшируете это изображение (или любые другие изображения), что может улучшить производительность загрузки. PageSpeed ​​Insights, вероятно, не настроен оценивать ресурсы CSS, поэтому он дал вам высокую оценку .

• Вы можете применить CSS @media запросов , поэтому вы называете изображение только с размерами, достаточно большими, чтобы заполнить экран области просмотра.

  Это Одно не решит проблему, но определенно поможет re: filesize. Ваше текущее изображение имеет размер 2 433 × 1080 пикселей, что будет огромным на любом экране, кроме экрана рабочего стола или телевизора.

  Вам потребуется создать множество изображений разных размеров, чтобы выполнить это действие.

Answer 2

попробуйте body{ background:none important }