Краткий смысл статьи — кешируйте все, что только можно. Некоторые вещи конечно мелочи, но именно мелочи делают профессионала профессионалом.
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
Сжатие трафика настраивается на самом сервере.
Модули для апача:
- Apache 1.3 mod_gzip
- Apache 2.x mod_deflate
Чистите код
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
Полезная ссылка по теме для вебдевелоперов от яху. Часть советов взял оттуда.
10 responses
Do you want to comment?
Comments RSS and TrackBack Identifier URI ?
Trackbacks