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

ЦЕЛЬ. Все изображения появляются при первой загрузке.

ТЕКУЩИЙ. Если повезет, при первой загрузке появляются два или три изображения; для просмотра всех изображений требуется страница рефери.

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

Вот пример страницы:

http://elisamantovani.com/pages/book_design.html

Проверьте и другие страницы. Такая же проблема.

ОБНОВЛЕНИЕ:

Многие предложили уменьшить размер файла изображения. В любом случае, только несколько изображений были большими, но теперь все они хороши. Нет изображения размером более 200 КБ, при этом большинство изображений проверяются на < 100 кб. Проблема сохраняется.

Google предлагает другие причины, препятствующие рендерингу страниц, такие как блокировка JS/CSS для рендеринга. CSS должен блокировать рендеринг до загрузки, но не должен занять много времени для загрузки. Я бы хотел, чтобы jQuery мог ждать, пока HTML/CSS не будет отображаться.

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

# One year for image files
<filesMatch ".(jpg|jpeg|png|gif|ico)$">
Header set Cache-Control "max-age=31536000, public"
</filesMatch>
# One month for css and js
<filesMatch ".(css|js)$">
Header set Cache-Control "max-age=2628000, public"
</filesMatch>

Ответы

Ответ 1

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

Перейдите к веб-инспектору (или щелкните правой кнопкой мыши элемент и нажмите "элемент проверки" ), затем щелкните вкладку "Временная шкала". Теперь перезагрузите страницу. Это даст вам представление о том, сколько времени потребовалось для загрузки.

На моем ПК ваш сайт занял 3,40 секунды для загрузки. Не плохо. Кажется, вам хорошо.

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

Вот скриншот

Ниже приведено время загрузки вашего SS. Это, по-видимому, проблема с хостингом.

Ответ 2

Запуск URL-адреса в google insights показывает, что вам нужно сжимать и оптимизировать ваши изображения с помощью >= 60%

developers.google имеет хорошее письмо, которое может оказаться полезным для ваших следующих проектов!

Несколько причин, по которым ваши изображения могут медленно загружаться!

Некоторые предложения:

Минимизировать и сжать активы SVG.

Предпочтительные векторные форматы

Выберите наилучший формат растрового изображения

Удалить ненужные метаданные изображения

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

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

Ответ 3

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

Если вы посмотрите на изображение, вы увидите: Для этой страницы вам нужно изображение 300x279, и вы заряжаете gif из 1281x1192 пикселей. И тогда, если вы посмотрите на время, вы загружаете изображение в ~ 6s. Вот настоящая проблема. Измените размер изображений и повторите попытку. Если вы хотите очистить кеш браузера, Ctrl+F5.

Есть некоторые веб-инструменты, такие как http://quickthumbnail.com/, где вы можете обрезать размер вашего изображения, или вы можете сделать это, используя какой-либо редактор изображений как фотошоп,...

Ответ 4

Я посетил ваш сайт, и сначала он работал нормально. Но когда я перешел на другую вкладку и вернулся на ваш сайт, это было пустым несколько секунд, и причина в том, что это фоновое изображение Tomorrow_final.jpeg, которое имеет

11mb
size of 8454x8568

такой огромный. Если ваши оставшиеся 12 images работают нормально, потому что все они находятся в kbs. Поэтому уменьшите background image size с помощью photoshop и сохраните его для web and device, а затем он будет работать нормально. В настоящее время даже ваша веб-страница застревает во время прокрутки слишком быстро.

Ответ 5

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

Ответ 6

Я могу предложить настроить файл .htaccess для кэширования. Это может увеличить скорость.

Используйте что-то вроде

<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>

Ответ 7

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

Существуют встроенные генераторы спрайтов, которые делают процесс очень простым. Например, я использую этот http://css.spritegen.com/ с хорошими результатами в лучшей производительности.