Скорость загрузки сайта, как фактор ранжирования Google

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

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

В рамках своих требований к сайтам, Google рекомендует воспользоваться плагином для Firefox Page Speed. Этот плагин проверяет скорость загрузки сайта и выдаёт рекомендации по увеличению скорости. К сожалению, большинство рекомендаций невозможно осуществить на бесплатных платформах. Самые серьезные проблемы - это кэширование изображений, в настройках blogger отсутствует данная функция, это могут себе позволить только владельцы автономных блогов, имеющие доступ к серверу.
Так же, чтобы выполнить хотя бы половину этих рекомендаций, необходимо удалить со своих блогов виджеты, кнопки, изображения, баннеры с рекламой:). Не правда ли смешно, если блог не просто блог, но и ещё какой-то источник доходов. При каждой загрузки страницы, каждый виджет, кнопка, баннер, изображение обращаются к серверу, на котором они находятся, и подгружаются оттуда. Так же, существует такая проблема, что у каждого виджета есть свой стиль CSS, который находится на сервере, и отсутствует в шаблонах blogger, и какая-то часть этих стилей нами не используется, но при этом постоянно подгружается с сервера. На что плагин так же жалуется и рекомендует удалить ненужные стили.
Но не смотря на все это, есть пара рекомендаций по скорости загрузки блога, которые можно осуществить на платформе blogger.
Плагин Page Speed очень серьёзно ругался на то, что у изображений не указаны ширина и высота. Вероятней всего это связано с тем, что у браузера возникает задержка загрузки всей страницы из-за того, что он не знает, какое будет изображение по размеру, и из-за этого ждёт, пока оно всё подгрузится. Если же мы сообщим браузеру в своём исходном коде, что здесь будет изображение определённого размера, то браузер оставит ровно столько места, сколько нужно и пойдет дальше грузить страницу.
Поэтому, когда вы написали статью, загрузили к ней картинку, переходим на вкладку "Изменить HTML". Весь код нашей картинки будет выглядеть примерно так:

<div class="separator" style="clear: both; text-align: center;">
<a href="http://1.bp.blogspot.com/_G92voTj-yF0/S96uBuaM4XI/AAAAAAAAAMM/ltg9TiclsFU/s1600/speed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="//1.bp.blogspot.com/_G92voTj-yF0/S96uBuaM4XI/AAAAAAAAAMM/ltg9TiclsFU/s1600/speed.png" /></a></div>

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

ширина - 300 пикселей
высота - 220 пикселей

поэтому код размеров для неё будет выглядеть так:

style="width:300px; height:220px;"

Эти данные необходимо разместить внутри кода, которые я выделила в предыдущем примере, выглядеть это должно вот так:

<img border="0" src="//1.bp.blogspot.com/_G92voTj-yF0/S96uBuaM4XI/AAAAAAAAAMM/ltg9TiclsFU/s1600/speed.png" style="width:300px; height:220px;" />

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

<div class="separator" style="clear: both; text-align: center;"><img border="0" src="//1.bp.blogspot.com/_G92voTj-yF0/S96uBuaM4XI/AAAAAAAAAMM/ltg9TiclsFU/s1600/speed.png" style="width:300px; height:220px;" /></div>

Так же ко всем я ещё посетила страницу рекомендаций Google, она на английском языке, но суть сводится всё к тому же кэшированию, сжатию кода HTML, CSS, JavaScript и т.п.. Из всего этого списка, всё, что в наших руках (руках владельцев блогов на платформе blogger) это опять поработать с изображениями.
В первую очередь, использовать изображения. сохранённые специально для Веб. Я для этого использую Фотошоп. В нем есть специальная функция сохранения:

Файл - Сохранить для Web.

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

Так же Гугл советует использовать изображения в формате .png, как более экономичный формат нежели .gif и другие.
На этом пока остановлюсь, т.к. более действенных рекомендаций именно для blogger, я пока не нашла. Я ещё буду заниматься изучением вопроса увеличения скорости загрузки блога на blogger, чтобы не пропустить новые статьи, можете подписаться на RSS. Если вы считаете эту информацию важной, пожалуйста, ретвините статью, нажав на зелёную кнопочку вначале поста.

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

Скорость загрузки сайта, как фактор ранжирования Google: 52 комментария

  1. Cka304nik

    Да вы шутите )) Пнг для крупных картинок — смерть от объема трафика )) Для мелочей и кусков дизайна: соглашусь, но и то имеет смысл повыбирать

  2. SEO-Дилетант'ка

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

  3. хозяин Лягушатника

    Ага. Это сделал. Где-то 150 кбайт убрал с шапки заголовка. По 10-20 кбайт с каждого рисунка в сообщениях. Счетчики подправил. Убрал ссылки в картинках. width=300 height=220 я заменил на style=»width:300px; height:220px;»

    Я думаю может картинки не индексировались из-за ссылок в них.

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

  4. SEO-Дилетант'ка

    Я посмотрела ваш блог, вроде ничего не должно его тормозить, не считая вообще того, что это все же блоггер и он тормозной:) Про оглавление — это не может так увеличить вес. Я, кстати, тоже вот заметила по статусной строке браузера, что дольше всего грузятся приложения от гугл. И поиск по блогу тоже последний загружается.
    Думаю, что-то в шаблоне можно упростить, но это не так просто.

  5. хозяин Лягушатника

    )
    Это вы уже посмотрели после того как я вчера сменил дизайн блога. Зашел в конструктор и отменил свои изменения (там есть такая функция), после это блог просто полетел по сравнению с прежним видом. Хотя дизайн конечно пострадал значительно, но надо выбирать наименьшее зло. Я думаю тормозили всякие скрипты округления и сглаживания.

  6. хозяин Лягушатника

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

  7. SEO-Дилетант'ка

    Попробуйте в шаблоне найти этот код

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

  8. хозяин Лягушатника

    Напишите как-нибудь как поднять число посетителей и читателей блога.
    Вроде бы блог как-то оптимизировал и настроил, поисковики видят и индексируют: по некоторым запросам в топе, правда не самым популярным). ТИЦ 20, PR 2. Добавил во многие закладки, даже пару раз был прогон по закладкам (некоторые СЕО форумы это практикуют для своих участников). Создал рассылку на mail.ru. Добавил RSS в каталоги. Настроил кроспостиг на некоторых сервисах.
    Но как посещало 10-20 человек в день, практически с момента создания блога (т.к. на некоторых форумах я дал ссылку на себя, где меня знали) так и посещает до сих пор. Или это еще надо время? Блогу всего лишь 3 месяца.

  9. SEO-Дилетант'ка

    Конечно я буду писать статьи, как увеличить число читателей блога, так же я постараюсь что-нибудь придумать именно для вас, но попозже, я в последние дни сильно загружена, и никак не успеваю со всем разобраться.
    А чтобы время зря не пропадало, вы читали блог Шакина? У него есть целая серия статей, как увеличить посещаемость на блоге, почитайте тут и тут.

  10. Cka304nik

    Да вы шутите )) Пнг для крупных картинок — смерть от объема трафика )) Для мелочей и кусков дизайна: соглашусь, но и то имеет смысл повыбирать
    18 мая 2010 г. 20:16

  11. SEO-Дилетант'ка

    Да куда уж до шуток:) В данном конкретном случае, я не высказывала своего мнения, а сослалась на документацию гугл. И, вполне вероятно, что человек разбирающийся в публикации фотографий, в зависимости от целей сам выберет тот формат, который ему необходим.
    19 мая 2010 г. 0:41

  12. Хозяин Лягушатника

    Ага. Это сделал. Где-то 150 кбайт убрал с шапки заголовка. По 10-20 кбайт с каждого рисунка в сообщениях. Счетчики подправил. Убрал ссылки в картинках. width=300 height=220 я заменил на style=»width:300px; height:220px;»

    Я думаю может картинки не индексировались из-за ссылок в них.

    Но в общем, картина сильно не изменилась. Также притормаживает при листании. Все-таки думаю из-за шаблона. Надо его как-то попробовать упростить. Самое интересно, что виджет поиска Гугла загружается у меня чуть ли ни самым последним.
    6 июня 2010 г. 15:12

  13. SEO-Дилетант'ка

    Я посмотрела ваш блог, вроде ничего не должно его тормозить, не считая вообще того, что это все же блоггер и он тормозной:) Про оглавление — это не может так увеличить вес. Я, кстати, тоже вот заметила по статусной строке браузера, что дольше всего грузятся приложения от гугл. И поиск по блогу тоже последний загружается.
    Думаю, что-то в шаблоне можно упростить, но это не так просто.
    7 июня 2010 г. 1:25

  14. Хозяин Лягушатника

    )
    Это вы уже посмотрели после того как я вчера сменил дизайн блога. Зашел в конструктор и отменил свои изменения (там есть такая функция), после это блог просто полетел по сравнению с прежним видом. Хотя дизайн конечно пострадал значительно, но надо выбирать наименьшее зло. Я думаю тормозили всякие скрипты округления и сглаживания.
    7 июня 2010 г. 5:10

  15. Хозяин Лягушатника

    Все, теперь настроил блог окончательно. Прошлый дизайн конечно мне больше нравился… но думаю и в таком виде неплохо смотрится. А тормозили все-таки всякие сглаживания. Еще бы конечно убрать нижний виджет с разработчиками. Я не против их ссылок, все-таки это и их работа… но вот эта ширина виджета на локоть крайне раздражает.
    7 июня 2010 г. 11:01

  16. SEO-Дилетант'ка

    Попробуйте в шаблоне найти этот код

    и удалить его весь, должно получиться полностью избавиться от виджета с разработчиками
    8 июня 2010 г. 3:42

  17. Хозяин Лягушатника

    Напишите как-нибудь как поднять число посетителей и читателей блога.
    Вроде бы блог как-то оптимизировал и настроил, поисковики видят и индексируют: по некоторым запросам в топе, правда не самым популярным). ТИЦ 20, PR 2. Добавил во многие закладки, даже пару раз был прогон по закладкам (некоторые СЕО форумы это практикуют для своих участников). Создал рассылку на mail.ru. Добавил RSS в каталоги. Настроил кроспостиг на некоторых сервисах.
    Но как посещало 10-20 человек в день, практически с момента создания блога (т.к. на некоторых форумах я дал ссылку на себя, где меня знали) так и посещает до сих пор. Или это еще надо время? Блогу всего лишь 3 месяца.
    8 июня 2010 г. 9:30

  18. SEO-Дилетант'ка

    Конечно я буду писать статьи, как увеличить число читателей блога, так же я постараюсь что-нибудь придумать именно для вас, но попозже, я в последние дни сильно загружена, и никак не успеваю со всем разобраться.
    А чтобы время зря не пропадало, вы читали блог Шакина? У него есть целая серия статей, как увеличить посещаемость на блоге, почитайте тут и тут.
    8 июня 2010 г. 11:10

  19. SwaEgo

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

  20. SEO-Дилетант'ка

    Да, с Blogger все неоднозначно:). У вас же ещё много изображений. И в целом, блог кажется очень загроможденным. Уж простите, что высказала свое мнение:)

  21. SwaEgo

    Вот и у меня фото немеренно.
    Кстати не знал,что размеры лучше прописывать,title и т.п.,за инфо-спасибо.
    Вообще столько нюансов,да всё некогда заняться вплотную,конкретно.Где-то читал,что даже слэш в конце в написании линка влияет на скорость…

  22. SEO-Дилетант'ка

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

  23. SwaEgo

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

  24. SEO-Дилетант'ка

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

  25. SEO-Дилетант'ка

    1) Конечно такого сделать никак нельзя.
    2) Не поняла, а к чему этот вопрос? Зачем спрашиваете? Все картинки вставляются в блог именно, как в первом варианте, происходит это автоматически, так задумано разработчиками платформы. Как считаете, они стали бы так делать, если бы это было некорректно?

  26. Aliona196

    У меня вставляются картинки по-другому. Эти 2 кода, которые я показала, я делала вручную — у меня, если просто вставить картинку и ничего не подправлять, код — гораздо более громоздкий, лишнее я удаляла.
    Но вчера, по совету другой вашей статьи, стала использовать windows live writer. Заметила, что и там в коде картинок есть лишние элементы, но, поскольку с live writer обработка поста ЗНАЧИТЕЛЬНО ускоряется, решила пользоваться им, ничего не меняя вручную=))

  27. SEO-Дилетант'ка

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

  28. Olga

    Екатерина, спасибо за статью про редактор блога — сразу отпали проблемы с картинками! Но по-прежнему остались 30 старых статей, в которых ну очень хочется убрать вторую ссылку со всех картинок. А проблема вот в чем — когда я убираю лишнее, как у вас описано, картинка располагается по середине. Я ее потом вручную вправо или влево передвигаю — опять появляется вторая ссылка! Что прописывать в коде, чтобы была одна ссылка+боковое расположение. Ну не везде мне подходит центральное расположение!!!

  29. SEO-Дилетант'ка

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

  30. Ольга Васильева

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

  31. Михаил

    А картинки причем? Это же скорость в браузере пользователя. Или гугл картинки тоже качает?
    Я слышал об этой рекомендации раньше, но (как программист :) ) считал, что она касается именно скорости отдачи страницы с сервера. Сайты динамические все сейчас. Вот именно то время, когда на сервере формируется страница, чтобы отдать тому же браузеру или боту. Готовые движки очень тормозные, специального(недешового) хостинга требуют. Правда решается кешированием во многих случаях.
    С размеров html понятно, чтобы не было включенных в сам код текстов скриптов, стилей. Но например реальную обфускацию — удаление пробелов лишних, переносов строк, по отношению к html вроде никто и не делает(как Яндекс например, на своем сайте).

  32. SEO-Дилетант'ка

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

Комментарии запрещены.