2 июля 2:43
Рубрика: Внутренняя оптимизация 10 комментариев

Как ускорить загрузку сайта

Здравствуйте, уважаемые читатели блога er-krasnogorsk.ru. Всех вебмастеров рано или поздно начинает волновать вопрос как ускорить загрузку сайта. У меня хоть и все нормально в этом плане, решил все же побеспокоиться и заблаговременно устранить некоторые проблемные моменты, которые в будущем могут негативно сказаться на продвижении.

 

Содержание

Почему это так важно
Как ускорить загрузку сайта
а ) Оптимизируем изображения
б ) Оптимизируем код CSS и JavaScript

Почему это так важно

Во-первых, скорость загрузки сайта напрямую влияет на трафик: чем дольше грузится он, тем меньше будет посетителей. По данным статистики Google, замедление на полсекунды влечет за собой потерю двадцати процентов потенциальных пользователей, если же вы занимаетесь рекламной кампанией, число кликов уменьшается на 1 %. Оно и понятно, я сам больше 4-5 секунд не выдерживаю, не хватает терпения.

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

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

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

 

Как ускорить загрузку сайта

 

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

Ускоряться будем с помощью сервиса «PageSpeed Insights», пользоваться которым советует сама поисковая система Google. Для этого пройдите по адресу: «Инструменты для веб-мастеров»- «Другие ресурсы»- «PageSpeed Insights». Впишите в специальное поле URL вашего блога и нажмите кнопочку «Анализировать». Сервис выдаст результат анализа вашего сайта: что и как нужно исправить, чтобы ускорить загрузку.

Оценка производится по 100-бальной шкале, чем больше оценка, естественно, тем лучше. Если страница набирает более 85 баллов, значит у вас все ОК. У меня как видите 68, поэтому есть над чем поработать.

 

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

 

Хоть и пишет сервис про этот фактор «исправьте по возможности», но мое мнение- исправлять надо обязательно, потому что это изображения, которые присутствуют на каждой странице вашего сайта: шапка блога, картинки кнопок социальных сетей, фида и т.д. То есть при загрузке любой вашей статьи, они тоже в обязательном порядке загружаются. И уменьшив объем этих изображений, мы существенно увеличим скорость.

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

Теперь переходим к практике. Картинки кнопок социальных сетей находятся по этому адресу:
— /httpdocs/wp-content/themes/название вашей темы/images

А изображения, присутствующие в ваших постах, в том числе и шапка блога, ищите по этому адресу:
— /httpdocs/wp-content/uploads

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

Чтобы сжать их без потерь, я пользуюсь онлайн-сервисом «Kraken.io», по поводу которого могут быть только восторженные отзывы. Всем советую, не разочаруетесь.

Порядок работы в этом сервисе: сначала нажимаете на этот значок:

Затем прокручиваете немного вниз и кликаете здесь:

Далее выбираете нужную картинку на рабочем столе и жмете кнопку «Открыть». Все. Процесс сжатия пошел. Через секунду выдаст такой результат:

Сжимает в пределах 35-40 процентов и заметьте, без потери качества. Дальше скачиваем обратно к себе на компьютер, кликнув по зеленой кнопочке. В итоге я сократил объем картинок аж на 18.54 кб или 56 %.

Затем с помощью filezilla закидываете их обратно на сервер, предварительно не забыв удалить старые.

 

Оптимизируем код CSS и JavaScript

 

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

Сократить код CSS можете здесь: http://www.cleancss.com/. Скопируйте файл style.css, вставьте в специальное окошечко и нажмите на кнопочку «Process CSS».

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

 

У меня изначально было включено сжатие, также как и код JavaScript уже был оптимизирован сервисом «PageSpeed Insights», но если у вас не так, то сократить код JavaScript можете по этому адресу: http://jscompress.com/.

Хотелось бы напомнить- перед тем как делать любые изменения на сайте ( особенно это касается изменений в коде ), позаботьтесь, чтобы у вас была резервная копия. Настоятельно рекомендую, меня самого такая страховка спасала много раз.

Проверяемся еще раз в сервисе «PageSpeed Insights».

Как видите, у меня стало 80 баллов, что совсем неплохо. Теперь у меня выполнено 5 правил.

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

С уважением Баяс Батуев

Подписаться на обновления блога
10 комментариев
  • Олия

    Баяс, привет.Интересная, нужная тема.Жду продолжения.

    2014-07-26
  • Елена

    Спасибо за полезный сервис. Сегодня попробую на своих сайтах.

    2014-07-28
  • robot

    Бороться за 4-10-50 кб трафика, оптимизируя картинки и скрипты бессмысленно. В наше время даже мобильные устройства по lte и 3g выдают неплохую скорость. Браузерное и серверное кеширование - наше все.

    2014-07-30
  • Баяс Батуев

    Большой успех состоит из маленьких мелочей, пренебрегать ничем не стоит. К тому же одна неоптимизированная фотография может "весить" до 5 мб, а если их много?

    2014-07-31
  • Наталья

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

    2014-09-03
  • ZeroXor

    Меня чисто из спортивного интереса зацепило. Как это так: у меня - и не идеально?! Так не бывает!!! Пойду-ка исправлять. Тем более, что на этот месяц у меня как раз и стоят планы тотальной доработки блога по функционалу. И спасибо за ссылки на сервисы, попробую.

    2014-09-04
  • Баяс Батуев

    У вас правильное отношение к делу. Удачи.

    2014-09-04
  • Polya Radost

    Всем привет! А я как раз на днях думала, что надо приступать к ускорению своего блога. Не знала только, с чего начать. Теперь знаю, спасибо! Хотя, скорее всего, все названные вами фишки мне не по плечу. Ну хоть картинки оптимизирую для начала, а там как попрет! (наверно :roll: )

    2014-09-14
  • Баяс Батуев

    Удачи, Полина.

    2014-09-14
  • Анна

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

    2014-10-11

Добавить комментарий