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

Question

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

CURRENT: Если повезет, при первой загрузке появляются два или три изображения; для просмотра всех изображений требуется страница рефери.

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

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

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

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

UPDATE:

Многие предполагают уменьшение размера файла изображения. В любом случае, только несколько изображений были большими, но теперь все они хороши. Нет изображения размером более 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> 

Answer 1

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

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

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

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

Вот скриншот

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

Answer 2

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

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

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

Answer 3

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

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

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

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

1. Minify и сжимают SVG активы
2. Предпочитают векторные форматы
3. Pick лучших растрового формата изображения
4. Удалить ненужные метаданные изображения
5. изменить размер изображения на сервере и убедитесь, что Размер «дисплея» как можно ближе к «натуральному» размеру изображения
6. инвестировать в автоматизированные инструменты и инфраструктуру, которые обеспечат оптимизацию всех ваших имиджевых активов.

Answer 4

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

11mb 
size of 8454x8568 

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

Answer 5

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

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

Answer 6

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

Answer 7

Я могу предложить настроить файл .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>