Многие веб-мастера и владельцы блогов задумывались о скорости загрузки своих сайтов. А после заявления 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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-i5hJ-T3TjiFP2OeN3PH-0FVDFoxavbofd4_gTEWwu2ckiThY_BH-eZ6py3ILP7TSiqf1Li5IPMJPcqtTNWstGfnbHpaq8O6pd9-9JdAW5pG2NZt-Vvw8lK4is1ddFmvcFQqeLfNbw8/s1600/speed.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-i5hJ-T3TjiFP2OeN3PH-0FVDFoxavbofd4_gTEWwu2ckiThY_BH-eZ6py3ILP7TSiqf1Li5IPMJPcqtTNWstGfnbHpaq8O6pd9-9JdAW5pG2NZt-Vvw8lK4is1ddFmvcFQqeLfNbw8/s1600/speed.png" /></a></div>
А интересовать будет именно та часть кода, которую я выделила
Это код моего изображения к этой статье. Поэтому, я в примере буду использовать реальные размеры именно этого изображения.
Теперь нам необходимо в этот код вставить размеры моей картинки. Они должны соответствовать реальным размерам, иначе изображение будет обрезаться. У моей картинки такие размеры:
ширина - 300 пикселейпоэтому код размеров для неё будет выглядеть так:
высота - 220 пикселей
style="width:300px; height:220px;"
Эти данные необходимо разместить внутри кода, которые я выделила в предыдущем примере, выглядеть это должно вот так:
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-i5hJ-T3TjiFP2OeN3PH-0FVDFoxavbofd4_gTEWwu2ckiThY_BH-eZ6py3ILP7TSiqf1Li5IPMJPcqtTNWstGfnbHpaq8O6pd9-9JdAW5pG2NZt-Vvw8lK4is1ddFmvcFQqeLfNbw8/s1600/speed.png" style="width:300px; height:220px;" />
Таким же образом рекомендую указать размеры кнопок и счётчиков. После данных манипуляций, плагин перестал гневно показывать красным цветом ошибку.
Пока я разбиралась со всеми своими картинками, обратила внимание на то, что в коде присутствует и код самой картинки, и отдельно ссылка на эту картинку. Это сделано для того, чтобы в статью можно было поместить картинку меньшего размера, а при нажатии на нее, картинка открывалась бы в полный размер. Если вам не нужна такая функция, то рекомендую удалить ссылку, это увеличит скорость загрузки вашего блога. Т.е. в исходном коде ваша картинка примет такой вид:
Пока я разбиралась со всеми своими картинками, обратила внимание на то, что в коде присутствует и код самой картинки, и отдельно ссылка на эту картинку. Это сделано для того, чтобы в статью можно было поместить картинку меньшего размера, а при нажатии на нее, картинка открывалась бы в полный размер. Если вам не нужна такая функция, то рекомендую удалить ссылку, это увеличит скорость загрузки вашего блога. Т.е. в исходном коде ваша картинка примет такой вид:
<div class="separator" style="clear: both; text-align: center;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiC-i5hJ-T3TjiFP2OeN3PH-0FVDFoxavbofd4_gTEWwu2ckiThY_BH-eZ6py3ILP7TSiqf1Li5IPMJPcqtTNWstGfnbHpaq8O6pd9-9JdAW5pG2NZt-Vvw8lK4is1ddFmvcFQqeLfNbw8/s1600/speed.png" style="width:300px; height:220px;" /></div>
Так же ко всем я ещё посетила страницу рекомендаций Google, она на английском языке, но суть сводится всё к тому же кэшированию, сжатию кода HTML, CSS, JavaScript и т.п.. Из всего этого списка, всё, что в наших руках (руках владельцев блогов на платформе blogger) это опять поработать с изображениями.
В первую очередь, использовать изображения. сохранённые специально для Веб. Я для этого использую Фотошоп. В нем есть специальная функция сохранения:
Файл - Сохранить для Web.
А на этой , вы можете найти ссылки на программы сжатия изображений, которые рекомендует Google.
Так же Гугл советует использовать изображения в формате .png, как более экономичный формат нежели .gif и другие.
На этом пока остановлюсь, т.к. более действенных рекомендаций именно для blogger, я пока не нашла. Я ещё буду заниматься изучением вопроса увеличения скорости загрузки блога на blogger, чтобы не пропустить новые статьи, можете подписаться на . Если вы считаете эту информацию важной, пожалуйста, ретвините статью, нажав на зелёную кнопочку вначале поста.
