С каждым годом Интернет растет вширь и вглубь. Увеличивается пропускная способность каналов, пользователи переходят с коммутируемого доступа на безлимитный. Сайты становятся больше по размеру, больше по наполнению и сложнее во взаимодействии. Размеры загружаемых файлов при этом увеличиваются многократно, а время ожидание пользователей не уменьшается.
За последние 5 лет средний размер веб-страниц вырос втрое (по данным исследования Akamai), а за последний год — в полтора раза (по данным webo.in). При этом каждая страница использует в среднем по 50 объектов, что крайне негативно сказывается на общем времени загрузки. Только порядка 5-10% от общего времени загрузки приходится на серверную часть. Все остальное составляет именно клиентская архитектура.
Что обычно видит пользователь, заходя на ваш сайт? И как долго? 75% посетителей уйдут после 10 секунд. При этом наиболее характерным временем будет 4 секунды: если за это время сайт загружается у 90% пользователей, то вы счастливый владелец быстрого интернет-ресурса.
Однако и здесь дорога каждая миллисекунда. Недаром высоконагруженные проекта типа Google, Amazon, Flickr, Netflix, Яндекс, вКонтакте и Одноклассники так серьезно подходят к вопросу скорости загрузки сайтов. За каждым потерянным моментом времени кроется определенная сумма денег. Это именно то место, где время тождественно равно деньгам.
Основное время при загрузке страницы уходит именно на клиентскую часть. Серверные затраты обычно крайне малы и составляют от 50 до 500 мс. Среднему пользователю на самом деле абсолютно все равно, сколько страница будет создаваться на сервере, если он ее увидит через полсекунды. В этом случае фокус смещается именно на клиентскую, а не серверную оптимизацию.
Характер проблем варьируется от сайта к сайту. Иногда он заключается в особенности интернет-подключения основной массы пользователей ресурса (например, если широко используются модемы). Иногда — в сложности самого сайта и неоправданном использовании ресурсов сети. Иногда — в неграмотном использовании клиентских технологий и большого количества разнородных решений. Но все эти проблемы можно решить.
На самом деле, можно достаточно быстро принять решение о качестве сдаваемого интернет-проекта с помощью бесплатных инструментов. Что же действительно влияет на качество:
Очень часто скорость работы оказывает ключевое влияние на конвертацию посетителей в доход сайта. Особенно это характерно для интернет-магазинов. Как мы можем проверить эту скорость? Для серверной стороны существует инструмент host-tracker.com, с помощью которого можно установить характерное время доступа к сайту из различных точек земного шара. Также он позволяет оценить характерное время создания страницы на сервере (если минимальное время доступа к сайту больше 1с, то уже стоит бить тревогу).
Для проверки качества скорости загрузки клиентской составляющей можно воспользоваться либо YSlow под Firebug для Firefox (оценка должна быть не менее 70, лучше всего не менее 80). Или же бесплатным инструментом webo.in (простая оценка не ниже 70, лучше не ниже 80).
Это, в первую очередь, стоимость его поддержки и развития. Сайт, сделанный грамотно и по всем стандартам, гораздо проще развивать, поскольку времени написание дополнительного кода при наличии хорошей, стандартной базы уходит значительно меньше. Это и масштабируемость проекта, когда разработчики предусматривают большой «запас прочности» для ежедневных посещений, и в пиковые часы сайт будет работать в штатном режиме, не требуя дополнительного масштабирования.
Скорость создания HTML-страниц и общее время загрузки очень сильно влияет на доступность сайта. Ключевым параметром здесь является «загрузка за 4 секунды» и более быстрая загрузка, чем у основных конкурентов. В отсутствии основных преимуществ на рынках с высокой конкуренцией скорость работы сайта может оказаться решающим фактором при принятии решения.
Для решения описанных проблем прежде всего нужно начинать с профессионального подхода при разработке какого-либо веб-приложения. Он обязательно должен опираться на использование веб-стандартов, в том числе и в области скорости загрузки и взаимодействия с пользователем.
Для полноценной оптимизации крупные компании разрабатывают специализированные решения. Однако даже в этом случае они опираются на многочисленный свод правил, описывающих наиболее оптимальное взаимодействие браузера с пользователем. Для среднего размера сайтов, использующих какое-либо стандартное решение для обслуживания контента, стоит обратить свое внимание на решения по автоматизации клиентской оптимизации.
Это GetRPO.com, который направлен на сайта на базе сервера IIS. Для Apache и PHP существует два аналогичных решения: PHP Speedy (как плагин для Wordpress и Joomla!, ускорение Joomla!) и Web Optimizer (как отдельное веб-приложение). Каждое из описанных решений позволяет свести затраты на внедрение оптимизации к минимуму и получить весьма неплохой результат для показателя скорости загрузки страницы.
Наконец при разработке сайтов стоит руководствоваться принципом «мягкой деградации», согласно которому нужно наращивать функциональность в зависимости от способности браузера, а не наоборот. Например, можно использовать самые передовые технологии при верстке, которые поддерживаются не очень большим числом браузером, но должны поддерживаться значительной их долей, скажем, через год. Тогда определенные решения будут выглядеть безупречно у небольшого числа пользователей, у остальных — хорошо или приемлемо. Но с прогрессом интернета число последних будет стремительно уменьшаться.
Напоследок стоит упомянуть про возможность использования распределенной сети серверов для сведения времени ответа к минимуму. В этом могут помочь существующие системы «облачных» вычислений, такие как: Amazon S3, Google Apps, Microsoft Azure. Также аналогичная система есть и на российских просторах. Это первая в России CDN — NGENIX.
Все методы, которые можно применить для ускорения загрузки сайта, стоит разделить на две основные группы:
data:URI). Объединение фоновых иображений в одно, либо внедрение их прямо внутрь файла стилей. Для автоматизации этого подхода существует два онлайн-инструмента: sprites.in и duris.ru — Data URI (CSS) Sprites.gzip-сжатия для всех типов файлов, для которых это актуально (текстовые форматы и .ico).jpegtran, gif2png, pngcrush, optipng.Все эти советы с детальным анализом эффективности, а также большое количество прикладного и новаторского материала приведено в первой в России специализированной книге, посвященной всем тонкостям клиентской оптимизации — «Разгони свой сайт». В книге описаны все тонкости архивирования и кэширования, объединения и разъединения файлов, а также особенности оптимизации CSS- и JavaScript-логики. На данный момент продается во всех больших книжных магазинах Москвы и доступна через ряд интернет-магазинов, например, ozon.ru.