Поддержка Проблемы и решения Медленная загрузка отдельных изображений

  • Тема у меня своя, делается почти с нуля. На каком-то этапе (я, к сожалению, его не отследила) появилась идиотская проблема: все изображения грузятся нормально, за исключением двух бэкграундов в шапке. Оба прописаны в style.css, одно в качестве background непосредственно к header, второе — к элементу внутри header. Грузятся с задержкой, т.е. вся страница на месте, эти появляются последними. Где искать причины?

Просмотр 14 ответов — с 1 по 14 (всего 14)
  • в размере картинок фона, например.
    без сайта вам никто точнее не скажет.

    Размер там примерно такой же, как у фона body, например. Одна 10,5КБ, вторая 2,2КБ. Кроме того, я пробовала их менять на другие, совсем мелкие. Всё равно все бэкграунды в хедере грузится с задержкой. Просто изображения (<img src="">)- нормально. «Без сайта» — это Вы что имеете ввиду? Нужна ссылка на сайт или доступ ко всей начинке?

    ссылка на сайт нужна.

    не вижу ни малейших проблем с загрузкой картинок.

    В шапке полосатый фон и фон под часами при первом заходе на сайт загрузились одновременно со всем остальным?

    да

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

    Модератор Yui

    (@fierevere)

    永子

    есть сервисы для проверки с выводом «водопада» (waterfall) загрузки
    то же самое есть и в инструментах браузера

    http://www.webpagetest.org/result/151016_SQ_J7E/1/details/

    Спасибо. Посмотрела, но ничего не поняла. Не умею я этим пользоваться. (((

    Модератор Yui

    (@fierevere)

    永子

    там несложно понимать
    чем длиннее полоска — тем дольше грузится ресурс
    с картинками я там проблем не вижу, долго грузится главная страница (html) и шрифты с гугла (css и woff2)

    Хм. Но вот шрифты-то как раз появляются мгновенно, а с этими двумя картинками — задержка. С любыми фонами в хедере задержка. Я уж каких только эскпериментов не ставила. Логотип вот тоже был бэкграундом — тоже опаздывал. Сделала его самостоятельной картинкой — проблема отпала. А главная страница — что это имеется ввиду? Может быть это общее, суммарное время, пока не загрузится полностью всё что нужно?

    Модератор Yui

    (@fierevere)

    永子

    А главная страница — что это имеется ввиду? Может быть это общее, суммарное время, пока не загрузится полностью всё что нужно?

    включает в себя — разрешение доменного имени, соединение с сервером, генерацию страницы (у вас 250мс, это среднее значение)

    перечисленное именуется TFB (время до первого байта)

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

    рендеринг начинается тогда, когда получен заголовок ( <head></head> ) и используемые в нем стили и скрипты (css и js)

    http://storage8.static.itmages.ru/i/15/1016/h_1444995578_9352207_c8618afd13.jpeg
    вообщем то да, не быстро, а с картинками все хорошо у вас…

    ps: хотя раз хостинг jINO — у них есть отвратная манера резать траффик до 5 Мбит-с, возможно вам из за этого показалось что медленно грузится.

    Модератор Yui

    (@fierevere)

    永子

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

    можно добавить в конец файла .htaccess в корне сайта

    <IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType image/jpg "access 1 month"
    ExpiresByType image/jpeg "access 1 month"
    ExpiresByType image/gif "access 1 month"
    ExpiresByType image/png "access 1 month"
    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 month"
    </IfModule>

    и

    <IfModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include handler ^cgi-script$
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    </IfModule>
Просмотр 14 ответов — с 1 по 14 (всего 14)
  • Тема «Медленная загрузка отдельных изображений» закрыта для новых ответов.