Чем раньше обнаружится проблема, тем проще её решить. Грамотные разработчики проверяют работоспособность проектов в Google PageSpeed Insights не на этапе сдачи финального кода, а по ходу разработки, когда найти и исправить проблему проще 🙂 Делать это постфактум, когда команда уже не на проекте — себе дороже.

Оптимизация скорости загрузки сайта для Google в 2021 году

Оптимизация скорости загрузки сайта для GooglePage Speed

Как ускорить загрузку страниц и увеличить ранг в PageSpeed рейтинге? — советы экспертов

В компании Google сделали исследование поведения пользователей на сайтах разных направлений, с целью выявления лучших показателей. В результате данного теста, выяснилось, что если страница сайта загружается более 3 секунд — вероятность отказа повышается в 2. 5 раза. И в этом исследовании ясно показано: скорость имеет значение! Поэтому для повышения рейтинга сайта гугл требует чтобы загрузка любой страницы сайта была не более 3-х секунд, оптимальным показателем является 1-2 секунды. Поэтому Google рекомендует разработчикам сайтов заняться оптимизацией своих проектов и предлагает для анализа эффективности скорости загрузки страницы использовать инструмент: Google PageSpeed.

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

Оптимизация базы данных (связи, индексы)

Первое на что я бы обратил внимание — на связи между таблицами в базе данных, а именно на ключи (secondary key) в полях по которым происходит связь между таблицами или осуществляется операция поиска. На них всех должен быть добавлен вторичный ключ. Как показывает практика это существенно ускоряет работу базы данных и уменьшает нагрузку на хостинг

Оптимизация SQL запросов

Такие запросы как «SELECT *» лучше не использовать, так как в память выгружаются все поля таблицы которые не всегда нужны. Оператор LIKE тоже лучше использовать в редких случаях. Все справочники по возможности лучше загонять в массив и работать с массивом. Также желательно использовать кеширование данных вывода SQL запроса (можно кеш сохранять в файлы или оперативную память)

Кеширование результатов SQL запросов

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

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

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

• Все изображения на сайте сжать, используя онлайн инструменты Compressor. io и TinyPNG. Данные инструменты бесплатные, но есть ограничения — не более определенного количества фото. Данные сервисы уменьшают размер графического файла примерно на 60-80% при этом качество фото может ухудшится.
• Также следует уменьшить размеры фото до нужного реального размера например 200x200px, а подгоняться при помощи стилей CSS width/height.

Подключение файлов JavaScript/CSS и шрифтов Fonts и отложенная загрузка

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

Также нужно добавить свойство async (асинхронная загрузка) для подключаемых скриптов. После добавление этого свойства в GPSpeed пропадет замечание по поводу асинхронной загрузки. Также старайтесь использовать сложные и массивные JS библиотеки по минимуму.

В данном примере все JS скрипты объединены вместе с библиотекой jQuery в один файл core.min.js и загружается асинхронно async и defer — отложено

Пример отложенного вызова CSS файла через JavaScript

В подключении шрифтов font-display параметр swap может показывать текст не дожидаясь полной загрузки всего шрифта.

Обязательно загружайте все изображения с помощью отложенной загрузки lazyload

При этом обязательно нужно подключить lazyload.min.js

Если у вас на странице есть svg элементы, то их лучше добавлять в HTML коде, без дополнительного обращения к тегу img. И svg необходимо ужимать тоже.

Минимизация (сжатие) JavaScript, CSS и HTML

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

Детальнее вы можете узнать по ссылке: https://developers.google.com/speed/docs/insights/MinifyResources

Включение сжатия gzip

GZIP это формат сжатия в вебе. Перед отображением страницы, файлы загружаются с сервера уже в сжатом виде. Данный тип сжатия поддерживают все современные браузеры.

Включить gzip сжатие файлов вы можете в настройках вашего хостинга.

Рекомендации по установке GZIP сжатия можете посмотреть здесь: https://developers.google.com/speed/docs/insights/EnableCompression

Удаление блокирующих кодов

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

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

Оптимизация версии сайта для мобильных устройств

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

Для любителей сайтов на бесплатных CMS, таких как: WordPress, Joomla, Drupal, Opencart, Magento, ModX, ImageCMS и другие.. проводить оптимизацию скорости загрузки сайта для рейтинга гугл будет достаточно сложно или невозможно.

Помогла ли вам статья?

348 раз уже помогла

Александр29 марта 2021

Отличная статья. По ней оптимизировал свой сайт.

Ответить

Что вам нужно знать

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

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

Так может ли время загрузки страницы влиять на SEO?

Если да, то насколько сильный это сигнал?

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

Утверждение: скорость страницы является фактором ранжирования

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

Скорость измеряется временем, которое требуется для загрузки страницы после того, как пользователь щелкнет ссылку на странице результатов поисковой системы (SERP) — особенно сейчас, когда Core Web Vitals оценивает загрузку, интерактивность и визуальную стабильность.

Google предлагает инструмент под названием PageSpeed ​​Insights для измерения времени загрузки, что еще больше подпитывает заявления о том, что скорость является фактором ранжирования.

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

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

Более приятно, когда страница загружается сразу после нажатия на нее — в этом и заключалась основная идея AMP.

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

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

Google снова и снова говорит, что релевантность является фактором ранжирования номер один.

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

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

Короче говоря, есть заявления за и против скорости страницы как фактора ранжирования.

Вес этого предполагаемого сигнала горячо обсуждается в индустрии SEO.

Давайте посмотрим на доказательства в следующем разделе и проясним несколько недоразумений.

Доказательства того, что скорость страницы является фактором ранжирования

Скорость была фактором ранжирования Google еще с 2010 года.

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

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

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

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

В объявлении компании говорится:

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

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

Джон Мюллер из Google пишет в Твиттере:

«Мы стараемся избегать ненужного дублирования в нашем коде, поэтому я предполагаю, что [обновление страницы] заменяет предыдущие факторы ранжирования по скорости».

Дополнительную информацию о том, как Google оценивает скорость обновления страницы, см. в нашей главе о Core Web Vitals.

Скорость страницы как фактор ранжирования: наш вердикт

Скорость страницы является подтвержденным фактором ранжирования в результатах поиска Google.

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

В настоящее время его можно выполнить, достигнув минимальных пороговых значений Google для Core Web Vitals.

Стоит повторить, что скорость не так важна, как релевантность страницы.

Так что имейте это в виду, когда решаете, куда направить ресурсы SEO.

Избранное изображение: Paulo Bobita/Search Engine Journal

Категория SEO

8-шаговое руководство по достижению 100% скорости страницы Google

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

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

Для тех, кто хочет получить представление о времени загрузки, Google предлагает бесплатный инструмент PageSpeeds Insights, который может оценить вашу страницу по шкале от нуля до 100. Вот краткий пример отчета, который PageSpeed ​​Insights представляет после поиска. «google.com»:

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

Вот пример отчета с длинным списком жаргонных комментариев:

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

Чтобы помочь вам улучшить взаимодействие с пользователем и решить проблему медленной загрузки, вот руководство из восьми шагов для достижения 100% скорости. Для каждого шага мы объясним, почему это важно, дадим вам представление о том, как это сделать, и сообщим, может ли потребоваться участие технического эксперта.

Как добиться 100% скорости страницы Google

1. Определите, где вы отстаете.
2. Сжимайте изображения.
3. Уменьшите или минимизируйте код HTML, CSS и JavaScript.
4. Удалите элементы, блокирующие визуализацию.
5. Увеличьте скорость своего мобильного телефона.
6. Избегайте или минимизируйте перенаправления страниц.
7. Увеличьте время отклика сервера.
8. Используйте сеть доставки контента.

1. Определите, где вы отстаете.

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

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

• Google PageSpeed ​​Insights
• Веб-грейдер
• Метрическая система GTM
• Тест скорости веб-сайта KeyCDN
• Пингдом

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

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

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

2. Сжимайте изображения.

Большие изображения — одна из наиболее частых причин медленной загрузки страниц. Существует много разных мнений о том, что такое оптимальный размер файла. В то время как некоторые хосты говорят, что вы должны стремиться к файлам размером менее 200 КБ, блог Shopify предлагает использовать размер менее 70 КБ. Разработчики Google предлагают сделать изображение как можно меньше, прежде чем потеряете четкость.

Чтобы уменьшить ваши изображения без полной потери качества, мы предлагаем сжимать файлы с помощью бесплатного онлайн-приложения, такого как Squoosh.app или Compress.io. Вы также можете использовать Photoshop.

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

Размер экрана не совпадает с размером файла. Размер дисплея — это просто размер изображения на вашем веб-сайте.

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

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

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

3. Сократите или минимизируйте код HTML, CSS и JavaScript.

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

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

4. Удалите элементы, блокирующие визуализацию.

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

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

5. Увеличьте скорость своего мобильного телефона.

В 2018 году 60 % поисковых запросов в Google выполнялись с мобильных устройств. Наряду с поощрением оптимизированных для мобильных устройств сайтов в рейтинге результатов поиска, Google также даст вам более высокую оценку скорости страницы и, возможно, более высокий рейтинг, если ваш мобильный сайт загружается быстро.

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

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

Такие сервисы, как AMP (сокращение от Accelerated Mobile Pages), могут помочь вам в создании упрощенных веб-страниц, которые быстро загружаются и автоматически настраиваются в зависимости от размера браузера или устройства.

6. Избегайте или минимизируйте перенаправления страниц.

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

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

7. Сократите время отклика вашего сервера.

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

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

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

8. Используйте сеть доставки контента.

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

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

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

Если вы создали свой сайт с помощью CMS, такой как HubSpot, возможно, он уже работает на CDN. GoDaddy и Squarespace — другие примеры программного обеспечения для управления контентом, предлагающего услугу CDN.