Ускоряем загрузку сайта

Краткий смысл статьи — кешируйте все, что только можно. Некоторые вещи конечно мелочи, но именно мелочи делают профессионала профессионалом.

Css спрайты

Впервые увидел эту технику на одном бурж сайте, очень понравилась идея. Например, если надо сделать круглые уголки, то обычно рисуют 4 уголка как 4 разных гифа. Можно сделать их в одном, а потом вот таким образом отпозиционировать.
background:url(images/form.png) no-repeat -987px 0;height:12px; Запросов меньше, обработка соответственно быстрее.

Карты изображений

Они же images maps. Позволяют объеденить несколько картинок в одну, тем самым уменьшив число запросов

Используйте внешнее подключение скриптов и css

Идея подключать скрипты, например, с гугла, неплоха. Пользователь может уже загрузил эти файлы при просмотре другого сайта, при заходе на ваш сайт он достанет их из кеша. Отсюда можно подключать jQuery
http://jqueryjs.googlecode.com/files/jquery-1.2.6.min.js

Выносите скрипты в конец

Скрипты могут долго грузится/выполнятся, поэтому хорошая идея вынести их в самый конец кода. Еще более интересный вариант — поставить на выполнение при body onLoad скрипт, который например по getElementById заменит предварительно созданные пустые

на нужный код.

Оптимизируйте изображения

Итак понятно, что под веб не стоит выкладывать семиметровые фотки. Сжать их можно в редакторе графики при сохранении. Также полезно использовать data: URL scheme для подгона изображения к актуальному размеру монитора.

Уменьшите число запросов к серверу

Это нужно просчитывать еще при верстке. Картинка, цсс, скрипт — это все отдельный запрос к серверу. Много картинок/скриптов — много запросов. Используйте Css спрайты , карты изображений

Оптимизируйте заголовки

Иногда сервера выдают очень много лишней инфы при запросе. Запросы не кешируются. Не лишним будет их подрезать.
В заголовках хорошо добавить срок «годности» документа (Expires:) и тег для сравнения страницы на сервере с ее копией в кеше (ETag:)

Используйте gzip

Сжатие трафика настраивается на самом сервере.
Модули для апача:

Чистите код

HTML, js, css, php, неважно какой язык, размер имеет значение )).
Для хтмл не надо использовать громоздких конструкций вложенных друг в друга тегов, прописывать в самом хтмл стили. Количество используемых элементов можно посмотреть через firebug командой :document.getElementsByTagName('*').length
В цсс стоит посмотреть, не используется ли подобный стиль уже. В языках программирования полезно обнулять переменные до и после их выполнения, потому что они могут держать в кеше довольно большие обьемы информации.

Плагин для проверки для FireFox

Все указанные пункты можно проверить через плагин для лисы YSLow.
https://addons.mozilla.org/en-US/firefox/addon/1843
https://addons.mozilla.org/en-US/firefox/addon/5369

Сначала ставится FireBug, потом сам Yslow

Полезная ссылка по теме для вебдевелоперов от яху. Часть советов взял оттуда.

0.00 avg. rating (0% score) - 0 votes

10 комментариев

  • Офуенная статья ) Особенно про уголки )

    • Los Pirata, ты подкалываешь меня или правда не знал? ))

  • Не подкалываю, однако, знал. Ведь, действительно, полезная информация для новичков )

  • Фик знает че за новички такие, для апача будут зипование ставить ))

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

    • Yellow Sticker , естесственно, результат будет выше, но ты предлагаешь хирургическое вмешательство, а тут терапевтические методы ))

      ПыСы. На блог на твой подписался, есть интересные мысли.
      http://www.yellowsticker.info/nginx-apache-frontend-on-whm-34/ — ваще тема, надо будет заюзать на своем рабочем серваке, только у меня там панелей не стоит

  • Все делаем сайты как ya.ru у всех сразу они летать начнут =) и когда офф от сети тоже открываться будут =)

    Обычно css меню сильно грузит сайт!

  • «Терапевтический » метод иногда приносит лучший результа, чем «хирургический»…

    • И к тому же тут описано ускорение сайта(в основном) а не сервера ))
      Olleg, а у тебя блог не работает (

  • Уже все исправил…….Теперь работает….))

css.php