Коротко об оптимизации
Для ускорения загрузки веб-страниц используют клиентскую оптимизацию. Ее основная цель сделать максимально быстрым отображение содержимого запрошенной станицы. Обычно оптимизируются такие объекты, как графические элементы, прикрепленные изображения, внешние подключаемые файлы со стилями и скриптами, структура тегов.
Вначале процесса оптимизации нужно досконально изучить оптимизируемый сайт или страницу, провести анализ производительности и определить цель оптимизации. Обычно преследуются такие цели:
- ускорить загрузку выбранной страницы;
- увеличить максимально скорость загрузки станиц одной определенной группы при просмотре в любом порядке;
- максимально уменьшить время от запроса до отображения первых элементов для взаимодействия пользователя с сайтом.
Чаще всего оптимизируют главную страницу сайта и страницы с наибольшей посещаемостью. - Именно они создают основную нагрузку на сайт. Иногда под страницей с наибольшей посещаемостью подразумевается группа страниц, которые имеют идентичную структуру, генерируются по общим правилам, но различаются лишь содержимым.
Для сбора информации о сайте существует два популярных сервиса:
- Google Analytics. Пожалуй, самый известный. С его помощью можно получить множество полезной информации о посетителях. Определить их количество, время посещения сайта, откуда и куда был сделан переход. Доступны аналитические инструменты.
- Яндекс.Метрика. Здесь используются практически те же функции. Достаточно полезным инструментом Яндекс.метрики является карта кликов и скроллинга, использование которых позволит визуально определить самые интересные участки вашего сайта.
Оба сервиса умеют отображать отчеты в приятном глазу визуальном формате, наглядно демонстрирующем те или иные показатели. Кроме того, для сбора информации сгодятся и обычные счетчики посещений сайта типа LiveInternet.ru или MyCounter.ua – они так же предоставляют полезную информацию, хотя и в менее удобном формате.
После сбора статистики популярных страниц, необходимо открыть браузер и попытать определить, что замедляет скорость загрузки страницы. В зависимости от браузера, используются инструменты FireBug (для Mozilla Firefox), Opera Dragonfly (для Opera) или "Инструменты разработчика" для браузеров на основе движка Chromium.
Открываем в браузере нужную страницу и смотрим на содержимое вкладки "Сеть" (Network). Здесь будут отображены все запросы, которые осуществляет браузер загружая страницу. Справа, напротив каждого такого запроса, рисуется график времени загрузки. Если на странице используются "тяжелые" элементы (несжатые изображения, автозагружаемые аудио- видео- материалы, Flash анимация), то здесь это сразу можно будет увидеть. Кроме тяжелых элементов, замедлить загрузку страницы могут мелкие картинки, если их будет достаточно много. Но чаще всего, заметные тормоза возникают благодаря стилям или скриптам, которые загружаются с перегруженных серверов. Хотя размер таких файлов и несущественен, поскольку браузер не может корректно завершить отображение страницы без их полной загрузки.
Каждая конкретная проблема решается своими методами. Так, например, несжатые изображения нужно ужимать до такого размера, в котором они отображаются пользователю; автозагрузку аудио и видео чаще всего желательно отключать; а популярные скрипты лучше всего загружать с CDN (например, yandex.st). Для более глубокой оптимизации (упрощение структуры тегов, соединение мелких графических элементов в один файл, уменьшение объема css и javascript), если вы ничего в этом не понимаете, лучше обратится к знающим людям. Найти их можно либо на фрилансе, или на узкоспециализированных тематических форумах.