Как увеличить скорость загрузки страниц. Часть первая.

На тему пользы скорости загрузки страницы было написано много статей. Все они приводят к выводу, что страница должна загружаться быстро. Тем не менее, многие вебмастеры, являясь счастливыми обладателями широкого канала, совсем забывают об оптимизации своей страницы не только для поисковых систем, но и для удобства пользователей. А ведь пользователь, не располагающий высокоскоростным доступом в интернет (таких в рунете всё ещё много), может просто не дождаться, пока страница загрузится целиком, и не увидит вашей полезной информации.

Сейчас такой фактор, как скорость загрузки страницы всё чаще начинает звучать из уст докладчиков на конференциях поисковых корпораций.

Недавно Google объявила о том, что такой фактор как скорость загрузки страницы будет влиять на позицию в выдаче. Вряд ли он будет весомым фактором, но ведь потеря даже одной позиции может привести к потери ваших денег. Думаю, что Яндекс скоро введёт новый свой поисковый алгоритм, который тоже будет уделять большое внимание скорости загрузки страниц.

Кстати, Михаил рассуждал о возможности влияния этого фактора на поисковую выдачу уже давно.

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

Проще будет владельцам статических страниц, сложнее владельцам CMS, которых сейчас большинство.

В своём цикле статей о скорости загрузки страниц я хочу рассказать об оптимизации как в общем, так и в частных случаях. Я расскажу об инструментах для измерения времени загрузки страницы, об оптимизации изображений, об оптимизации html, css и скриптов, о cookies и о многом другом. Всё, о чём я буду писать, я применю к своему блогу, так как после редизайна он требует серьёзной оптимизации.

Часть первая: Инструменты для измерения времени загрузки страницы.

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

Вот краткий список всех инструментов. Дальше я расскажу о каждом из них подробнее.

1. Webo.in
2. Pingdom.com
3. Websiteoptimization.com
4. Watchmouse.com
5. YSlow
6. Google Chrome
7. MyStats

1. Webo.in

Начну с такого сервиса, как webo.in. Это русскоязычный проект, в котором кроме инструмента можно найти ещё и много статей на тему оптимизации загрузки страниц.

Большинство статей являются переводами докладов работников поисковых и оптимизационных компаний, таких как Steve Souders, Chris Heilmann или Andy Hume. Также много и непереведённых статей, написанных работниками ресурса. Я не буду рассуждать на тему «Как лучше раскрывать профессиональные секреты, чтоб никто ничего не понял и в итоге заказал товар у вас», это материал для отдельной статьи, скажу только, что стоимость оптимизации в фирме составляет 5000 рублей.

Зарегистрировавшись, вы получаете доступ к личному кабинету, где вам предлагается проверить сайт или посмотреть диаграмму загрузки. Вам доступно 100 проверок в месяц, этого хватает вполне, несмотря на то, что количество регистраций ограничивается только количеством почтовых адресов (читай: freeware).

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

Диаграмма загрузки: показывает наглядно время загрузки каждого элемента. Как видно из картинки, у меня дольше всего загружается шапка. В принципе, только посмотрев на диаграмму, можно понять, в каком направлении следует работать.

Время ответа сервера: показывает в миллисекундах задержки DNS и хостинг-сервера. Если вы затачиваете сайт под рунет – инструмент годится, в ином случае – не особо.

Вы можете не париться и заказать у этой фирмы продукт WebOptimizer, его стоимость от 400 до 20000 рублей, в зависимости от лицензии (коммерческая/некоммерческая) и комплектации. Вот моя рефферальная ссылка со скидкой 10%.

А те, кто не располагают такими средствами остаются с нами.

2. Pingdom.com

Второй сервис, о котором хотелось бы поговорить это Pingdom.com с его инструментом Full Page Test.

Всё просто: вводите адрес сайта, получаете диаграмму загрузки, как и у webo.in. Из плюсов: не надо регистрироваться. Из минусов: меньше информации, чем у первых и нет советов. Из непонятного: результаты у этих двух сервисов разные.

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

Вариантов оповещения много: вам могут прислать письмо, написать в Twitter, оповестить через специальное приложение для iPhone, даже прислать SMS. Я специально проверил, SMS приходит даже в страны СНГ. В демо-версии доступно всего 20 смс, хостинг со столько раз падающим сервером надо ещё поискать. Потом можно регистрироваться заново, или проапгрейдится до платного.

3. Websiteoptimization.com

Утилита от websiteoptimization, англоязычного ресурса об оптимизации (откуда, кстати, ребята из webo.in часто переводят статьи). Графиков нет, зато есть много информации о проверяемом сайте. В целом впечатление хорошее, если бы не проблема с кодировкой.

Сначала выводятся таблицы с общими данными о скорости загрузки страницы в целом, о количестве различных элементов, об их типе.

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

Напоследок выводятся сравнения разных показателей с нормальными и приводятся советы по их оптимизации.

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

4. Watchmouse.com

Этот инструмент может похвастаться лишь одним: он измеряет время загрузки из разных точек мира. Ванкувер, Амстердам, Париж или другой город: сервис покажет, кто дольше всех ждёт данных от вашего сайта, и не врёт ли вам ваш хостинг-провайдер, когда говорит, что его абузоустойчивые сервера находятся в подвалах Нидерландов.

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

5. YSlow

Первым мы рассмотрим add-on к Firefox под названием YSlow, работающий на небезызвестном в кругу разработчиков add-on’е Firebug. Если у вас ещё не установлен огненный жук, то его необходимо установить немедленно, так как он представляет набор очень удобных и полезных инструментов в арсенале вебмастера. Он позволяет работать с CSS, JavaScript в режиме реального времени, имеет встроенный дебагер и т.д.

Что касается YSlow, то этот плагин разработан командой оптимизаторов Yahoo!, и представляет полный комплекс для анализа страницы и вывода статистики.

После установки обоих дополнений, необходимо запустить Firebug (Инструменты->Firebug, или просто F12), там выбрать вкладку YSlow. В браузре загрузить страницу, скорость загрузки которой необходимо тестировать, растянуть окошко пошире, для удобства, и запустить тест (кстати, можно выбрать один из нескольких наборов правил, rullset, или составить свой).

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

Также дополнение YSlow содержит несколько инструментов для упрощения работы, таких как инструменты для группирования разных элементов и тулза для удобной работы с сервисом smushit.com, к которому мы ещё вернёмся.

6. Google Chrome

Если у вас нет желания устанавливать дополнения, или возиться с онлайн-сервисами, то вам придёт на помощь Google chrome. Нажмите правую кнопку мыши и выберите «Просмотр кода элемента». Перейдите на вкладку Resources и включите Resource Tracking.

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

7. MyStats

Последний инструмент меня разочаровал, и я даже не хочу о нём говорить. Но, раз уж я обещал говорить не только об общей оптимизации, но и об оптимизации WordPress как частный случай, то представляю вам дополнение для WordPress – MyStats.

Инструмент удобный, позволяет анализировать и мониторить работу блога прямо из админ-панели. Так, как инструмент меня разочаровал тем, что он суётся часто не в свои дела и не позволяет отключить подобные опции, то скриншота он не получает.

На этом пока всё, в следующих статьях цикла я постараюсь рассказать о многих способах ускорения загрузки страниц вашего сайта.

Кстати, я готовлюсь к обнародованию результата эксперимента над Twitter’ом, с полным анализом и советами.

Ещё мне предстоит немного изменить мой инструмент для MassFollowing’а, а для этого опять придётся курить мануалы по JavaScript’у. Сейчас он работает, но не отображает результаты выполнения. Добавлять можно по 100 человек за 1 раз.

Оставайтесь на связи.

Aronsky.

Related posts:

1. Оптимизация изображений. Как увеличить скорость загрузки страниц, часть вторая.
2. Скорость топовых блоггеров. Ускорь свой сайт – 4.
3. Семантическое ядро. Часть первая: теория
4. Ускоряем сайт часть 3. WEBO Site SpeedUP