Автор: Даниэль Скокко
Перевод: Всеволод Козлов
Каждый раз при открытии пользователем веб-страницы каждый объект (изображение, скрипт…) делает запросы к серверу. Этот процесс прибавляет секунды к времени загрузки сайта.
Первым шагом к уменьшению времени, затрачиваемому на выполнение HTTP запросов является уменьшение количества объектов на Вашем сайте. Избавьтесь от бесполезных изображений, дизайнерских примочек и т.д. По возможности, можно объединить 2 смежных изображения в одно.
Во-вторых, убедитесь, что запросы к внешним файлам сведены к минимуму, например, вместо использования нескольких css-файлов, объедините их содержимое в одном единственном css-файле:
Вместо:
<link rel="stylesheet" type="text/css" href="/body.css" />
<link rel="stylesheet" type="text/css" href="/side.css" />
<link rel="stylesheet" type="text/css" href="/footer.css" />
Следует делать так:
<link rel="stylesheet" type="text/css" href="/style.css" />
Ускорение загрузки Вашего сайта:
- Оптимизация изображений
- Форматы изображений
- Оптимизация CSS-файлов
- Использование слэша на конце ссылок
- Указание атрибутов Height и Width для всех изображений
- Уменьшение количества HTTP запросов
Оригинал статьи: Speed Up Your Site – Reduce the HTTP Requests
Смотрите также:
- Вкладки css
- День рождения
- Сайт портфолио
- Footer
- Перекодирование цвета из hex
- Оптимизация изображений
- Сборник иконок для рабочего стола
- Красивые таблицы css
- Семантическая разметка
- Css button
5 комментария(-ев)
[...] Уменьшите количество HTTP запросов: при открытии веб-страницы каждый объект (изображение, скрипт…) делает запросы к серверу. Этот процесс прибавляет секунды к времени загрузки сайта. Постарайтесь уменьшить кол-во объектов, например, путём объединения нескольких css-файлов в одном. [...]
Еще можно объединять иконки в одинф айл, если их много на сайте.
Кстати данный пример с CSS ухудшить поддержку. иногда когда код разбит по нескольким файлам — проще.
После того как я вынес все картинки в css нагрузка существенно упала, т.к. теперь все картинки грузятся один раз а затем кешируются
неее, лучше через DOM код:
var link = document.createElement(‘link’);
document.getElementsByTagName(‘head’)[0].appendChild(link);
link.setAttribute(‘type’,'text/css’);
link.setAttribute(‘rel’,'stylesheet’);
link.setAttribute(‘href’,'style.css’);
так быстрее будет. Все остальные файлы в этот style.css через @import url(css.css);
всё нашёл на том же webo.in
То что запросов меньше ,это понятно, но вот файлик весить поболее будет