post Категории: SEO статьиpost Comments (95)

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

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

В этой статье содержатся некоторые практические советы по оптимизации скорости загрузки веб-сайта.

Инструменты

Наиболее легкие и удобные инструменты - YSlow и Page Speed Plugins для Firefox/Firebug.

После установки всех приложений, в Firefox зайдите на сайт, который хотите оптимизировать. Кликните на иконке Firebug, чтобы открыть консоль. Кликните на вкладке Page Speed, а после на Analyse Performance. Через несколько секунд Вы получите результат. Ваша цель набрать как можно больше баллов из 100 возможных. Чаще всего оказывается около 70/80.

Page Speed

Удобство Page Speed plugin состоит в том, что можно просмотреть дополнительную информацию по клику на каждом разделе, которые отмечены разными цветами, в зависимости от того, насколько хорошо они оптимизированы. Красный - плохо, желтый - средне, зеленый - отлично.

Page Speed Performance

Что вы можете сделать

Большинство типичных ошибок при оптимизации скорости страницы описаны ниже. Изучим каждую из них и узнаем, как их исправить.

Сократите CSS

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

Неоптимизированный CSS

Несжатый CSS с разрывами строк, запятыми, комментариями, и т.п.

Хорошим решением будет сохранить оригинал для разработчиков и минимизировать копию для сайта. Это уменьшит размер файла на 20-30%, что для файлов больших размеров очень критично.

Ужатый CSS файл

Сжатый CSS - размер файла уменьшился на 28%

В Page Speed есть встроенный компрессор, но один из самых удобных http://www.csscompressor.com/

Сократите JavaScript

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

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

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

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

Избыток JS файлов

Каждая строка - запрос файла. Всего 14.

Как видите, здесь много запросов JavaScript-файлов, которые можно скомбинировать в один файл, и запросить только один раз.

Используйте кэш браузера

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

Страница от Google с инструкциями - https://code.google.com/speed/page-speed/docs/caching.html

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

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

Оптимизируйте изображения.

Если на Вашем сайте много изображений, особенно большого размера, загрузка занимает много времени. Используйте подходящие форматы. Мастер сохранения результатов в Photoshop или Fireworks, сообщит Вам размер файла в байтах или килобайтах.

Разница PNG/JPG

Простые изображения будут меньше в PNG формате, а более сложные в JPG. Есть также разные уровни качества. Зачем экспортировать изображение в максимальном качестве в JPG, если нет ощутимой разницы между высоким и средним качеством?

Также при экспорте файлов можно отдать предпочтение Fireworks. (Пример:"Если экспортировать бэкграунд с помощью Fireworks, можно уменьшить файл до 20кб. Если на сайте 16000 посетителей в день, в среднем. 20кб х 16000 = 320000 кб. Да, это 320 мб в день")

Избегайте некорректного CSS-кода

Есть много веб-сайтов, посвященных изучению CSS. На каждом из них можно найти много эффективных подсказок.

Включите сжатие

Сделайте возможным сжатие данных на своем сервере (Gzip или deflate). Это сократит размер html-файлов, css и т.п. Больше о сжатии можете узнать здесь (https://code.google.com/speed/page-speed/docs/payload.html#GzipCompression)

Используйте CDN (сети доставки контента)

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

Используйте систему кэширования

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

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

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

Эта тактика актуальна только для больших сайтов. Если Вы используете готовые CMS, вроде WordPress или Magento, осуществить кэширование очень легко.

WordPress

Лучший WordPress плагин для кэширования - это hyper cache. Установка и конфигурация занимают не больше пяти минут. Ссылка на плагин http://wordpress.org/extend/plugins/hyper-cache/. Также существует много других плагинов для кэширования, которые легко найти с помощью Google.

Ecommerce

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

Используйте CSS-спрайты

CSS-спрайты позволят не только сократить количество запросов, но и уменьшат размер изображений.

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

Спрайты Google

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

Пишите корректный код

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

Если ничего из вышеперечисленного не помогло

Итак, Вы сделали все возможное, но Ваш сайт все еще медленно загружается? Что еще можно сделать?

Проверьте оборудование

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

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

Обновите программное обеспечение

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

Заключительные мысли

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

Наш совет: полностью проработайте список, исправьте все, что возможно. Никому не удастся получить 100/100, но можно улучшить имеющийся результат.

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

#1

Полезная фича:)

Евгений, 29/05/2011 - 12:07
#2

Можно поставить Webo Speed Up для любого сайта, он на мой взгляд проще.

Ерофей, 30/05/2011 - 18:33
#3

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

Владимир, 30/05/2011 - 19:27
#4

Слушай а ведь работает, спасибо.

anton dakilod, 31/05/2011 - 11:52
#5

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

Guest, 31/05/2011 - 13:13
#6

Скорость сайта думаю в скором времени станет основополагающей… мало пользователей готово сидеть и ждать минуту или около того, пока загрузиться сайт…

Роман, 02/06/2011 - 11:00
#7

Если о скорости не позаботиться, то потеряешь многое, я не ленюсь и не жалею времени на оптимизацию.

Konstantin, 02/06/2011 - 13:27
#8

Как обычно просто супер обьёмная статья и как всегда дочитал до конца

Guest, 02/06/2011 - 16:05
#9

Я только начинаю вникать во все тонкости seo, и со скоростью тоже бывают проблемы, так что спасибо за ваш полезный блог!

MiaSol, 05/06/2011 - 19:25
#10

спасибо большое за полезный пост! Это как раз для моего сайта – нужно будет заняться внутренней оптимизацией сайта!

Vadim, 09/06/2011 - 16:50
#11

Я еще не понимаю технологию seo, но благодаря вашей статье уже не чувствую себя ламмером. Спасибо.

Poet, 11/06/2011 - 08:17
#12

Будет полезно для новичков!
Скорость очень важна для гугла.

Atamovich, 12/06/2011 - 11:44
#13

А я думал если все пробелы снести в css то ошибки будут, спасибо, у меня есть пару блогов где теперь попрактикую со скоростью.

Aksin, 12/06/2011 - 23:34
#14

Спасибо очень полезный пост!

REACTOR, 13/06/2011 - 12:36
#15

Про ужатый css это сильно. как то даже не задумался об этом.

litw, 13/06/2011 - 17:01
#16

Фича очень полезная и статья написано грамотно, интересно было почитать. Спасибо автору!

wmgarant, 15/06/2011 - 15:19
#17

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

Guest, 15/06/2011 - 16:48
#18

так ли сильно скорость закрузки влияет на ранжирование.

Mehanik, 18/06/2011 - 04:13
#19

Скорость это всё народ в наше время жутко не терпилив секунд 7 не грузится В ТОПКУ!

Сергей Булгаков, 25/06/2011 - 15:43
#20

скорость загрузки сильно в гугле влияет, в яндексе не особо, это что касается для роботов, а для пользователей для всех это естественно

games, 25/06/2011 - 19:31
#21

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

FashionMan, 26/06/2011 - 03:28
#22

Никогда не задумывался, что CSS можно сжать на 28%, всегда думал, что правильно оформленный css – это всегда с пробелами и с новой строчки. Теперь буду экспериментировать.

Александр, 27/06/2011 - 09:31
#23

… ну и работки ты мне подкинул…)))
… спасибо, толково написал … пробую..

Zerber, 29/06/2011 - 02:08
#24

Информация очень полезна!
ВЫ указали какой плагин нужно использовать для увеличения скорости загрузки страниц сайтов на вордпресс, а вот как быть если у меня сайт на cms Joomla. Подскажите пожалуйста, если Вы, конечно, знакомы с этой системой управления…
За ранее спасибо!

Виталий, 09/07/2011 - 13:00
#25

Спасибо за отличные инструменты, буду работать над скоростью!

Gennady, 14/07/2011 - 10:27
#26

Даже и не знал что у этого плагина такая функция есть!

Vovan, 14/07/2011 - 16:29
#27

По-моему скорость загрузки не так влияет на выдачу, чтобы над этим заморачиваться!

Profit Hunter, 14/07/2011 - 16:44
#28

Незнал что у фаербага есть такие функции ))

Tolik, 15/07/2011 - 14:52
#29

Не вижу смысла! Я влияния скорости загрузки на выдачу не замечаю!

Anton, 15/07/2011 - 15:10
#30

Оптимизация кода и правильное построение структуры кода с выделением CSS и скриптов в отдельные файлы – это, можно сказать, прописные истины. Новичкам это стоит запомнить.

Но так сильно замарачиваться по поводу сжатия кода и данных, уменьшение картинок и пр. – думаю, это перебор. Когда цена вопроса всего в долях секунды на загрузку, вряд ли они сыграют хоть какую-то большую роль в ранжировании.

Zabey, 16/07/2011 - 13:27
#31

Я бы не стал так сильно заморачиваться! Хотя несколько пунктов можно выполнить!

Roman, 29/07/2011 - 11:16
#32

На выдачу то оно может и не влияет, но ведь скорость загрузки тоже важна, верно? Я лично пользуюсь минимизацией и минификацией css и js файлов. Сжатие местами до 50% доходит

Александр, 29/07/2011 - 14:27
#33

Мне кажется это не даст какого-либо ощутимого эффекта в выдаче!

Maxim, 02/08/2011 - 15:45
#34

не задумывался что скорость сайта влияет на выдачу!

Dimon, 05/08/2011 - 16:10
#35

Про файрбаг знал, за остальное – спасибо.

Makeller, 06/08/2011 - 17:28
#36

Очень много нового и интересного узнал…ну что ж , вперед оптимизируем скорость сайта!!)

Саня, 18/08/2011 - 16:14
#37

ХМ а я и не знал что скорость загрузки влияет на ранжирование, теперь понятно почему мой сайт с гораздо более лучшим контентом оказывается на 8м срочке выдачи – слишком много JQuery слайдеров на главной. Спасибо за статью, будем экспериментировать с сайтом.

Алексей, 20/08/2011 - 14:29
#38

Скажите, очень надо!А к кому посоветуете обратится для подобной работы по одному сайту.
Сам я это ни зачто не сделаю…

eyez, 27/08/2011 - 09:00
#39

eyez, например на forum.searchengines.ru или на фриланс ресурсы

Zuzlan, 30/08/2011 - 13:27
#40

И стоит столько парится ради ускорения загрузки сайта на секунду?

Maksim, 09/09/2011 - 09:21
#41

Если это повлияет на выдачу, то наверное стоит!

Maxim, 13/09/2011 - 09:43
#42

Секунда – это очень много, думаю врядли столько получится выиграть!

Viktor, 14/09/2011 - 14:57
#43

Наверно и себе попробую, посмотрим как на выдаче это отразится!

Alex, 16/09/2011 - 11:17
#44

Половину шагов уже проделал, буду трудиться дальше!

Stas, 19/09/2011 - 15:50
#45

Проделал все по инструкции, сайт грузится быстрее, но на выдаче пока не отразилось

Ivan, 20/09/2011 - 12:11
#46

Мне кажется, что не стоит так парится. Наврядли эффект будет значительным

Filipp, 23/09/2011 - 16:04
#47

Несколько шагов пропустил, но все-равно сайт стал грузится быстрее!

Dmitry, 26/09/2011 - 15:53
#48

Стоит ли оптимизировать сайты на UCOZ хостинге?

Кирилл, 29/09/2011 - 10:30
#49

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

mazuka, 01/10/2011 - 09:10
#50

Нужно на своем сайте опробовать!

Boris, 05/10/2011 - 15:59
#51

А я разницы не увидел! Столько трудов, а загрузка не ускорилась!

Juriy, 06/10/2011 - 16:24
#52

По идее ускорение загрузки должно быть существенным и ощутимым!

Alexandr, 07/10/2011 - 11:07
#53

Juriy, сочувствую прямоте ваших рук

Zuzlan, 10/10/2011 - 14:25
#54

А насколько от этого изменится выдача поисковиков? Насколько значителен фактор скорости загрузки страницы?

Alexej, 13/10/2011 - 10:25
#55

Alexej, лучше врядле станет. Хуже – может.

Zuzlan, 13/10/2011 - 14:52
#56

А если лучше не станет, то зачем такое делать?

Sergey, 13/10/2011 - 16:14
#57

В принципе советы хорошие. Некоторые из них я знал, а о некоторых услышал впервые

YYN, 14/10/2011 - 07:11
#58

Хуже может стать не от оптимизации, а в случае когда все очень запущено

Zuzlan, 14/10/2011 - 11:32
#59

как по мне это тупо, разницы невооружённым глазом не увидишь!

Yaroslav, 14/10/2011 - 15:21
#60

Думаю это даст неплохой прирост скорости, тоже такое сделаю!

valerij, 19/10/2011 - 12:51
#61

Пользуюсь простым google.com/webmasters

Vladimir, 19/10/2011 - 18:32
#62

Увидишь-увидишь, особенно если сайт тяжелый!

vyachestav, 20/10/2011 - 11:18
#63

Интересная статья, надо и на своем сайте проексперементировать!

Vadim, 26/10/2011 - 11:39
#64

Думал, что все намного проще! Но прийдется потратить не один вечер!

Juriy, 27/10/2011 - 14:34
#65

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

marauto, 31/10/2011 - 13:38
#66

Соберусь с силами и тоже такое проделаю, лишним не будет!

Mihail, 31/10/2011 - 16:45
#67

Я тоже никак не соберусь! Времени на все не хватает, но постараюсь это повторить!

artem, 01/11/2011 - 16:39
#68

Проделал все по инструкции, эффект поразил! Интересно, как на выдаче это отразится!

Ruslan, 16/11/2011 - 12:47
#69

Отличная инструкция – все подробно и наглядно, буду пробовать!

Andrej, 17/11/2011 - 13:37
#70

YSlow мне что-то совсем не нравится, сильно тормозит из-за него браузер!

vawsan, 17/11/2011 - 20:11
#71

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

Jaraia, 18/11/2011 - 10:08
#72

Еще полезной фичей является анализ скорости загрузки страницы в google analitycs.

И не стоит слепо повторять все советы. Известна мысль, что оптимизировать нужно узкие места, а не все подряд.

oroom, 25/11/2011 - 01:43
#73

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

Бездельник, 04/12/2011 - 17:27
#74

Отличная инструкция! Проделал это все с своим сайтом, грузится стал ощутимо быстрее!

Artem, 20/12/2011 - 16:07
#75

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

дизайнер М, 27/12/2011 - 14:56
#76

ПейджСпид отличная надстройка, с ее советами увеличил скорость зазрузки магазина на Джумле в 2 раза!

uptempo, 06/01/2012 - 23:49
#77

А свой блог на dle перенес и скорость загрузки в разы увеличилась!

Блог на Блог, 11/01/2012 - 07:38
#78

Ну про пробелы в коде и css сильно фанатично, потом любые правки в код наткнутся на такие грабли понимания, что КПД явно этого не стоит

Массажистка, 20/01/2012 - 16:20
#79

Я просто как то сделал на блоге опрос, устраивает ли посетителей время загрузки страницы. Большинство устраивает и я пока успокоился)

deSiter, 23/01/2012 - 15:59
#80

Отличный подробный мануал! Мне очень помог! Сайт теперь просто летает!

Rustan, 31/01/2012 - 12:20
#81

У меня только topsy притормаживает…

Рита, 06/02/2012 - 18:42
#82

Нового не много узнал , да скорость очень важный фактор, не люблю сайты на которых куча рекламы и загружаются долго =(…, сразу закрываю, а оптимизировать надо согласен сайт грузится в разы быстрее =)

Dima, 07/02/2012 - 21:34
#83

У меня после данной процедуры сайтик стал работать куда-шустрее! Спасибо за мануал!

Viktor, 08/02/2012 - 17:14
#84

Вообще, если сайт изначально сделан граммотно, то этого всего делать и не нужно!

Mikhail, 09/02/2012 - 09:50
#85

Правильно, пора оптимизировать сайты, чтоб они быстрее грузились! А то на некоторые неприятно заходить!

Vladimir, 09/02/2012 - 16:45
#86

Спасибо за инструкцию. Теперь сайт заметнее быстрее грузиться стал. Мне помогло.

Мудрый, 16/02/2012 - 08:21
#87

Отличный способ, мне очень помогла такая оптимизация! Сайт работает заметно быстрее!

Maksim, 20/02/2012 - 16:57
#88

Вот CSS спрайты пока не даются.

deSiter, 29/02/2012 - 12:58
#89

Есть хорошие бесплатные сервисы для оптимизации изображений, например punypng.com или jpegmini.com

dbaik, 07/03/2012 - 10:17
#90

Мой сайт теперь работает очень быстро, отличный мануал!

Ruslan., 29/03/2012 - 15:39
#91

Полезная инструкция, многие сайты нуждаются в такой процедуре!

Rodion, 30/03/2012 - 14:17
#92

Полезная статейка, меня эта тема очень волнует, тк сайт очень тупит! Значит буду делать как описано в мануале!

Maksim, 03/04/2012 - 09:10
#93

Недавно все проделал, сайт просто залетал!

Artyom, 03/04/2012 - 13:27
#94

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

Татьяна, 05/04/2012 - 19:05
#95

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

slotico, 06/04/2012 - 12:32