Уменьшите время загрузки ваших страниц, один год спустя

Более года назад я писал о времени загрузки страниц и Jawr . С тех пор либо мои проекты были приложениями для внутренней сети, где время загрузки не было проблемой, либо мы не имели права голоса в используемых инструментах. Поэтому у меня не было возможности использовать какие-либо инструменты, которые я нашел тогда. Теперь я скоро столкнусь с приложением, которое будет использоваться людьми вне нашей сети, и я определенно хочу, чтобы приложение было максимально отзывчивым. Вооружившись моими предыдущими лучшими практиками Yahoo , я искал в Интернете инструменты, которые могли бы помочь в их применении.

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

<button><img src="path/to/my/image" />Label</button>

Это означает, что любой экран, отображающий более одного типа кнопок, может быть медленным. Один из способов значительно уменьшить количество запросов — объединить все изображения в одно и использовать фоновые изображения CSS. Последний доступен начиная с первой версии CSS, просто укажите атрибут background-image, чтобы отобразить изображение позади элемента. Это использование называется CSS Sprites . Код теперь выглядит так:

<button class="update">Label</button>

button.update {
  background-image: url('path/to/my/image');
  background-repeat: no-repeat;
}

Проницательный читатель заметит, что предыдущий код имеет тот же эффект, что и <img> в <button>. Реальное использование состоит в том, чтобы использовать только ту часть главного изображения, которую мы хотим, что-то похожее на это:

button.update {
  background: transparent url('path/to/my/aggregate') -50px -50px no-repeat;
}

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

К счастью, мой старый друг Джавр имеет право помочь мне. Начиная с версии 3.2, он включает в себя SmartSprites , продукт, который просто выполняет всю агрегацию и вычисления для меня. Как это работает? Просто добавив несколько комментариев в ваш CSS:

• объявить, как будут построены главные (ие) изображения (и)
• сказать, какой спрайт будет участвовать в каком мастер-образе

/** sprite: master-sprite-gif; sprite-image: url('../img/master-sprite.gif'); sprite-layout: vertical */

button.one {
  background-image: url('../img/certificate_preferences.gif'); /** sprite-ref: master-sprite-gif; */
}

button.two {
  background-image: url('../img/inbox_into.gif'); /** sprite-ref: master-sprite-gif; */
}

button.three {
  background-image: url('../img/mail_forward.gif'); /** sprite-ref: master-sprite-gif; */
}

button.one{background-image:url('../cb3648025844/img/master-sprite.gif');background-position:left -0px;}
button.two{background-image:url('../cb3648025844/img/master-sprite.gif');background-position:left -48px;}
button.three{background-image:url('../cb3648025844/img/master-sprite.gif');background-position:left -96px;}