Как повысить скорость загрузки страниц при помощи PageSpeed Insights

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

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

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

В этом обзоре мы поговорим об увеличении скорости загрузки сайта. Рассмотрим основные моменты (элементы) страницы, которые требуют особой оптимизации.

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

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

1. CSS-файлы, они же файлы стилей. Это то, без чего ваша страница будет выглядеть пустым набором текста. Они же отвечают и за верстку (макет) страницы.
2. Картинки. Если из изображения выкинуть все системную информацию, то ее размер может значительно уменьшиться.
3. Java-скрипты.
4. HTML код.

По-порядку рассмотрим каждый пункт.

Сжатие CSS

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

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

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

Вам достаточно вставить ваш код из файла css в форму, указать адрес сайта и нажать кнопку «Process CSS». В результате, вы получите сжатый код, который можно скопировать и вставить в новый файл стилей и пользоваться. Сжатие доходит до 90% и выше.

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

Уменьшаем размер изображений

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

Он бесплатный и не требует опыта работы в графических редакторах.

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

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

Используем консольную программу YUI компрессор. Запускаем ее и прописываем такую команду:

java -jar yuicompressor-x.y.z.jar myfile.js -0 myfile-min.js

где:

myfile.js — файл, над которым мы будем работать;

myfile-min.js — полученный файл.

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

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

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

Оптимизация HTML

Здесь тоже предлагается масса онлайн-сервисов по сжатию ХТМЛ. Но, будьте осторожны. Как и в случае с CSS конечный код может перестать работать. Желательно руками удалить все лишнее. По правде говоря, большого прироста это не даст, но попробовать можно.

Включаем сжатие на стороне сервера

Следующим шагом для увеличения скорости загрузки сайта – это включение сжатия gzip или zlib на сервере. Все зависит от того, какой модуль установлен на серваке вашего хостера.

Сначала проверим, что установлено на хостинге. Для этого создаем .php файл и в него прописываем такой код:

Помещаем этот файлик в корневой каталог, где находится ваш сайт на сервере и запускаем его: //сайт/файл.php

Мы указываем серверу, что нужно ужимать html, txt, css, js, php, png и все файлы текстовых, графических типов и скрипты.

Включаем кэш браузера

Нужно его включить, чтобы пользователь, при повторном посещении страницы, не загружал вновь ее элементы, которые не изменились. Это полезно сделать для всей статики (CSS, HTML, картинок, java). Сделать это можно в настройках htaccess.

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

Настройка модуля mod_expires:

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

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

Удалить блокирующие элементы

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

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

Но, в этом, случае «async» не поддерживается, поэтому, нужно использовать способ асинхронной загрузки CSS при помощи специального скрипта. Его реализация также описана по ссылке в начале обзора.

Кроме этого, для каждого обговоренного пункта существуют свои нюансы, которые нужно учитывать и в результате вы получите ощутимое увеличение скорости загрузки сайта. Мне удалось достигнуть 1,7-2 секунды.

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

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

Так что решайте сами, пробуйте, а практические советы и примеры читайте по ссылке в шапке этой статьи. Всем удачи!!!

Источник: //info-kibersant.ru/uskorit-zagruzku-sajta.html

Как увеличить скорость загрузки сайта в Google PageSpeed до 100%

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

Улитка, черепаха, «тормоз» … Это невинные слова, которые пользователи могут сказать о медленном сайте — и эти слова никто не хотел бы услышать. Воспитанные пользователи могут ничего не сказать, но все равно пойдут с Вашего сайта к конкурентам.

Неудобный для пользователей, не достоин выдачи выше, чем на сотую странице … Эти сложные эпитеты принадлежат «искусственному интеллекту» — то есть, вот что Google думает о сайте с плохой скоростью.

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

1. Google Page Speed Insights

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

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

Google Page Speed Insights сканирует ваш сайт, сообщает вам время его загрузки, находит слабые места, тормозящие его работу, и предлагает возможности для решения этих проблем. Менее чем через минуту вы получаете полезные советы, как повысить скорость сайта.

Эти советы классифицированы по важности.

2. YAHOO’S YSLOW

//yslow.org/

Yahoooo! Поехали! Ваш сайт может работать быстрее, если вы воспользуетесь советами еще одного поискового гиганта.

YAHOO’S YSLOW оценивает продуктивность и стремительность загрузки собственного сайта на основе перечня критериев Yahoo, влияют на то, насколько медленным или быстрым сайт является для посетителей.

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

3. Page Scoring

//www.pagescoring.com/website-speed-test/

Избавьтесь вещей, которые замедляют ваш сайт! Вот один из самых простых онлайн-инструментов для определения скорости сайта — Page Scoring. Он сканирует ваш сайт и сообщает вам, как быстро он загружается со всеми HTML, CSS и Js-файлами, связанные с запросом пользователя.

Он также дает вам ссылки на эти файлы и показывает в точности, сколько времени «выдается» на загрузку конкретных файлов и контента.

Это дает вам прекрасную возможность узнать в общем о возможности производительности вашего сайта — от времени ответа веб-сервера в список файлов элементов страниц, «воруют» скорость загрузки.

4. Pingdom

//tools.pingdom.com/

Этот инструмент на такой легкий в использовании, но очень информативный и богатый функционал.

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

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

5. GTmetrix

//gtmetrix.com/

GTmetrix предлагает удобную систему оценок. Кроме оценок PageSpeed и YSlow, этот онлайн-сервис также дает подробные оценки по каждому пункту по производительности сайта.

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

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

6. Web Page Test

//www.webpagetest.org/

Если вы используете Web Page Test, много важных деталей относительно загрузки каждого элемента вашего сайта могут быть представлены в каскадных диаграммах и с удобными скриншотами.

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

Одна из классных особенностей Web Page Test — то, что вы можете выбрать страны, по которым вы хотите провести проверку производительности сайта.

7. Monitis

//www.monitis.com/pageload/

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

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

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

8. PR-CY.ru

//pr-cy.ru/speed_test/

Данный сервис оценивает быстроту загрузки сайта, а также дает рекомендации по её улучшению

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

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

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

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

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

Определение причины медленной загрузки сайта – первый шаг решения проблемы

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

Для оценки скорости сайта и получения рекомендаций по ее увеличению лучше всего использовать дополнения для Фаерфокса или Хрома Page Speed. Также для этой цели можно использовать онлайн-сервисы оптимизации скорости описанные выше.

Методы ускорения загрузки сайта

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

Один из них – это оптимизация модулей и компонентов сайта

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

Объединить CSS и JS

Еще один эффективный способ – объединить внешние файлы CSS или скрипты JS. Благодаря этому уменьшается общее число загружаемых объектов и количество запросов к серверу. Еще эти же файлы можно сжать с помощью Gzip.

Ускорение сайта методом оптимизации изображений

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

Вот один из инструментов, который поможет вам оптимизировать изображения:

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

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

Лично я оптимизировал сайт seovedenie.ru с помощью сервиса Google Page Speed Insights. После некоторых манипуляций я достиг заветных 100 баллов из 100 возможных. В результате оптимизации скорость сайта увеличилась на порядок во всех сервисах описанных выше.

Набирайте скорость, держитесь крепче … и хорошего полета!

• Профессиональный юмор — видео
• Фотошоп онлайн бесплатно и без регистрации

Источник: //seovedenie.ru/optimizatsiya-zagruzki-sajta

Обновление PageSpeed Insights: что изменилось, на какие метрики обращать внимание?

1. Обновленный PageSpeed Insights

2. Итоги

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

Несколько примеров влияния скорости загрузки на прирост посетителей.

Pinterest — после того как сократили время загрузки на 40%, смогли увеличить посещаемость своего сайта из поиска, что привело к увеличению количества регистраций на сайте на 15%.

COOK — после того как сократили среднее время загрузки страниц на 850 миллисекунд, увеличили конверсию сайта на 7%, снизили показатель отказов на 7% и увеличили количество просматриваемых страниц за сеанс на 10%.

BBC — обнаружили, что за каждую дополнительную секунду скорости загрузки сайта, они теряют 10% пользователей.

DoubleClick — обнаружили, что 53% посещений сайтов с мобильных устройств были прерваны, когда загрузка страницы занимала больше 3 секунд.

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

Поэтому в июле 2018 года в Google запускается механизм, ранжирующий сайты по принципу Mobile-first Index.

И теперь при индексировании, ориентированном на мобильные устройства, рейтинг страниц будет зависеть главным образом от их мобильной версии.

Поэтому сейчас при продвижении под Google нужно уделять ещё больше внимания мобильной версии сайта.

Чтобы мы лучше понимали, что можно улучшить в мобильной версии сайта, в ноябре 2018 года Google без громких анонсов обновил свой инструмент для оценки скорости загрузки сайта PageSpeed Insights, добавив в него данные сервиса Lighthouse, о котором я упоминал ранее: в статье Обновление Google – «Speed Update». Теперь общая оценка скорости загрузки страницы основывается на данных Lighthouse, а в отчёте появилось множество новых параметров и рекомендаций.

Поэтому сегодня в статье я разберу новые метрики Google PageSpeed Insights для мобильных устройств, которые помогут улучшить скорость загрузки мобильной версии сайта.

Обновленный PageSpeed Insights

Начнём с интерфейса. Вот так выглядел инструмент до обновления:

Старый интерфейс содержал следующую информацию:

• оценки оптимизации страницы от 0 до 100;
• данные отчёта об удобстве пользования Chrome;
• краткую информацию о загрузке страницы;
• рекомендации PageSpeed Insights с предложениями по оптимизации;
• список успешных проверок по оптимизации — это был список правил, по которым возможности для ускорения практически отсутствуют.

Сейчас интерфейс новой версии PageSpeed Insights выглядит так:

Разберём, что же изменилось.

Оценка скорости загрузки

Первое, что изменилось, это оценка скорости загрузки:

Из таблицы видно, что новые метрики PageSpeed Insights показывают нам скорость загрузки страницы, а не уровень оптимизации, как было раньше. Также изменился диапазон оценки: теперь максимальная оценка загрузки «Высокая скорость» выдаётся при значении от 90 до 100.

Данные наблюдений

Похожий отчёт был и до обновления. Выводится для тех сайтов, по которым достаточно статистических данных.

Внизу секции можно увидеть кнопку «Показать данные об Origin Summary».

Развернув этот отчёт, мы видим следующие метрики:

Метрика «Первая отрисовка контента» (First Contentful Paint) осталась прежней, показывает время до первой отрисовки контента.

Метрика «Первая задержка ввода» (First Input Delay) пришла на смену DOM Content Loaded (DCL), показывает время, которое проходит между первым взаимодействием пользователя со страницей и моментом, когда она отвечает на это действие.

Имитация загрузки страницы

Тут находятся данные, полученные через сервис Lighthouse путём эмуляции скорости загрузки страницы в условиях 3G-сети. Содержит следующие показатели:

• Время загрузки первого контента (First Contentful Paint) — показывает время, когда браузер начал отображать любой элемент страницы.
• Индекс скорости загрузки (Speed Index) — показывает время, за которое содержание страницы становится доступным для просмотра.
• Время загрузки для взаимодействия (Time to Interactive) — показывает время, за которое страница будет полностью готова ко взаимодействию с пользователем.
• Время загрузки достаточной части контента (First Meaningful Paint) — отображает время, по истечении которого становится виден основной контент страницы.
• Время окончания работы ЦП (First CPU Idle) — период, за который основной поток страницы становится достаточно свободен, что может реагировать на действия пользователя.
• Приблизительное время задержки при вводе (Estimated Input Latency) — показывает среднее время в миллисекундах, которое занимает реакция страницы на действия пользователя в самые занятые 5 секунд с момента старта загрузки. Если это время превышает 50 мс, пользователь может предположить, что страница тормозит.

Разберём, какая из метрик имеет большее влияние на оценку сайта. У нас есть 6 метрик из сервиса Lighthouse, сами же метрики далеко не новые и уже давно есть в арсенале сервиса. Сервис Lighthouse — это автоматический сервис с открытым исходным кодом, который можно найти по ссылке //github.com/GoogleChrome/lighthouse.

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

Из таблицы мы видим, что самая влиятельная метрика с большим весом — это Time to Interactive (Время загрузки для взаимодействия), наименее значительной метрикой считается First Meaningful Paint (Время загрузки достаточной части контента). Эти метрики влияют на формирование оценки производительность страницы. Метрика Estimated Input Latency (Приблизительное время задержки при вводе) не учитывается.

Подробнее о таблице можно почитать тут: //github.com/GoogleChrome/lighthouse/blob/master/docs/scoring.md.

Оптимизация

В раздел «Оптимизация» выводятся советы, выполнив которые, можно ускорить загрузку сайта, оценивается в секундах.

Разберём самые распространённые действия, которые могут ускорить загрузку страниц.

Настройте подходящий размер изображений — для этого нужно сжать все изображения без потери качества картинки. Подойдёт сервис //tinypng.com/ или его аналог. Ещё нужно уменьшить размер изображений до минимума, также без потери качества. Например, если нам нужна картинка размером 100х100 пикселей, то нужно, чтобы и на сервере была картинка такого размера.

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

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

Когда посетитель будет долистывать до других изображений, JavaScript будет подставлять путь к картинке, и уже тогда пойдёт запрос на её отображение.

Используйте современные форматы изображений — появились новые, более современные и лёгкие форматы изображений, такие как JPEG 2000, JPEG XR и WebP, которые помогут Вам оптимизировать скорость загрузки, особенно на сайтах с большим количеством картинок.

Отложите загрузку неиспользуемого контента CSS — здесь рекомендуется удалить неиспользуемые правила из таблиц стилей.

Устраните ресурсы, блокирующие отображение и т. д. — рекомендуем настроить загрузку необходимых ресурсов JS/CSS в первую очередь и отложить загрузку остальных ресурсов.

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

Это основные рекомендации по оптимизации, которые будут встречаться чаще всего.

Диагностика и успешные аудиты

Также у нас есть разделы «Диагностика» и «Успешные аудиты».

Диагностика содержит прочие рекомендации, эффективность которых труднее оценить в секундах.

Проверки, которые Lighthouse посчитал успешно выполненными в рамках проверяемой страницы, попадают в секцию «Успешные аудиты».

Итоги

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

Чтобы получить хорошие оценки в обновленном инструменте, обращайте внимание на следующие метрики:

1. Время загрузки для взаимодействия.
2. Индекс скорости загрузки.
3. Время загрузки первого контента.
4. Время окончания работы ЦП.
5. Время загрузки достаточной части контента.
6. Приблизительное время задержки при вводе.

Они выстроены по порядку их влияния на оценку.

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

1. Оптимизация изображений — самое простое, нужно выгрузить картинки с сайта, сжать их, задать нужный размер и залить обратно, по возможности используем новые форматы.
2. Эффективное использование кеша — данная рекомендация чаще всего выполняется через хостинг, и нам не нужно отвлекать программиста, просто пишем в поддержку хостинга и пытаемся решить с ними.
3. Отложите загрузку скрытых изображений — очень сильно помогает улучшить скорость загрузки страницы, так как нет необходимости загружать изображения и видео, на которые в данный момент не смотрит посетитель.

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

Еще по теме:

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

Источник: //siteclinic.ru/blog/technical-aspects/obnovlenie-pagespeed-insights/

Как ускорить сайт с Google PageSpeed Insights

Google Pagespeed Insights — инструмент для оценки качества оптимизации страниц в интернете. Основной показатель, которым оперирует предлагаемый в нём анализ — скорость загрузки страницы. Данная метрика является одной из ключевых, будучи важным поведенческим фактором, о которых у нас есть хорошая информативная статья.

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

В Google провели исследование, обучив на больших данных о поведении пользователей нейронную сеть, с целью предсказания конверсий и bounce rate. В результате, выяснилось, что при времени загрузки страницы от 1 до 10 секунд вероятность отказа повышается на 123%. Даже при задержке до 3 секунд она растёт на треть.

В январе 2018 было объявлено, что с июля данного года Google вводит page speed в качестве фактора ранжирования для мобильного поиска. Это связано с упомянутым исследованием, в котором ясно показано: скорость имеет значение. Здесь Google рекомендует разработчикам заняться оптимизацией своих сайтов и предлагает для анализа их эффективности использовать инструменты:

• Chrome User Experience Report. Открытые данные по ключевым метрикам поведения пользователей в популярных сегментах интернета.
• Lighthouse. Автоматический аудит веб-страниц, являющийся частью Chrome Developer Tools.
• PageSpeed Insights. Инструмент, определяющий степень оптимизации страниц и предлагающий пути улучшения их параметров.

Вторят корпорации и SE-оптимизаторы. Часто по результатам аудита в своих отчётах они приводят итоги проверки Pagespeed Insights. Специалисты настоятельно рекомендуют заказчикам устранить все недостатки, выявленные в ходе тестирования.

О чём говорит Google Pagespeed Insights

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

Кто-то будет разочарован или неприятно удивлён, но Pagespeed Insights — это не в полной мере про скорость.

• Данный инструмент не измеряет скорость загрузки страниц.
• Показатель Page Insights не влияет на ранжирование.
• Разница в показателях между двумя сайтами не говорит о качестве одного и второго относительно друг друга.

Можно привести огромное множество примеров, когда топ выдачи занимают сайты с вопиюще низким показателем, а под 100 баллов получают сайты на одном HTML без каких-либо удобств и функций.

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

Два топовых сайта показывают удручающие, с точки зрения сервиса, показатели.

А сайт Артемия Лебедева, посвящённый Московскому метрополитену, написанный на HTML, идеален по мнению Pagespeed Insights.

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

• Pingdom Tools. Бесплатный инструмент, отображающий подробные метрики performance страницы и итоговый балл.
• WebPageTest. Инструмент для профессиональных веб-аналитиков, разработчиков и оптимизаторов. Даёт развёрнутую информацию по многим специфическим показателям, из которых время загрузки страницы и количество запросов — самые поверхностные.
• GTmetrix. Один из лучших сервисов. Формирует отчёт о времени и скорости загрузки, учитывает полный перечень параметров оптимизации.

Подробнее о таком факторе, как скорость загрузки сайта, читайте в нашей статье.

Сквозная аналитика

Подробные отчеты от вложений до прибыли по каждому рекламному каналу

• Учитывайте все типы обращений: звонки, заявки, чаты, корзины, колбеки
• Получайте данные из CRM и рекламных площадок
• Стройте воронку от показов рекламы до сделок
• Более 30 показателей эффективности в отчетах

Узнать подробнее

Как ускорить загрузку своего сайта на любых устройствах

Тем не менее, с помощью Google Pagespeed Insights вы можете определить недостатки страницы, чтобы исправить их и оптимизировать загрузку.

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

Pagespeed Insights даёт рекомендации по оптимизации изображений. Чтобы изображения не тормозили работу сайта, стоит предпринять следующие меры:

• Предварительная оптимизация

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

Используйте графический редактор: в идеале — Photoshop, на крайний случай — Paint. У первого есть параметры сохранения картинок в формате web, что улучшает качество оптимизации. Если невозможно применить ни один из редакторов, возможно, ваш сайт работает на CMS, в функционале которой предусмотрена обрезка изображений.

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

В случае с calltouch.ru Google советует сменить формат ряда изображений. Он говорит, что JPEG 2000, JPEG XR и WebP более оптимизированы для веба, нежели используемые нами PNG.

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

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

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

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

• //tinypng.com/
• //punypng.com/
• //compressor.io/

Эти сервисы дают сжатие от 30% до 80% без визуальных дефектов.

• Используйте атрибуты с правильным размером

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

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

Оптимизация JavaScript и CSS

Google Pagespeed Insights, как правило, рекомендует сокращать JavaScript и CSS. Обычно это совет перенести скрипты и стили в футер. Но не спешите следовать этим рекомендациям.

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

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

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

Чтобы не прибегать к ручной правке, можно воспользоваться онлайн-инструментами сжатия файлов стилей. Например, CSScompressor. В нём есть 3 степени сжатия: Light, Normal, Super Compact, и 3 опции сокращения комментариев: не удалять, удалить все, удалить комментарии определённой длины. Доступен Advanced Mode для профессиональных настроек.

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

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

Для такой задачи подойдёт инструмент Online YUI Compressor. Его можно использовать и для облегчения CSS.

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

• Загрузка контента из Google CDN

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

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

GZIP сжатие

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

Существует 2 типа сжатия gzip: динамическое и статическое.

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

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

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

Использование кеша

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

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

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

С помощью заголовков Last-Modified и ETag обеспечивается обновление кешированных файлов на устройстве пользователя. Браузер отправляет GET-запрос при загрузке сайта и получает ответ 304 — что означает отсутствие изменений и разрешение использования контента с устройства. Также следует прописать период хранения файлов через Expires или Cache-Control.

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

Стоит ли пользоваться Google Pagespeed Insights

Ответ на этот вопрос положительный, с тем условием, что вы не придаёте данному инструменту чрезмерного значения. Он удобен для проверки конкретной страницы на предмет оптимизации её составляющих, но не годится в качестве инструмента сравнения page speed разных страниц. Для больших проектов имеет смысл пользоваться более глубокими инструментами аналитики.