Особенности google pagespeed: улучшение оценки сайта и его рейтинга в поиске

Что делать, если показатели Google PageSpeed Insights низкие

Для начала важно знать, что нужно делать 5-6 замеров подряд и ориентироваться на средний показатель, потому что сайты не статичны и их скорость тоже

Фокусируйтесь вот на чём:

Мобильная версия — к ней Гугл предъявляет более серьезные требования и ставит ее в приоритет. А с 2019 года мобильный трафик превысил десктопный в России.

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

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

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

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

Способы измерить скорость интернета Ростелеком

Простейший способ проверки скорости Ростелеком заключается в использовании нашего сервиса. Для этого понадобится:

  1. посетить портал и открыть страницу проверки;
  2. нажать кнопку, предлагающую начать тестирование;
  3. немного подождать, пока система проведёт измерения.

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

Стоит подчеркнуть, что перед проведением тестирования стоит подготовить компьютер к проверке. Нужно:

  • остановить активные скачивания, отменить и запретить обновления (включая обновление Windows);
  • отключить фоновые программы и виджеты, которые используют часть трафика;
  • отключить от домашней сети wi-fi посторонние устройства и приборы;
  • при наличии подобной возможности заменить соединение по беспроводной сети подключением по кабелю (LAN).

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

Сервисом Speedtest.net

Помимо нашего сервиса проверить скорость интернета Ростелеком можно на портале speedtest.net. При этом пользователям придётся совершить те же действия, что описаны выше:

  1. подготовить компьютер к измерениям;
  2. посетить портал для проведения теста;
  3. нажать кнопку, запускающую процесс вычислений;
  4. дождаться результатов.

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

Тестирование скорости интернета Ростелеком другими сервисами

Кроме упомянутого сервиса speedtest, Ростелеком можно проверить и другими способами. Для этого можно посетить порталы:

  • 2ip.ru;
  • или Яндекс. Интернетометр.

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

Use it to find optimization opportunities, but don’t obsess on it

If you have a Shopify store, congrats you’re using the best ecommerce platform! You also don’t have 100% control over your server, so some of the PageSpeed warnings can’t be “fixed” (or should be, that’s why the quotes).

It’s important to optimize as much as you can, but there is a point where you don’t want to satisfy all of the PageSpeed warnings because you may be sacrificing user experience.

To see an example where providing a key optimization (Lazy Loading that makes your site lighter and faster) actually decreased the Google PSI score, check out this article: Case Study: Google PSI Score Is Not Equal to Page Load Speed.

Шаг № 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». Чтобы оптимизировать код кликните на «Просмотреть оптимизированное содержание». 

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

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

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

JavaScript

To try out the PageSpeed Insights API from JavaScript:

  1. Copy the code below. The code uses the PageSpeed Insights API to measure the performance of
    , and then it displays the results.

    <script>
    function run() {
      const url = setUpQuery();
      fetch(url)
        .then(response => response.json())
        .then(json => {
          // See https://developers.google.com/speed/docs/insights/v5/reference/pagespeedapi/runpagespeed#response
          // to learn more about each of the properties in the response object.
          showInitialContent(json.id);
          const cruxMetrics = {
            "First Contentful Paint": json.loadingExperience.metrics.FIRST_CONTENTFUL_PAINT_MS.category,
            "First Input Delay": json.loadingExperience.metrics.FIRST_INPUT_DELAY_MS.category
          };
          showCruxContent(cruxMetrics);
          const lighthouse = json.lighthouseResult;
          const lighthouseMetrics = {
            'First Contentful Paint': lighthouse.audits.displayValue,
            'Speed Index': lighthouse.audits.displayValue,
            'Time To Interactive': lighthouse.audits.displayValue,
            'First Meaningful Paint': lighthouse.audits.displayValue,
            'First CPU Idle': lighthouse.audits.displayValue,
            'Estimated Input Latency': lighthouse.audits.displayValue
          };
          showLighthouseContent(lighthouseMetrics);
        });
    }
    
    function setUpQuery() {
      const api = 'https://www.googleapis.com/pagespeedonline/v5/runPagespeed';
      const parameters = {
        url: encodeURIComponent('https://developers.google.com')
      };
      let query = `${api}?`;
      for (key in parameters) {
        query += `${key}=${parameters}`;
      }
      return query;
    }
    
    function showInitialContent(id) {
      document.body.innerHTML = '';
      const title = document.createElement('h1');
      title.textContent = 'PageSpeed Insights API Demo';
      document.body.appendChild(title);
      const page = document.createElement('p');
      page.textContent = `Page tested: ${id}`;
      document.body.appendChild(page);
    }
    
    function showCruxContent(cruxMetrics) {
      const cruxHeader = document.createElement('h2');
      cruxHeader.textContent = "Chrome User Experience Report Results";
      document.body.appendChild(cruxHeader);
      for (key in cruxMetrics) {
        const p = document.createElement('p');
        p.textContent = `${key}: ${cruxMetrics}`;
        document.body.appendChild(p);
      }
    }
    
    function showLighthouseContent(lighthouseMetrics) {
      const lighthouseHeader = document.createElement('h2');
      lighthouseHeader.textContent = "Lighthouse Results";
      document.body.appendChild(lighthouseHeader);
      for (key in lighthouseMetrics) {
        const p = document.createElement('p');
        p.textContent = `${key}: ${lighthouseMetrics}`;
        document.body.appendChild(p);
      }
    }
    
    run();
    </script>
    
  2. Paste the code into an HTML file.
  3. Open the HTML file in a browser. Upon successful completion, your page will look like
    Figure 1.

    Figure 1. The JavaScript demo

Стоит ли равняться на этот сервис

Только на него равняться вредно. Нельзя. Это как сходить к нескольким врачам до серьезной операции. Три инструмента проверки смогут дать картину в 3D. Какие три мы советуем и почему:

  1. Loading.express – проверки из России, Украины, Белоруссии и Германии. Работает на технологии Lighthouse, но использует свою калькуляцию теста скорости.
  2. WebPageTest – много технического, сложного, но инструмент актуальный и наиболее прокачан по локациям проверки сайта.
  3. Пейдж Спид от Гугл. Измеряет скорость сайта из Европы.

Кстати, на loading можете сделать замер прямо из этой строки проверки:

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

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

Google PageSpeed Insights Conclusion

When you’ve spent countless days, weeks, and months building a new website, you want every image, element, and icon to be top-notch.

However, that often results in a site that is slower than Google recommends.

When it comes to driving conversions on your site, speed will always play a big role.

People don’t want to wait 10 seconds for your site to load when they can click back to Google and select the next result.

Scoring well on the PageSpeed Insights test should be one of your main priorities when trying to perfect and optimize your site.

To get started, you first need to diagnose what issues are plaguing your site.

Is it images, page elements, too much text, bad coding, or all of the above?

Use the Google PageSpeed Insights tool to see where the problem lies, then work through their suggestions. You’ll also want to minify code, compress images, add browser caching, and implement AMP.

These are proven steps that can have a big impact on your PageSpeed Insight score.

Scoring a perfect 100 percent on Google’s PageSpeed Insights can give your website the boost that it needs to succeed.

What are the best ways you have found to increase your site speed?

See How My Agency Can Drive Massive Amounts of Traffic to Your Website

  • SEO — unlock massive amounts of SEO traffic. See real results.
  • Content Marketing — our team creates epic content that will get shared, get links, and attract traffic.
  • Paid Media — effective paid strategies with clear ROI.

Школьные годы

Семья Пейджев увлекалась компьютерами, поэтому первый ПК появился в их доме в 1978, когда Ларри «стукнуло» 5 лет.

С 1979 по 1975 Ларри посещал «началку» Okemos Montessori School, где обучение велось по методике Монтессори. Забавно, что и его будущий соратник Брин также ходил в начальную школу, работающую по данной методике. Ларри вспоминает, что поначалу был единственным школьником, выполняющем «домашку» в электронном виде.

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

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

Юный Ларри загорается идеей вырасти выдающейся личностью и запомниться великими свершениями, которые найдут широкое применение.

Среднюю школу East Lansing High School Ларри оканчивает в 1991.

Во время учебы в школе Ист Лансинга Ларри увлекается саксофоном. В течение двух лет он обучался игре на саксофоне в рамках летней программы Interlochen Center for the Arts – Центра искусств Интерлохена. В списке выдающихся выпускников на сайте Центра искусств упоминается и Ларри Пейдж

Также разработчик интернет-портала «Гугл» умеет играть на ударных инструментах.

Как пользоваться шаблоном

Для начала создайте копию шаблона Automated PageSpeed Insights API Tool.

В файле три вкладки (названия вкладок не меняйте!):

  • Settings — здесь указывается API ключ и расписание сбора данных.
  • Results — это лист, на котором собираются данные по заданным URL (данные листа обновляются после каждого запуска скрипта).
  • Log — на этот лист переносятся собранные данные (в том числе за прошлые периоды).

Предварительная подготовка шаблона

Для корректной работы нужно:

  • получить API ключ,
  • включить PageSpeed API.

Для получения API ключа перейдите в раздел «Учетные данные» сервиса Google APIs и нажмите кнопку «Создать учетные данные».

В выпадающем списке выберите «Ключ API».

Скопируйте созданный ключ.

Вставьте его в шаблон на листе «Settings».

Но для работы шаблона ключа недостаточно — нужно еще включить PageSpeed API. Для этого перейдите на страницу PageSpeed API и нажмите кнопку «Включить».

Важно! Если не включить PageSpeed API, скрипт в шаблоне работать не будет, и в таблице вы увидите ошибки

FAQS

Заключение: Как скорость страницы влияет на SEO и рейтинг Google 2021 Полное руководство 

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

Хотя сами по себе очки не должны вас сильно беспокоить, рекомендуется попытаться набрать больше 50 очков. Однако сосредоточьтесь на времени загрузки, которое измеряется секундами. Хороший сайт должен загрузиться в течение 3 секунд. Кто-то быстро должен загрузить 1 секунду.

Why Page Speed Matters

Page speed is a critical factor in ranking your website higher on Google’s search engine results.

If your website isn’t on par with the top 10 organic pages, you won’t rank on the first page.

So focusing on page speed is paramount to having a successful company and a website that converts.

Backlinko recently conducted a study where they analyzed over eleven million search engine results pages (SERPs) on Google.

They wanted to figure out which factors were the most common among sites ranked in the top 10 results.

Surprisingly, they found page speed and ranking don’t seem to be correlated. However, the average load time of a site on the first page is 1.65 seconds, which is decently fast.

However, Google says page speed does matter. There was even an entire update about it.

That connection is backed up and supported by Google’s new PageSpeed industry benchmarks.

They found that as page load times go up, the chance of someone bouncing from your site increases dramatically:

That means that if your page takes 10 seconds to load, the likelihood of someone leaving your site before it even loads increases by more than 120 percent!

But according to a recent study of more than 5 million sites, the average website takes 10.3 seconds to load fully on desktop and 27.3 seconds to load on mobile.

This means almost all of us are missing the mark when it comes to having a fast-performing website.

In another study, BigCommerce found that conversion rates for e-commerce websites average somewhere in the one to two percent range.

Portent found page speed can increase conversion rates drastically.

Getting your speed to under two seconds can increase traffic and revenue.

So, what causes a page to load slowly?

The most common causes of slow pages are bulky images and poorly-designed coding.

If you look at any website in the modern era, it’s likely filled to the tipping point with images.

If you aren’t optimizing your images, you could have pages that take up multiple megabytes of space.

Page size and weight are often measured by page weight bytes. Simply put, page weight bytes show the total size of a web page measured in bytes.

Google’s benchmark data shows that the best practice for page size or weight is under 500KB:

But again, most of us are missing the mark here. We are vastly exceeding the recommended weight.

One of the concepts that stood out to me the most from the Google report comes from this short yet impactful quote:

“No matter what, faster is better and less is more.”

No matter how well your site is doing, there’s a good chance you have serious room for improvement.

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

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

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

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

Summary

PageSpeed Insights is one of the tools you can use as part of a comprehensive performance analysis, but you likely won’t get a good score if you have a functioning ecommerce store with 3rd party apps.

Sometimes you can make your site lighter, faster, and with fewer requests, but your Google PSI score will go down.

Micromanaging each element in the Insights can sacrifice user experience and/or be a hassle to maintain.

Focus on improving actual metrics like page weight and load speed. We recommend WebPageTest.org to compare your load speed, weight, and requests metrics… and the Shopify Analyzer for an analysis of what can be optimized on a Shopify site.

Удалите код JavaScript и CSS

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

Сложный пункт, который требует знаний и практики.

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

А так как в том же WordPress обычно 9 из 10 скриптов — это внешние плагины, то там вы вряд ли что-то сделаете, так как они грузятся из своих папок и обновляются по 3 раза на неделю.

И ваши сделанные изменения банально затрутся.

Так что тут я могу рекомендовать:

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

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

Why the Google PageSpeed Score Isn’t Equal to the Loading Page Performance

At WP Rocket, we care about educating users on web performance and giving them the best tools to understand how to approach this complex topic.

That’s why we want to point out that the Google PageSpeed score could not reflect how fast your website is.

To be clear: you can have a good PageSpeed score, but your site could not be as fast. Or you can have a fast website and a bad PageSpeed score.

We’ll share a couple of examples — you might relate to them!

  • Following the PageSpeed Insights recommendations won’t always make your site faster.Let’s take the popular recommendation of removing render-blocking JavaScript. If you solve this issue, your PageSpeed score will improve. However, if you measure your loading time with Pingdom, you won’t necessarily notice an improvement.
  • The more your PageSpeed score is low, the more the loading time will improve — but don’t expect proportional enhancements.If your Google PageSpeed score jumps from 10 to 90, it’s quite likely that your loading time will improve — let’s say, it will decrease from 2s to 1.5s.If your Google score jumps from 80 to 90, your loading time will only decrease slightly — for instance, from 2s to 1.9s.

It’s because the Google PageSpeed score reflects an overall user experience more than the loading time.

The loading time is just the page loading time. On the other hand, the Google PageSpeed score takes into account six metrics that go beyond that.

In the next section, we’ll share practical examples to explain how the Google PageSpeed score is calculated. You’ll see how the metrics play together for both performance and user experience.

For now, keep in mind that you have to take care of both loading time and Google PageSpeed score. They both matter for different reasons:

  • If your loading time is high, you’re likely to lose users and conversions.
  • If your PageSpeed score is not good, likely, the Core Web Vitals metrics won’t be good as well. And your site will be penalized from an SEO perspective. Don’t forget: Core Web Vital accounts for 55% of the PageSpeed score.

Why Google PageSpeed Is Important (and Why It Affects SEO)

Google PageSpeed matters because it can affect SEO from two different perspectives: mobile speed and user experience.

Both mobile performance and user experience are related to specific ranking factors:

  1. In July 2018, Google rolled out the Speed Update, and mobile page speed became a direct ranking factor, both for Google Search and Ads.
  2. In June 2021, the Page Experience signal will roll out as an SEO ranking factor. This new ranking factor measures the user experience of a page. It includes several signals: mobile-friendliness, HTTPS-security, intrusive interstitial guidelines, safe-browsing, and the already mentioned Core Web Vitals metrics.

On the one hand, mobile page speed has been a ranking factor for more than two years. Hopefully, you’re already taking care of your site’s mobile performance. If you’re still in doubt, we’ve got you covered in the last section of this article with some performance optimization tips.

On the other hand, the three Core Web Vitals focus on how users interact with your page and account for 70% of the overall PageSpeed score weight. Meaning, they’re quite relevant in determining the PageSpeed Insights score.

Even though the Google PageSpeed score as a whole is not a ranking factor, you need to take care of the Core Web Vitals metrics. As we said, they’re part of the new Page Experience ranking signal and will affect your organic visibility.

You can find below the score required for each Core Web Vital. You should start thinking about how to enhance them! (Hint: WP Rocket is the easiest way to improve your Core Web Vitals in a few clicks).

The scores for each Core Web Vital

Вывод

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

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

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

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

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

Please enable JavaScript to view the comments powered by Disqus.