С марта я в свое «свободное» время работаю над каркасом, чтобы уменьшить количество и размер HTTP-запросов, возникающих при загрузке веб-страницы. Короче говоря, он объединяет и сокращает CSS и Javascript на вашей странице и автоматически спрайтов и оптимизирует фоновые изображения CSS. Все это делается на лету (с кэшированием) без изменения кода или конфигурации. Все обработанные и сокращенные ресурсы обслуживаются с помощью будущих заголовков кэширования и пользовательских ETag.
В августе у меня было что-то достаточно солидное, чтобы подтолкнуть к производству на платформе галереи Microsoft (что приносит домой мой бекон), на которой размещены галерея Visual Studio, галерея примеров кода MSDN, галерея Technet и Центр сценариев и многие другие галереи. В ноябре RequestReduce был принят MSDN и Technet Forums and Search, которые обслуживают миллионы просмотров страниц в день.
Результаты на платформе Microsoft Gallery
Я очень доволен результатами. Мы увидели 18% улучшение общего времени загрузки страницы. У нас большая международная аудитория, и чем дальше вы от штата Вашингтон, тем больше вы выиграете от этого улучшения. VisualStudio Gallery повысила свой показатель YSlow с B до A и перешла с 41 HTTP-запроса на 30. Кроме того, наш рабочий процесс для создания фоновых изображений полностью автоматизирован.
| Результаты из Китая без запроса: | Результаты из Китая с RequestReduce: |
|
|
 |
Key RequestReduce Оптимизация веб-страниц
RequestReduce будет делать следующее на любой странице, где загружен RequestReduce HttpModule:
- Ищите фоновые изображения, которые он может спрайтовать. Это процесс объединения нескольких изображений в одно изображение и использования некоторого синтаксиса CSS для извлечения определенных изображений из этого одного файла в фоновый класс CSS.
- Объедините эти изображения в один PNG-файл, который квантован до 256 цветов, а затем выполните optipng для сжатия без потерь. Неудовлетворенный качеством, которое я получал от популярных квантователей с открытым исходным кодом, я создал квантователь на основе алгоритма квантования Wu и выпустил его отдельно как nQuant для кодового комплекса. Это часто уменьшает размер изображения до 3 раз меньше, чем оригинал.
- Объединяет весь CSS в голове и уменьшает его. Это включает любой ресурс text / css, поэтому он включает в себя такие файлы, как WebResource.axd.
- Автоматически расширяет CSS @imports.
- Сокращает и объединяет все смежные javascript на странице, которые не имеют заголовка nocache или no-store и просрочены или имеют максимальный возраст менее недели. Это включает любой допустимый файл mime-типа javascript, поэтому включены ScriptResource.axd и WebResource.axd.
- Управляет загрузкой этих запросов CSS и изображений с помощью ETag и истекает заголовки, чтобы обеспечить оптимальное кэширование в браузере.
Другие отличные особенности RequestReduce
Поскольку я хотел развернуть RequestReduce на веб-сайтах Microsoft, ему, очевидно, нужно было масштабировать до миллионов просмотров и поддерживать в корпоративной среде. Для этого RequestReduce поддерживает:
- CDN хостинг CDN и Sprited изображений.
- Синхронизация сгенерированных файлов CSS и изображений на нескольких серверах через базу данных Sql Server или распределенную систему репликации файлов.
- Пользовательский API, позволяющий добавить собственный минификатор или отфильтровать определенные страницы или ресурсы.
Грубый RequestReduce отлично работает на небольшом сайте или блоге. Этот блог перешел с YSlow C на A после использования RequestReduce.
Почему я создал RequestReduce
Во-первых, я довольно долго искал идею для использования в проекте с открытым исходным кодом. Этот поразил меня во время бега по реке Саммамиш в феврале. За последние 10 лет я работал на многих крупных веб-сайтах с большим трафиком, которые использовали несколько сложных сред для организации CSS. Это часто делает включение минимизации невыполнимой задачей в сценарии сборки, особенно если CSS можно изменить вне диапазона. Кроме того, спрайты с изображениями всегда было трудно угнаться. Новые изображения добавляются в CSS, и мы слишком заняты реализацией функций; так что разбрызгивание этих изображений проваливается сквозь щели. Иметь процесс, который делал все это автоматически и во время выполнения (Примечание: RequestReduce не блокирует запросы, пока он это делает. Это было бы катастрофой перфорации. См. Здесьдля деталей.) казалось идеальным. Я хотел, чтобы подключи и играй решение. Поместите DLL в каталог bin, и это просто происходит.
RequestReduce делает это видение очень близким к реальности. В этой версии есть несколько вещей, которые RequestReduce ожидает от класса CSS, содержащего фоновое изображение , чтобы успешно его спрайтовать. В будущем выпуске я буду использовать CSS3, что будет означать, что RequestReduce сможет спрайтовать больше изображений в современных браузерах. Сайты галереи Microsoft должны поддерживать IE 7 и 8, поэтому первый выпуск должен был соответствовать CSS2.
RequestReduce теперь доступен для общественного использования и участия
Чтобы начать использовать RequestReduce:
- Если у вас есть Nuget , просто введите эту команду в консоли диспетчера пакетов и пропустите шаги два и три:
Install-Package RequestReduce
В противном случае загрузите последнюю версию RequestReduce .
- Извлеките содержимое загруженного zip и скопируйте RequestReduce.dll, а также optipng.exe в каталог bin вашего сайта. (Если по какой-то причине вы не можете поместить optipng.exe в свою корзину, RequestReduce будет работать должным образом, но пропустит сжатие без потерь своих изображений спрайтов.
- Добавьте RequestReduceModule в ваш web.config или используя графический интерфейс IIS
- Оптимизируйте свой CSS, чтобы помочь RequestReduce лучше находить фоновые изображения
- Необязательно: Настройте RequestReduce . Вы можете контролировать, где хранятся сгенерированные css и спрайты, есть пороговые размеры и указывать имя хоста CDN для ссылки. Вы также можете разветвлять исходный код RequestReduce со своего сайта github .
Для ссылок на документацию RequestReduce, отчеты об ошибках и последнюю загрузку, вы можете посетить
http://www.RequestReduce.com . Мне было бы очень интересно услышать любые отзывы об инструменте, а также о любых проблемах, связанных с его внедрением. Я планирую постоянно добавлять в этот проект больше возможностей для сокращения HTTP-запросов с любого веб-сайта.