Форум PHP программистов > Скорость загрузки страницы

[ Поиск ] - [ Пользователи ] - [ Календарь ]

Полная Версия: Скорость загрузки страницы

olya-kowka

20.03.2012 - 10:51

Доброе утро всем читающим!

Друзья, у меня есть вопрос, касающийся скорости загрузки главной страницы сайта.

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

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

Верстка на странице блочно-табличная.
Я проделывала тест: запись в лог времени начала подключения того или иного блока и времени окончания его загрузки.
Результат: время начала загрузки страницы и окончания загрузки одинаковы, т.е. пройдя все подключения и обращения к БД время не отличается ни на секунду.

Но при этом страница загружается в среднем 3-5 сек. И так только до кеша, я так понимаю. На странице есть картинки и обои. Картинки располагаются background.

Подскажите, куда смотреть еще?

Спустя 4 минуты, 11 секунд (20.03.2012 - 09:55) olya-kowka написал(а):

Наврала с первичной скоростью загрузки главной страницы - 10 сек может быть...

Спустя 11 минут, 15 секунд (20.03.2012 - 10:06) Nikitian написал(а):

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

Спустя 5 минут, 31 секунда (20.03.2012 - 10:12) olya-kowka написал(а):

Nikitian, Вы правы, я вижу 304 код при вторичной загрузке главной страницы.

Цитата

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

Вы имеете в виду убрать все include, которые цепляются в шапке в один файл?
Но ведь include внутри этого единого файла останутся.

Спустя 1 минута, 11 секунд (20.03.2012 - 10:13) Visman написал(а):

Все css в один файл.
Все javascript файлы аналогично и в конец страницы перед </body>.

Спустя 39 минут, 16 секунд (20.03.2012 - 10:52) Nikitian написал(а):

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

Спустя 11 минут, 52 секунды (20.03.2012 - 11:04) Michael написал(а):

olya-kowka, речь идет не про php, а чтобы файл один со скриптами подгружался.
Пример - сайт
В исходном коде:

<script type="text/javascript" src="/files/js/js_154f737980f9874c9820dc25f86fc053.js"></script>

друпал все файлы скриптов объединил в один. И браузеру за одним файлом бегать. Тоже для css. Иначе там было бы на целый экран подключений скриптов и css.

Спустя 2 часа, 28 минут, 6 секунд (20.03.2012 - 13:32) Guest написал(а):

Ребят, всем спасибо за комментарии, прочитала источники.

css объединила в один файл.

Мне понравился метод head.js - с ним наглядно страница грузится быстрее. Но я столкнулась тут с другой проблемой:

поскольку данный метод начинает рендерить страницу, не дожидаясь, пока js грузятся, то в момент прохода по странице натыкался на блоки javascript, где требовался уже сформированный объект $(document).ready() и возникала ошибка.

В данном случае, пришлось 4 файла подключать как было:

<script type="text/javascript" language="javascript" src="/script/jquery.js"></script>
<script type="text/javascript" language="javascript" src="/script/jquery-easing.js"></script>
<script type="text/javascript" language="javascript" src="/script/ui_slider.js"></script>
<script type="text/javascript" language="javascript" src="/script/gl-slider.js"></script>

А остальные, используя новый метод:


<script src="/script/head.min.js"></script>

<script>
head.js("/script/coda-slider.js", "/script/coda-slider2.js", "/script/coda-slider3.js", "/script/jcarousel.js", "/script/gl-slider.js", "/script/lightbox.js", "/script/jyoutube.js", "/script/jyoutube.min.js", "/script/all.js", "/script/func.js");

</script>

Метод и правда шустрый, но я не могу все файлы в него подключить.

Nikitian, может, у Вас будут мысли по этому поводу?

Спустя 1 минута, 17 секунд (20.03.2012 - 13:33) olya-kowka написал(а):

Предыдущий комментарий - это мой!

Спустя 3 минуты, 56 секунд (20.03.2012 - 13:37) Nikitian написал(а):

Вместо $(document).ready() используйте head.ready(document,function(){/*тут что исполняется*/});

Спустя 3 часа, 9 минут, 13 секунд (20.03.2012 - 16:47) VELIK505 написал(а):

Цитата (olya-kowka @ 20.03.2012 - 06:55)

Наврала с первичной скоростью загрузки главной страницы - 10 сек может быть...

Если только при первом заходе так то читаем клиентскую оптимизацию http://webo.in/

Спустя 21 минута, 5 секунд (20.03.2012 - 17:08) olya-kowka написал(а):

VELIK505, это реклама?

Nikitian
Michael
Visman,

ребят, спасибо за помощь, за внимание к проблеме!!
Страницу удалось значительно оптимизировать, продолжаю копать в том же направлении!

Спустя 2 дня, 22 часа, 16 минут, 43 секунды (23.03.2012 - 15:24) olya-kowka написал(а):

Друзья,

решила продолжить тему тут....

Обнаружила следующую проблему при внедрении head.js только в IE.

При первичной загрузке страницы сайт не грузится и выдает ошибку

Сообщение: HTML Parsing Error: Unable to modify the parent container element before the child element is closed (KB927917)
Строка: 0
Символ: 0
Код: 0

Самое интересное, что при релоаде страница загружается нормально. На другой машине alert выдается на IE и также пустая страница. При релоаде тоже самое.

В других браузерах такой проблемы нет.

Прочитала, что эта ошибка может быть связана с &. Только не пойму, это что теперь во всем коде амперсанд заменять на & ? :huh:

Кто сталкивался, помогите :unsure:

Спустя 11 минут, 33 секунды (23.03.2012 - 15:36) Игорь_Vasinsky написал(а):

посмотрите, может пригодиться

http://ru.wikipedia.org/wiki/%D0%9C%D0%BD%...%B8_%D0%B2_HTML

Спустя 6 минут, 38 секунд (23.03.2012 - 15:43) olya-kowka написал(а):

Игорь_Vasinsky, спасибо ссылка хорошая, полезная.

Только я так и не поняла, неужели из-за того, что в IE такой баг, нужно во всех местах, во всем коде во всех ссылках типа


/models.phtml?a=1&b=3&c=4

Поменять амперсанды? :blink:

Спустя 3 минуты, 31 секунда (23.03.2012 - 15:46) Игорь_Vasinsky написал(а):

русские комменты в коде есть????

вообще - много народу сталкивались http://www.google.ru/webhp?sourceid=chrome...iw=1366&bih=610

Спустя 13 минут (23.03.2012 - 15:59) olya-kowka написал(а):

Игорь_Vasinsky, есть русские комменты в коде.

Спустя 27 минут, 13 секунд (23.03.2012 - 16:26) Visman написал(а):

olya-kowka, посмотри свой сайт через валидатор http://validator.w3.org/
У себя на форуме несколько ошибок нашел

Спустя 38 минут, 21 секунда (23.03.2012 - 17:05) olya-kowka написал(а):

Visman, ага я глядела уже....
Собственно, после него и я сильно заволновалась по поводу амперсандов ))))

На данном этапе я убрала все русские комментарии в коде js. Ошибки пока нет... Продолжаю тестировать...

Спустя 1 час, 46 секунд (23.03.2012 - 18:05) inpost написал(а):

Ты бы ссылку дала на сайт, чтобы я хоть глянул в чём основная беда.

Спустя 2 дня, 15 часов, 9 минут, 54 секунды (26.03.2012 - 09:15) olya-kowka написал(а):

inpost, отправила в ЛС

Спустя 6 часов, 44 минуты, 37 секунд (26.03.2012 - 16:00) inpost написал(а):

olya-kowka

<script type="text/javascript" src="/script/jquery.js">
<script type="text/javascript" src="/script/jquery-easing.js">
<script type="text/javascript" src="/script/ui_slider.js">
<script type="text/javascript" src="/script/coda-slider.js">
<script type="text/javascript" src="/script/coda-slider2.js">
<script type="text/javascript" src="/script/coda-slider3.js">
<script type="text/javascript" src="/script/jcarousel.js">
<script type="text/javascript" src="/script/gl-slider.js">
<script type="text/javascript" src="/script/lightbox.js">
<script type="text/javascript" src="/script/jyoutube.js">
<script type="text/javascript" src="/script/jyoutube.min.js">
<script type="text/javascript" src="/script/all.js">
<script type="text/javascript" src="/script/func.js">

Скажи честно, на страница и вправду надо СТОЛЬКО(!!!) JS скриптов? Особенно на главной?
Выпадающий список + корзина = 2 JS файла, но никак не столько. Подключать jQuery надо из он-лайн библиотеки, чтобы людям не приходилось на твоём сайте заново качать её.

Далее css:
http://my.jetscreenshot.com/demo/20120326-de8s-108kb
Глянь, одни и те же свойства наследуются от каждого из правил, итого переопределение слишком огромное идёт.
Фоновое изображение - 170 кб. Много, если учесть, что центральная часть неизменна. То есть чисто белый фон, но приходится грузить картинку в ширину, которая больше в 3 раза.

Вот из Page Speed, для FF. Скачай и исправляй.
http://my.jetscreenshot.com/demo/20120326-vkhw-47kb
Всего 67%, на моих сайтах на минимальном хостинге - поднимал до 92-94%

Спустя 3 часа, 3 минуты, 41 секунда (26.03.2012 - 19:04) I++ написал(а):

Чего мозги жарить? Если есть вот это:

<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 1 hours"

ExpiresByType image/x-icon "access plus 1 hours"
ExpiresByType image/jpeg "access plus 1 hours"
ExpiresByType image/png "access plus 1 hours"
ExpiresByType image/gif "access plus 1 hours"
ExpiresByType application/x-shockwave-flash "access plus 1 hours"
ExpiresByType audio/mpeg "access plus 1 hours"
ExpiresByType text/css "access plus 1 hours"
ExpiresByType text/javascript "access plus 1 hours"
ExpiresByType application/x-javascript "access plus 1 hours"
</IfModule>

А html ловить ob_start("ob_gzhandler");

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

И будет прирост скорости загрузки процентов 80% - 90%.

Остальное от html'а получаемого зависит. Малоли он по 1 метру...

Спустя 21 час, 10 минут, 25 секунд (27.03.2012 - 16:14) olya-kowka написал(а):

inpost,

Цитата (inpost @ 26.03.2012 - 13:00)

Мне разработчики оставили такую простыню потому, что именно для главной страницы грузятся всякие карусели. Многое там-библиотеки, честно говоря, со многими из них я не знакома.
Вот это Вы скопировали из исходного кода, но у меня это закомментировано сейчас, я использую сейчас head.js. Или подгрузка всех этих скриптов даже head.js не рациональна?
Последние 2 скрипта - это то, что необходимо делать при загрузке страницы.

Цитата (inpost @ 26.03.2012 - 13:00)

Подключать jQuery надо из он-лайн библиотеки, чтобы людям не приходилось на твоём сайте заново качать её.

Вот это что значит, как нужно подключать, если не с папки на сервере читать?

Спустя 13 минут, 14 секунд (27.03.2012 - 16:27) inpost написал(а):

olya-kowka
Я не видел на главной всех этих каруселей.
Вообще надо подгружать скрипты по мере их надобности.

_____________
Столько дел...Не успеваю на все забить!!

Быстрый ответ:

Здесь расположена полная версия этой страницы.