Скорость страниц будет важным фактором для ранжирования

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

А не так давно был анонсирован новый фактор ранжирования в мобильном поиске под названием «Speed Update». Обновление вступит в силу в июле 2018 года, поэтому у владельцев сайтов будет время подготовиться.

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

Так же не стоит забывать, что скорость сайта – это один из многих факторов ранжирования. К примеру, если у вас хорошо оптимизирована страница по Google PageSpeed, но имеет малополезный неуникальный контент – то навряд ли она сможет занять достойные позиции в поисковиках.

Несколько советов по увеличению скорости загрузки

•  1. Используйте кэширование в браузере и сжатие gzip/deflate. В случае, если у вас стоит apache, это настраивается в htaccess.
•  2. Оптимизируйте изображения. Удаление ненужной информации и сжатие картинок способны значительно уменьшить их вес.
•  3. Сократите ресурсы javascript, css, html код. Если сайт находится в стадии разработки, то для удобства редактироватия кода этот пункт лучше оставить на потом.
•  4. Используйте новую версию протокола HTTP/2. Он более эффективен, надежен и подвержен меньшему количеству ошибок.
•  5. Переходите на PHP7. Работает более чем в два раза быстрее, чем его предшествующая версия.

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

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

Проверить скорость работы сайта, google pagespeed insights

Google PageSpeed — инструмент который позволяет проверить скорость работы сайта. Он позволяет оценить скорость загрузка для стационарных ПК и для мобильных устройств и выдает рекомендации, которые могут быть использованы для оптимизации.

Ссылка на ресурс:

https://developers.google.com/speed/pagespeed/insights/

Результат анализа скорости загрузки сайта выглядит так:

После проведения анализа скорости загрузки сайта чаще всего можно получить следующие рекомендации:

Optimize images

Enable Compression

Сжатие веб-сервером является важным параметром, обеспечивающим быстродействие. Включается за счет модуля mod_deflate в Apache или за счет директивы gzip on в Nginx.

Leverage browser caching

Определяет передается ли заголовок Cache-Control и кэшируются ли данные в браузере пользователя. Кэширование позволяет значительно сократить количество обращений к серверу, что снижает нагрузку на него и увеличивает скорость отдачи статических данных (которых большинство на любом сайте) клиенту

Eliminate render-blocking JavaScript and CSS in above-the-fold content

JavaScript код по умолчанию исполняется по мере того как загружается страница, похожим образом обрабатывается CSS. Т.е. Если JS скрипт подключен в теле документа, его рендеринг каждый раз прерывается до тех пор пока скрипт выполнен не будет. Избежать этого можно добавляя при подключении JavaScript и HTML тело страницы будет рендерится независимо от исполняемого кода.

Например, JS в асинхронном режиме можно подключить так: <script async src=»script.js»>

Minify CSS

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

 

Minify HTML

Опция аналогичная предыдущей, но имеет отношение к HTML коду. Для минификации HTML и CSS могут использоваться OpenSource программные продукты, ссылки на которые размещены на сайте сервиса.

 

Avoid landing page redirects

Определяет используются ли редиректы, любые заданные перадресации с одного домена на другой и с одного сервера на другой означают дополнительные циклы запрос-ответ (запрос к серверу DNS и запрос непосредственно данных), что, естественно, увеличивает время через которое конечный пользователь получит контент сайта. Редиректов по возможности стоит избегать.

 

Prioritize visible content

В данном случае проверяется размер контента, который должен загружаться при переходе на главную страницу сайта, оптимизация не нужна если объем данных составляет менее 14.6kB сжатой информации, что соответствует размеру congestion window в протоколе TCP и означает, что не требуется повторное установление соединения для передачи информации, которая не может быть передана единовременно.

Reduce server response time

Pagespeed Insights выдает предупреждение о медленном ответе сервера в случае если содержимое страницы отдается менее, чем за 200 мс.

 

 

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

 

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

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

 

Читайте про то как включить кэширование для Apache или для Nginx

Google PageSpeed Insights: увеличиваем скорость загрузки сайта — Vervekin.Ru

Не так давно в личном кабинете ВКонтакте мне поступило сообщение, в котором человек, представившийся специалистом по оптимизации сайтов, предлагал поработать над моим блогом — за символическую сумму в размере 1000 р. В целом предложение касалось аудита и исправления ошибок, в одном из пунктов говорилось о том, что по Google PageSpeed Insights скорость загрузки сайта должна быть выше.

На тот момент ситуация по блогу и в самом деле была удручающая. Мне приходилось разгребать последствия полученного блогом (в результате взлома) фильтра АГС. А новый хостинг, несмотря на более высокую стоимость и SSD диски, которые, если верить рекламе, должны работать в 5-6 раз быстрее, на деле оказался не столь шустр. Сайт стал загружаться гораздо медленнее, чем раньше. И проверка скорости загрузки сайта инструментами от Google это показывала наглядно:

Бесспорно, требовались меры по исправлению ситуации. И уже практически согласившись на полученное предложение, я решил пробежаться по сайтам тех вебмастеров, над которыми уже была проведена работа. Однако пять первых же просмотренных мной сайтов находились в «красно-желтой» зоне сервиса Google PageSpeed, т.е. грузились недостаточно быстро — это и стало причиной моего отказа от предлагаемых услуг.

Редактирование кода вручную или плагины?

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

Довольно распространенное в блогосфере мнение о том, что «плагины — зло», что они лишь увеличивают нагрузку и замедляют сайт, мне известно. Но есть и другая сторона вопроса: компетентность блогера (наличие необходимых знаний и опыта). Поэтому в каждом конкретном случае выбор неоднозначен.

Увеличить скорость загрузки сайта самостоятельно — вполне реально. Для этого лишь нужно следовать рекомендациям онлайн-сервиса Google Page Speed. Каждый пункт из тех, что появляется после проведенного анализа (оптимизируйте изображения, используйте кеш браузера, сократите CSS, сократите JavaScript и т.д.) сопровождается блоком «Как исправить«, в котором указывается, что и в каких конкретно файлах (страницах) необходимо исправить. Достаточно сделать бэкап сайта и его базы, найти несколько часов (чаще — дней) свободного времени, запастись терпением — и вперед!

При недостатке опыта работы с кодом вносить исправления вручную можно почти бесконечно — или до полной победы над проблемой или до тех пор, пока сайт не перестанет работать. Последний вариант не исключен, когда за дело берется блогер с небольшим стажем знакомства с основами HTML, CSS, JavaScript, PHP.

Но есть и другой, легкий, путь: установка одного или нескольких плагинов, позволяющих без особых усилий (фактически, за несколько щелчков кнопкой мыши) попасть в «зеленую зону» Google PageSpeed Insights. Плагинов, помогающих увеличить скорость загрузки сайта немало — от самых простых, не имеющих даже страницы настроек, до тяжеловесных «комбайнов» с кучей вкладок и опций.

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

Почему сайт медленно загружается

• Хостинг. Прежде всего, это предоставляемые хостингом ресурсы. Здесь каждый выбирает сам — по своим потребностям и бюджету. Следует лишь помнить о том, что не всегда самый дорогой и самый известный хостинг — лучший. Ситуация, когда хостер, которого вы выбрали и который вас очень долгое время устраивал, начинает «экономить» ресурсы — тоже не редкость. Или в один прекрасный момент выясняется, что ваш блог оказался на одном IP с чужим высоконагруженным проектом. При этом переход на выделенный IP вряд ли моментально избавит от всех проблем. Зачастую, и переезд на другой хостинг — не вариант, хотя бы потому, что однажды вновь найдя хостинг, который будет устраивать вас и характеристиками, и стоимостью, и отзывчивостью техподдержки, вы больше никогда не столкнетесь с проблемой медленной работы сайта.
• Шаблон. Сегодня выбрать подходящий по дизайну и функциональности шаблон (тему) для информационного (статейного) сайта не составляет большого труда — в репозитории WordPress их тысячи. Все они написаны людьми, имеющими разные представления о структуре и взаимосвязи элементов темы, несмотря на то, что каждый разработчик вынужден отталкиваться от Кодекса. Громоздкий неповоротливый шаблон (вид главной, загружаемые скрипты и т.п.) — один из факторов, за который поставить минус сайту могут не только пользователи, но и поисковые системы. Есть шаблоны простые и легкие, как бабочки — без особых настроек и вариаций, установил, загрузил картинку в шапку — и пользуйся, пока не надоест. И есть шаблоны, подобные швейцарскому ножу, глядя на которые через админку сайта, понимаешь, насколько прекрасен WordPress ) И еще понимаешь, что с таким шаблоном обязательно нужно поработать, разобраться с ним, даже если он окажется не таким быстрым как другие. Проверить скорость загрузки сайта с разными шаблонами очень просто, для этого в меню консоли WordPress Внешний вид — Темы достаточно переключиться на нужную тему и вбить адрес своего сайта в поле ввода на странице Google PageSpeed Insights.
• Плагины. Да, те самые плагины, о вреде которых столько написано. По большому счету, для нормального функционирования сайта плагины не нужны. Но желание блогера облегчить себе процесс публикации различных типов контента (текст, изображения, видео), улучшить защищенность блога и повысить удобство работы с ним посетителей, т.е. тех, для кого и создается контент — все это заставляет нас постоянно улучшать свои сайты с помощью расширяющих их функциональность надстроек — плагинов. На мой взгляд, всегда необходимо придерживаться золотой середины — плагины использовать, но в меру и те, которые на скорость загрузки сайта сильно не влияют. Понять же, насколько сильно нагружает сайт тот или иной плагин можно с помощью замечательного инструмента  P3 (Plugin Performance Profiler, который не обязательно держать включенным постоянно.
• Изображения. Точнее, их количество на странице и вес. Некоторым типам блогов (о путешествиях, кулинарным, техническим и т.п.) — без изображений никуда. Хорошо иллюстрированный интересный контент всегда пользовался и будет пользоваться повышенным спросом. Оптимизация загружаемых на сайт изображений — уже половина дела в борьбе за скорость сайта. Отказываться от изображений и жертвовать их качеством не нужно — необходимо их правильно и своевременно оптимизировать.

Как увеличить скорость загрузки сайта WordPress

Разумеется, с помощью плагинов — тех, о которых шла речь в самом начале.

Regenerate Thumbnails

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

Проверка скорости сайта онлайн сервисом Гугл показала мне, что значительная часть изображений использовалась без миниатюр. Вместо них на главной и в рубриках в анонсах постов выводились оригинальные изображения — своевременно не устраненные последствия слияния двух блогов (экспорт контента с блога на другом шаблоне). После того, как Regenerate Thumbnails пересоздал все миниатюры на блоге, ситуация со скоростью сайта изменилась в лучшую сторону (58/100 для мобильных, 63/100 для компьютеров):

a3 Lazy Load

Плагин, уменьшающий количество запросов к базе данных и улучшающий время загрузки страниц за счет того, что при его активации все изображения в анонсах, постах и виджетах, а также аватары комментаторов загружаются не одновременно, а последовательно — по мере прокрутки посетителем страницы вниз. Чем больше изображений на сайте, тем заметнее эффект. В описании плагина в репозитории приводится ссылка на демо-страницу, содержащую 1000 изображений. Эффект от активации плагина на этом блоге приведен на скриншоте ниже (71/100 для мобильных и 82/100 для компьютеров):

WP Super Cache

Плагин кэширования, отдающий посетителям заранее сгенерированные статические страницы вместо динамических, как это делает WordPress по умолчанию. Страница настроек плагина имеет несколько вкладок, все основные пункты меню русифицированы. На моем блоге лучший результат в плане скорости загрузки был достигнут при выборе пункта Упрощенное кэширование. Из трех протестированных плагинов кэширования (Hyper Cache, W3 Total Cache и WP Super Cache) последний оказался лучшим. Эффект от его применения — на скриншоте:

Итоги

В результате активации описанных в статье плагинов оценка скорости загрузки сайта инструментом Google PageSpeed Insights следующая: 73/100 для мобильных устройств и 86/100 для компьютеров. Считаю, неплохой результат с учетом того, что вручную никаких правок в код сайта не вносилось.

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

Что касается плагинов, ускоряющих загрузку JavaScript, CSS и HTML, их было перепробовано достаточно для того, чтобы убедиться, что их включение добавляет в онлайн тесте от Гугл максимум один пункт к уже имеющимся. Поэтому от их использования было решено отказаться. Вот список плагинов, которые были протестированы: Async JavaScript, Async JS and CSS, Autoptimize, Fast Velocity Minify, JS & CSS Script Optimizer, Speed Booster Pack, WP-HTML-Compression. Возможно, на вашем шаблоне какой-либо из этих плагинов покажет более впечатляющие результаты.

Своими способами вывода сайтов в «зеленую зону» Google PageSpeed Insights прошу делиться в комментариях.

Расскажите об этой статье в соцсетях:

Ускорение сайта и его проверка на скорость загрузки

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

Содержание статьи

Для чего нужно ускорить сайт?

Нужно понимать, что при ранжировании любой страницы учитывается огромное количество факторов. Допустим, что пользователь ввел запрос в поисковую систему, которая показала ему десять разных веб-страниц. Он сразу кликает на первые 5 ресурсов. Но читать он начнет тот, который загрузился быстрее. А при условии, что полный ответ на этом ресурсе он получил, ваш сайт он просто закроет. Это может быть серьезной проблемой, ведь медленная загрузка не означает плохого контента. Поэтому стоит лишний раз проверить скорость загрузки сайта, чтобы быть уверенным в его конкурентоспособности.

Если портал долго загружается, то у него начинают ухудшаться поведенческие факторы из-за большого процента отказов. Различные исследования показали, что большая часть посетителей закрывают сайты, время загрузки которых превышает 5-10 секунд. Скорее всего, посетитель просто закроет страницу, если он не сможет ее увидеть за три или четыре секунды. Конечно, это не работает, когда на странице есть очень ценная и уникальная информация — человек будет ждать в любом случае. Но если у вас онлайн-кинотеатр или библиотека, то ресурс будет быстро закрыт.

Сервисы помогающие проверить скорость загрузки сайта

Проверять сайт, просто открывая его с разных компьютеров — это, конечно, не самая плохая идея, но лучше воспользоваться специальными сервисами. Самым лучшим и всеми признанным является PageSpeed от компании Google. Ниже представлены инструменты проверки скорости загрузки с небольшим описанием:

1. Google PageSpeed Insight

Здесь вы вводите адрес своего сайта и автоматически получаете оценку от этого ресурса. Оно может быть от нуля до ста баллов. Если ваш сайт набрал 100 балов — это значит, что его скорость идеальна. Конечно, набрать столько ужасно сложно и 85 баллов уже достаточно для того, чтобы перестать беспокоиться о скорости загрузки. Если через какое-то время захотите проверить сайт еще раз, а его оценка изменится — Page Speed быстро развивается. Поэтому проверить скорость загрузки сайта google speed нужно стараться почаще. Но основной плюс в том, что кроме оценки вы получаете рекомендации по улучшению скорости страниц. Он может посоветовать вам уменьшить вес картинок или убрать блокирующие CSS и JS файлы.

2. Sitespeed.me

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

3. Whichloadsfaster

Часто бывает так, что человек не уверен: быстро загружается страница или медленно. Этот сервис решит все ваши сомнения по таким вопросам. С ним вы просто можете взять сайт конкурента из поисковой выдачи и любую свою страницу, затем вставить адрес, и проверить скорость загрузки сайта онлайн. Whichloadsfaster наглядно покажет, какой портал загрузился быстрее и на сколько.

4. Pingdom Tools

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

5. WebPage Analyzer

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

6. Load Impact

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

7. Gtmetrix

Показывает разные данные о веб-странице и хранит историю проверок. Вы всегда сможете посмотреть, как изменилась скорость по сравнению с прошлой проверкой. Кроме того, отображает разные подсказки и рекомендации Google.

Как заставить свой сайт загружаться быстрее

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

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

• Займитесь оптимизацией CSS на сайте. Использовать таблицы стилей очень удобно и они есть на каждом портале, но размещать их нужно с умом. Например, если вы используете CMS WordPress и подключаете разные графические плагины, то каждый плагин может сам вставлять в код страницы CSS и JS файлы. А чем больше их количество, тем больше придется сделать запросов браузеру — это плохо влияет на работу ресурса. Поэтому постарайтесь объединить весь CSS-код в один файл. Но даже его можно заставить работать еще быстрее. Для этого в сети есть много различных сервисов и программ, которые уберут из кода все пробелы, сократят цвета, например с «#000000» до «#000»;
• Оптимизируйте вес всех картинок. Если работаете над порталом с огромным количеством фотографий на страницах, то стоит их сжимать. 100 фотографий на странице с весом в 50 килобайт — это 5 мегабайт будут весить только изображения. Разные фотографии лучше хранить в формате JPG, а не, например, PNG-24. Так вы сэкономите гораздо больше места.
  Кроме того, если у вас не какая-то онлайн-галерея и пользователям нет особой разницы, то картинку в формате JPG можно еще и сжать. Для этого откройте фото, например, в Adobe Photoshop и сохраните его для «Web и устройств». Там вы сможете настроить качество изображения. Иногда, таким способом получается добиться размера файла, который в пару раз меньше исходного. Если вы захотите проверить скорость загрузки сайта в инструменте от Google, то с огромной вероятностью он сделает акцент на большом размере изображений;
• Если вы не можете сократить вес картинок, то тогда установите специальный скрипт, который называется LazyLoad. Это очень легко сделать, когда сайт находится на популярной CMS WordPress, достаточно просто установить плагин Lazy Load XT. Суть работы этого скрипта в том, что загружаются только те изображения, которые находятся на экране пользователя. То есть, на веб-странице с огромным количеством фотографий у посетителя будет идти загрузка только тех, которые находятся на поле видимости его компьютера. Это очень удобно, если необходимо сохранить качественные фотографии;
• Оптимизируйте JS-скрипты. При использовании JavaSript зачастую приходится подключать разные библиотеки для сложных задач. Здесь нужно поступать так же, как и с CSS – объединять и уменьшать. Но будьте осторожны, лучше сохранить себе исходный код таблиц стилей и скриптов на компьютер. Ведь разобраться потом в коде, который просто идет в одну строчку очень сложно. Если вы хотите проверить скорость загрузки сайта, не оптимизируя подключаемые файлы, то вряд ли получите хорошие результаты;
• Объединяйте всю графику в один спрайт. Так поступают множество крупных компаний. У вас есть некоторое количество разных иконок, кнопочек и логотипов. Все это вы собираете в одну большой файл (только не прям впритык), а потом можете вызывать любую часть изображения через свойство background-position. И вместо кучи запросов к разной графике, компьютер будет делать только один. Для вызова нужной части просто пропишите необходимые координаты;
• Настройте браузерное кэширование. Когда человек посещает любой веб-сайт, браузер сохранит различные данные на жесткий диск пользователя. Если человек снова зайдет на него, то он уже получит файлы из памяти своего компьютера, а значит и ожидания никакого не будет;
• Перед тем как размещать какой-либо проект на хостинге, всегда прежде почитайте отзывы об этой компании. Убедитесь, что никаких постоянных падений сервера не будет и не бойтесь задавать свои вопросы службе поддержки. Часто хостинг-компании оказывают огромную помощь своим клиентам. Они могут что-то вам настроить, перенести проект или помочь разобраться с каким-то сложным вопросом. Так как проверить скорость загрузки сайта очень легко, возьмите любой сайт расположенный у хостера и узнайте его скорость.

Плагины для кэширования на WordPress

CMS WordPress знаменита тем, что у нее огромное сообщество и открытый исходный код. Благодаря этому множество разных функций, которых нет в официальном движке можно добавить совершенно бесплатными плагинами. Расширения для кэширования не исключение. Самые популярные плагины(более миллиона установок) для создания кэша:

1. WP Super Cache. Этот плагин будет генерировать HTML копию каждой страницы, вместо того, чтобы каждый раз выполнять PHP-скрипты. HTML страницы будут получать незарегистрированные пользователи и те, кто не оставил ни одного комментария.
2. W3 Total Cache. Это расширение кэширует все скрипты, таблицы стилей и другие элементы страницы.

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

Как получить 100/100 в Google Page Speed Test Tool? — SEO компания UAWEB

НАЗАД

Антон Юдин | 45427

Оптимизация,SEO |

12.04.2016 |

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

Более 50% пользователей интернета с мобильных устройств, ожидают практически мгновенной загрузки сайта. Исходя из такой статистики, речь в этой статье пойдет о том, как достичь показателей 100/100 в сервисе Google PageSpeed Insights для стационарных и мобильных устройств на примере сайта «Monitor Backlinks».

Мотивация

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

Однажды, при работе с PageSpeed Tool, было замечено, что сайт компании Google имеет удивительно низкие показатели для мобильных устройств — 59/100. Ситуация с версией для стационарных устройств была лучше — 92/100.

Казалось бы, что они должны были использовать свой же инструмент для оптимизации своего веб-сайта, не так ли? Так неужели результат 100/100 недостижим?

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

Стартовые показатели подопытного сайта — 87/100.

В итоге, после применения определенных манипуляций, было получено следующие результаты:

О том, как удалось достичь таких показателей, читайте далее.

 

Как ускорить загрузку страниц?

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

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

Итак, приступим:

Шаг № 1: Оптимизация изображений

Чтобы изображения загружались быстрее, PageSpeed Insights Tool предложил оптимизировать их за счет уменьшения размеров файлов. Чтобы решить эту задачу, необходимо выполнить две важные вещи:

• Сжать все изображения, используя такие инструменты как Compressor.io и TinyPNG. Это бесплатные инструменты, при помощи которых можно уменьшить размер графического файла более чем на 80%, а в некоторых случаях, без ухудшения качества самого изображения.
• Уменьшить размеры изображений до минимума без понижения их качества. Например, если на сайте нам нужна картинка 150x150px, то и на сервере картинка должна быть соответствующих размеров. Параметры изображений не должны подгоняться при помощи CSS или HTML-тегов.

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

PageSpeed Insights предлагает опцию загрузки уже оптимизированных изображений, поэтому их можно загрузить на сервер непосредственно с данного сервиса. То же самое можно сделать и с JavaScript и CSS.

Шаг № 2: Минимизация JavaScript, CSS и HTML 

В примере, Google предлагает сократить объемы JavaScript и CSS файлов.

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

Чтобы устранить эту проблему, на сервере был установлен Gulpjs. Это инструмент, который автоматически создает новый файл CSS и удаляет все ненужные пробелы. Также он автоматически создает новый файл CSS каждый раз, когда вы вносите новые изменения. В приведенном примере, это помогло уменьшить размер основного файла CSS приблизительно с 300Kb до 150Kb. Такая разница в размерах обусловлена ненужными символами.

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

Оптимизировать JavaScript можно при помощи Closure Compiler, JSMin или YUI Compressor. Вы можете создать специальную программу, которая используя вышеперечисленные инструменты, будет переименовывать файлы и сохранять их в рабочий каталог.

Уменьшить CSS можно, используя инструменты YUI Compressor и cssmin.js.

Минимизировать HTML код можно через PageSpeed Insights. Выполните анализ страницы и выберите «Сократить HTML». Чтобы оптимизировать код кликните на «Просмотреть оптимизированное содержание». 

Детальнее об оптимизации JavaScript и CSS файлов вы узнаете по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

В случае использования WordPress, рекомендуется устанавливать плагин Autoptimize.

Также можно загрузить оптимизированные файлы непосредственно из PageSpeed Tool. 

Вот результаты, полученные после минимизации JavaScript и CSS:

Шаг № 3: Использование кэш браузера

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

Чтобы решить этот вопрос, пришлось перенести все статические файлы с сайта на CDN (content delivery network/сеть доставки контента).

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

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

Вот визуализация того, как работает CDN:

На подопытном сайте все изображения, файлы JavaScript и CSS были перенесены на CDN, а на главном сервере остались храниться только файлы HTML. Размещение изображений на CDN играет важную роль в том, насколько быстро будут загружаться страницы сайта для посетителей.

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

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

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

Решения проблемы со скриптом Google Analytics довольно сложная задача. Так как Analytics был нужен, и его нельзя удалять с сайта, пришлось искать другие решения.

Google довольно редко меняет код Analytics, раз или два в год. Поэтому, Razvan создал специальный скрипт, который каждые восемь часов проверяет наличие последних обновлений кода Analytics, и при обнаружении обновлений загружает их. Таким образом, можно разместить JavaScript код Analytics на сервер, исключая необходимость загружать его с серверов Google, при каждом посещении.

В случае отсутствия обновлений, код Analytics будет загружаться из кэшированной версии на CDN.

А когда Google обновит код JavaScript, то сервер автоматически загрузит новую версию и обновит его на CDN. Этот скрипт был использован для всех внешних сторонних скриптов.

Вот скриншот из Pingdom Tools на котором показаны все загрузки из CDN, в том числе и код Google Analytics. Единственный файл загрузки с сервера, это файл домашней страницы, объем которого всего лишь 15,5Kb. Устранение всех сторонних скриптов значительно улучшило общую скорость загрузки.

Шаг № 4: Удаление блокирующих кодов

Устранение блокираторов также является довольно сложным этапом в процессе повышения скорости загрузки страниц, требующий хороших технических знаний. Основная проблема, которую пришлось решать — это ревизия всего кода JavaScript начиная сверху от «header» и «body» до расположенного внизу «footer» на всех страницах сайта. 

Более детально смотрите по ссылке: https://developers.google.com/speed/docs/insights/BlockingJS#InlineJS 

Если ваш сайт на платформе WordPress, плагин Autopmize, скорее всего, поможет вам решить эту задачу. Проверьте свои настройки, а затем в <head> снимите отметку с «Force JavaScript» и установите ее на «Inline all CSS».

Шаг № 5: Включение сжатия

Включить сжатие вы можете в настройках сервера. Если вы не уверенны в своих технических способностях, обратитесь за помощью в службу технической поддержки, они помогут вам включить сжатие GZIP для сервера. Дополнительные рекомендации по установке GZIP сжатия смотрите здесь: https://developers.google.com/speed/docs/insights/EnableCompression#-  

Шаг № 6: Оптимизация мобильного формата

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

С помощью Google Chrome вы можете посмотреть, как ваш сайт выглядит в различных мобильных версиях. Для этого нажмите на иконку меню (гамбургер) настроек и управления браузером в верхнем правом углу, а затем выберите «Дополнительные инструменты → Инструменты разработчика». На панели инструментов выберите иконку с изображением мобильных устройств. Вот и все, смотрите: 

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

Вывод

В результате было выполнено 6 самых важных шагов, которые помогли достичь идеальных показателей 100/100 в Google PageSpeed Tools для сайта «Monitor Backlinks». В итоге была оптимизирована не только главная страница, но и все внутренние страницы. 

Среди всех выполненных действий по оптимизации сайта можно выделить три самых важных:

1. Использование CDN.
2. Устранение блокирующих кодов. (Избегайте JavaScript в теле кодирования, лучше переместите его в низ файлов.)
3. Оптимизация размеров и сжатие изображений.

Хочется еще раз напомнить о том, что Google PageSpeed Tools является всего лишь вспомогательным инструментом для оптимизации ресурса. Инструменты предназначены для сокращения времени между запросом (кликом по ссылке) и откликом страницы сайта (отображения первых элементов страницы), чтобы посетители не покидали сайт, так и не дождавшись его загрузки. Также рекомендации, предоставляемые инструментом, необходимо применять с осторожностью, чтобы пользователям не показывалась разваленная верстка или какой-то не стилизованный набор блоков.  

Обратите внимание. Быстрая загрузка страниц сайта косвенно влияет на ранжирование ресурса в поисковых системах, то есть: выше скорость загрузки → больше и длительнее посещения → выше ранжирование.

Если вы использовали инструмент Google PageSpeed Insights для оптимизации своего сайта, поделитесь достигнутыми результатами в комментариях. 

Также не забывайте о том, что специалисты UAWEB всегда готовы предоставить необходимую помощь в вопросах создания, оптимизации и продвижения вашего веб-ресурса, чтобы каждая секунда проведенная пользователями на вашем сайте приносила вам выгоду!

Источник: moz.com

 

Читайте также:

Как автоматизировать отчеты Google Analytics с помощью Google Таблиц?

Нужны продажи? Настройте Е-commerce интернет-магазина!

Чек-лист по настройке E-commerce в Google Analytics

Как создать сайт, сохранив нервы и деньги?

Маркетинговый план развития сайта: 15 шагов к успеху.

Внутренняя оптимизация сайта: Мета теги

Как бесплатно раскрутить сайт? 5 практических советов.

Please enable JavaScript to view the comments powered by Disqus.