ajaxmin inputfile.js -o outputfile.js

Кроме того, Microsoft Ajax Minifier имеет еще целый ряд параметров для тонкой настройки механизма сжатия JavaScript и представления результата. Ознакомиться со всеми доступными параметрами можно, запустив без параметров приложение ajaxmin из командной строки.

Минимизация и сжатие JavaScript-файлов может значительно сократить размер передаваемых от сервера к клиенту данных. Так, например, минимизация исходного кода библиотеки jQuery позволяет сократить ее размер с 125 до 53 Кбайт.

Уменьшение CSS

JavaScript-файлы, как и файлы со стилями CSS, могут быть сжаты для уменьшения размера передаваемых данных. Для решения задачи минимизации CSS-файлов существует ряд инструментов, самый популярный из которых CSSTidy.

Примечание

CSSTidy можно скачать по адресу http://csstidy.sourceforge.net/.

***********************

Использование CSSTidy по заверениям и тестам авторов может дать в среднем 33 % сжатия файлов со стилями. Для управления работой инструмента у него присутствует ряд параметров. Для минимизации файла достаточно указать его имя как параметр:

csstidy mycssfile.css

Для записи результата в другой файл необходимо указать имя выходного файла в виде второго параметра:

csstidy mycssfile.css myoutputfile.css

Остальные параметры можно получить, запустив csstidy без параметров.

Уменьшение изображений

Поскольку изображения — это важная часть почти каждого веб-сайта в Интернете, уменьшение размера изображений может принести значительный прирост производительности при передаче данных от сервера к клиенту.

Для оптимизации разных типов изображений можно воспользоваться разнообразными инструментами:

□ для уменьшения файлов изображений типа PNG без потери качества можно использовать популярный инструмент pngcrush (адрес проекта в Интернете http://pmt.sourceforge.net/pngcrush/);

□ для уменьшения и оптимизации файлов формата JPEG используется другой инструмент — jpegtran (скачать можно по адресу http://jpegclub.org/), который позволяет, используя свойства JPEG, достигать более высокого уровня сжатия изображения;

□ для оптимизации GIF-изображений можно первоначально перевести их в PNG-формат с помощью инструмента gif2png (скачать можно по адресу http://www.catb.org/~esr/gif2png/). В случае, когда GIF-файлы анимированы, их можно оптимизировать с помощью инструмента GIFsicle (скачать можно по адресу http://www.lcdf.org/gifsicle/).

Кроме программных инструментов по оптимизации изображений на компьютере есть ряд онлайн-ресурсов, которые позволяют сделать это так же эффективно. Одним из таких ресурсов является Smush.It от компании Yahoo!, который расположен по адресу http://developer.yahoo.com/yslow/smushit/.

Другие способы клиентской оптимизации

Кроме описанных ранее способов основной оптимизации есть еще несколько возможностей по увеличению отзывчивости и скорости работы вашего сайта.

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

По меркам скорости загрузки страниц каждый запрос браузера на сервер отнимает значительное время. Поэтому необходимо уменьшать количество обязательных запросов на сервер. Такие запросы формируются для каждого ресурса, используемого на странице. Таким образом, необходимо уменьшать количество уникальных ресурсов. Несколько советов помогут вам в этом:

□ собирайте все CSS-стили, используемые на странице, в один файл вместо использования нескольких отдельных CSS-файлов;

□ в случае, если код CSS-стилей небольшой по объему, рассмотрите возможность внедрения стилей в тело страницы вместо использования отдельного CSS-файла;

□ то же самое относится и к JavaScript-файлам, старайтесь избегать наличия нескольких JavaScript-файлов, вместо этого сведите их количество к минимуму;

□ все внешние статические ресурсы, такие как изображения, скрипты или стили, имеет смысл загружать со специального выделенного сервера, снижая нагрузку с основного сервера приложения;

□ в случае, когда нет возможности внедрить дополнительный сервер для статических ресурсов, рассмотрите возможности использования сторонних CDN-серверов для разного рода ресурсов. Например, скрипты jQuery могут быть загружены со специальных высокопроизводительных серверов Google или Microsoft. C серверов Microsoft можно загружать и многие другие скрипты: ASP.NET Ajax или jQuery Validation.

Уменьшение количества запросов на сервер не только разгрузит вам сервер, но и увеличит для вашего пользователя ощущение отзывчивости сайта.

Отказ от перенаправлений

Каждое перенаправление запроса (redirect) увеличивает для посетителя вашего сайта время ожидания. Старайтесь избегать перенаправлений и сведите их использование к минимуму или вовсе откажитесь от них.

Использование CSS Sprites

Техника спрайтов — это распространенная техника клиентской оптимизации работы с изображениями. Суть техники состоит в том, чтобы объединить набор небольших изображений в одно большое, чтобы впоследствии отображать куски этого изображения с помощью CSS-свойства background-position.

Преимущество такого метода в том, что вместо множества изображений с сервера загружается лишь одно. Таким образом, уменьшается количество запросов на сервер, увеличивается отзывчивость сайта, посетитель сайта быстрее получает результаты запроса.

Примечание

Подробное рассмотрение механизма спрайтов выходит за рамки этой книги. Однако мы должны отметить, что поддержка спрайтов, вероятно, будет включена в следующие версии ASP.NET MVC или AsP.NET MVC Futures.

**************************

Размер cookie

Так как cookie передаются с каждым запросом от клиента к серверу, следует избегать устанавливать на клиенте больших размеров cookie. Каждый элемент cookie может содержать до нескольких килобайт информации. Поэтому несколько таких элементов могут значительно увеличить поток данных. Здесь действует только одно правило: избегайте сохранения данных в cookie без особой нужды.

Заключение

Тенденции современного Интернета таковы, что значительная часть функционала переносится с сервера на браузер пользователя. Страницы сайта, которые ранее служили для простого отображения информации, теперь все чаще наполняются насыщенным JavaScript-кодом. В связи с ростом роли клиентского кода, вопросы клиентской оптимизации становятся все более важными.

В этом приложении были приведены некоторые техники, которые помогут вам создавать производительный и оптимизированный клиентский код. Используя их, вы сможете уменьшить нагрузку на сервер, увеличить отзывчивость сайта для клиента и значительно повысить производительность ваших проектов.

ПРИЛОЖЕНИЕ 3

Ресурсы по MVC Framework