Google speed insights: Google обновил инструмент для измерения скорости загрузки сайта PageSpeed Insights

Содержание

Google обновил инструмент для измерения скорости загрузки сайта PageSpeed Insights

{«id»:3854,»title»:»\u041c\u044b \u0438\u043d\u0432\u0435\u0441\u0442\u0438\u0440\u0443\u0435\u043c 100 \u0442\u044b\u0441\u044f\u0447 \u0440\u0443\u0431\u043b\u0435\u0439 \u0432 \u0442\u043e, \u0447\u0442\u043e \u0432\u044b \u0441\u043a\u0430\u0436\u0435\u0442\u0435″,»url»:»\/redirect?component=advertising&id=3854&url=http:\/\/vc.ru\/special\/invest&hash=c051e54a29872a46745c844882cebf6257f18b88c30fbac8626deed1679de131″,»isPaidAndBannersEnabled»:false}

В 04:10 по московскому времени обновился инструмент Google PageSpeed Insights. Это зафиксировала система мониторинга Loading.express.

3299

просмотров

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

Теперь инструмент работает на версии Lighthouse 6.0.

Новый PageSpeed Insights включает в себя новые метрики «Отрисовка крупного контента», «Общее время блокировки» и «Совокупное смещение макета». Подробнее про каждый показатель вы можете прочитать в материале от 22 марта.

Появились новые предупреждения, вроде «Удалите неиспользуемый код JavaScript» или «Избегайте API document.write()».

«Данные наблюдений» обновили свои показатели. Теперь в них присутствует Отрисовка крупного контента (LCP) и Совокупное смещение макета (CLS), вместе с Первая отрисовка контента (FCP) и Первая задержка ввода (FID).

Инструмент в консоли разработчика Chrome тоже обновился до 6.0 версии Lighthouse.

Ссылки с новых параметров ведут на статью про Web Vitals (ENG). Материал на русском языке от 11 мая здесь.

Web Dev Live

Google объявил о старте онлайн конференции 30 июня «web.dev LIVE», которая начнется в 19:00 и продлится до 22:00 (МСК). Ссылка на подробности о мероприятии здесь — web.dev/live/.

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

Новые аудиты пока не до конца переведены на русский язык.

Общие показатели оценки от Google PageSpeed Insights могли упасть от 10% до 50%. Сайты, которым раньше Гугл давал оценку в желтой зоне, теперь могут переместиться в красную.

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

{
«author_name»: «Алексей из LOADING.express»,
«author_type»: «self»,
«tags»: [«\u0441\u043a\u043e\u0440\u043e\u0441\u0442\u044c\u0441\u0430\u0439\u0442\u0430″,»webvitals»,»pagespeed»,»google»,»chrome»],
«comments»: 3,
«likes»: 2,
«favorites»: 15,
«is_advertisement»: false,
«subsite_label»: «services»,
«id»: 130330,
«is_wide»: false,
«is_ugc»: true,
«date»: «Thu, 28 May 2020 14:03:53 +0300»,
«is_special»: false }

{«id»:6614,»url»:»https:\/\/vc.ru\/u\/6614-aleksey-iz-loading-express»,»name»:»\u0410\u043b\u0435\u043a\u0441\u0435\u0439 \u0438\u0437 LOADING.express»,»avatar»:»6689308e-c574-f9ab-3134-d3bd7c9ddf2e»,»karma»:1155,»description»:»\u0422\u0440\u0430\u0444\u0438\u043a \u0438 \u043a\u043e\u043d\u0432\u0435\u0440\u0441\u0438\u0438. 9 \u043b\u0435\u0442 \u043e\u043f\u044b\u0442\u0430.»,»isMe»:false,»isPlus»:true,»isVerified»:false,»isSubscribed»:false,»isNotificationsEnabled»:false,»isShowMessengerButton»:false}

{«url»:»https:\/\/booster.osnova.io\/a\/relevant?site=vc»,»place»:»entry»,»site»:»vc»,»settings»:{«modes»:{«externalLink»:{«buttonLabels»:[«\u0423\u0437\u043d\u0430\u0442\u044c»,»\u0427\u0438\u0442\u0430\u0442\u044c»,»\u041d\u0430\u0447\u0430\u0442\u044c»,»\u0417\u0430\u043a\u0430\u0437\u0430\u0442\u044c»,»\u041a\u0443\u043f\u0438\u0442\u044c»,»\u041f\u043e\u043b\u0443\u0447\u0438\u0442\u044c»,»\u0421\u043a\u0430\u0447\u0430\u0442\u044c»,»\u041f\u0435\u0440\u0435\u0439\u0442\u0438″]}},»deviceList»:{«desktop»:»\u0414\u0435\u0441\u043a\u0442\u043e\u043f»,»smartphone»:»\u0421\u043c\u0430\u0440\u0442\u0444\u043e\u043d\u044b»,»tablet»:»\u041f\u043b\u0430\u043d\u0448\u0435\u0442\u044b»}},»isModerator»:false}

Блоги компаний

Еженедельная рассылка

Одно письмо с лучшим за неделю

Проверьте почту

Отправили письмо для подтверждения

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

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

Для начала развею миф о том, что оценка сервиса — это скорость загрузки.

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

Результаты продемонстрирую на примере анализа сайта midapro.shop

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

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

Через полминуты, запустил тест снова, ничего не меняя на сайте.

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

Проведем тест еще раз.

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

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

Согласно данным в “Инспекторе разработчика” в браузере,

сайт прогрузился за 2.3 секунды, за 3.3 секунды завершилась загрузка всей страницы:

При том, что на странице 4 слайдера, крупные баннера и легкая анимация.

Посмотрим подробные данные от pagespeed.

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

Однако для мобильной версии, он насчитал 8.7 секунд.

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

с телефона 8 секунд не удалось достичь никогда.

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

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

Попробуем выполнить рекомендацию.

Скриншоты сайта до изменений и после.

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

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

Стало конечно лучше, грузиться то теперь нечему, кроме картинок.

Но есть рекомендации и по ним.

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

Как видно первый формат, не поддерживает ни один браузер, кроме Safari.

Второй формат не поддерживает вообще никто.

Третий формат не поддерживается в Safari.

О выводах судить только вам, лично у меня цензурных слов на эту рекомендацию вряд ли хватит.

Далее гугл рекомендует снова что-то удалить..

… при этом еще ниже в разделе “Успешные аудиты” он говорит, что код CSS и JS оптимален и все лишнее удалено.

Это уже противоречие самому себе в открытом виде.

Под конец я вернул сайт в изначальное состояние и провел тест в четвертый раз:

На что похожи эти результаты снова сказать сложно… что-то между 2 и 3 тестом.

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

Вывод

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

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

Зеленая зона возможна при отказе от использования cms(движка/админки сайта), при отказе от использования видео, особенно youtube, и использования множества больших изображений.

Ну и напоследок, протестируем сайт компании Google.

Google Pagespeed Insights — Плагин для WordPress

Google Pagespeed Insights is a tool that empowers you to make decisions that increase the performance of your website. Recommendations from Google Pagespeed are based upon current industry best practices for desktop and mobile web performance.

Through the addition of advanced data visualization, tagging, filtering, and snapshot technology, Google Pagespeed Insights for WordPress provides a comprehensive solution for any webmaster looking to increase their site performance, their search engine ranking, and their visitors browsing experience.

Detailed Page Reporting

Sort your page reports by their Page Speed Score to prioritize the largest areas of opportunity on your site. Page reports utilize easy to read visualizations that allow you to quickly focus in on the most important data to improve your sites performance.

Report Summaries

Report Summaries are a powerful and exclusive feature of Google Pagespeed Insights for WordPress. Summaries display your average Page Score, largest areas for improvement across ALL reports, as well as best and lowest performing pages. Report summaries can be filtered to narrow results by: Pages, Posts, Categories, Custom URLs, and Custom Post Types.

Using Report Summaries allows you to ‘zoom out’ from the page-level and better understand the big picture of your sites performance.

Desktop and Mobile Page Reports

Best practices for site performance differ greatly between Desktop and Mobile device usage. Configure Google Pagespeed Insights for WordPress to generate Desktop reports, Mobile reports, or both!

Toggle back and forth between report types to see specific suggestions for improving the performance and experience on each platform.

Report Snapshots

The Report Snapshot tool builds on the power of Report Summaries, to provide historical “Point In Time” data about your website.

Take a snapshot of any Report Summary screen to store that data for future retrieval. Add comments to your snapshots to provide additional meaning, such as “Before Installing W3 Total Cache.” Additionally, filter a Report Summary before taking a Snapshot to save a summary of the filtered data.

Snapshot Comparison Tool

The Snapshot Comparison Tool is an amazing utility that lets you visualize side-by-side results from any two similar Report Snapshots.

Take a Report Snapshot before installing new plugins, or before implementing performance recommendations. Take another snapshot when you are finished and compare your results to measure the effect of your changes.

Add/Import Custom URLs

Easily add additional URLs for inclusion in Pagespeed Reports. Even add URLs for non-WordPress sites, even if they are not hosted on your server. URLs can be added manually, or upload a properly formatted XML sitemap to add multiple pages at once.

Custom URLs can be tagged and filtered in Report Summaries. Take Report Snapshots of your Custom URLs just like you would with any other report type.

Scheduled Report Checks

Configure Google Pagespeed Insights for WordPress to automatically recheck your site on a Daily, Weekly, Bi-Monthly, or Monthly basis.

With each scan, any new pages or posts will be discovered, and existing reports will be updated to reflect any changes to your site, as well as any changes in the Pagespeed recommendations.

Additional Languages

(v1.x translation) Russian Translation provided by: Ivanka from coupofy.com
(v1.x translation) Spanish Translation provided by: Ogi Djuraskovic from firstsiteguide.com
(v1.x translation) Serbian Translation provided by: Ogi Djuraskovic from firstsiteguide.com

Решение проблем

Please find the below list of potential issues that you may encounter, and the recommended next steps.

I entered my API Key and saved the Options, but no Reports are showing up in the Report List.

Google Pagespeed needs to be able to load each page to create its report. Make sure that your pages are publicly accessible over the internet.
Ensure that your API key is entered correctly, and that you have enabled the «PageSpeed Insights API» from the Google API Console.
In the Options page, under «Advanced Configuration» there is a checkbox called «Log API Exceptions». Any API exception that is not caught and handled automatically will be stored for up to 7 days. This log information can be very helpful when diagnosing issues.

Page report checks never finish all of the way, I have to press «Start Reporting» again and again to get it to finish checking all of my pages.

If the reports seem to always run for a certain length of time before stopping unexpectedly, you may be exceeding your servers Max Execution time. Try increasing the value in Options->Advanced Configuration «Maximum Execution Time».
Some web hosting providers do not allow the Maximum Execution Time to be overridden or increased. In that case you can try setting the Maximum Script Run Time. This will make the script run for the set period of time, then stop and spawn a new script, to get around timeout issues. Start with a low value, and test. Increase the value one step at a time until you find the largest value that allows your scans to finish successfully.

An error was reported while trying to check one of my pages, and it has been added to the Ignored Pages section.

Navigate to the Ignored Pages tab, find the page, and click «reactivate» to try it again.
If the page fails again, ensure that the page is publicly accessible from the internet. Non-public pages cannot be checked.
In some rare cases, pages are not able to be scanned by the Pagespeed API. Try checking your page manually here: https://developers.google.com/speed/pagespeed/insights/. If the page fails to be checked, report the issue to Google so that they can diagnose further.

I received a Javascript or PHP error.

If the error appeared while Google Pagespeed was checking pages, you may have loaded the page while it was storing data. Refresh the page in a couple seconds to see if the issue has gone away.
If issues persist please report the problem with as much information as you can gather, including: What page you were on, the exact text of the error, or a screenshot of the error.
In the Options page, under «Advanced Configuration» there is a checkbox called «Log API Exceptions». Any API exception that is not caught and handled automatically will be logged for up to 7 days. This log information can be very helpful when diagnosing issues

My Page Scores seem really low. When I click «Recheck Results» when viewing Report Details, the score jumps up dramatically.

Your server may have been responding slowly when the first report was generated. A slow server response time can have a large impact on your Page Speed Score. If these problems happen frequently you may want to talk with your hosting provider about the problem, or look into alternative hosting providers.

I want to clear out all of the current page reports and start over.

Navigate to the «Options» tab
Expand the «Advanced Configuration» section.
Find the «Delete Data» Dropdown
Select «Delete Reports Only» to remove all Page Reports
Or Select «Delete EVERYTHING» to remove all Page Reports, Custom URLs, Snapshots, and Ignored Pages

Мифы и факты о PageSpeed Insights

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

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

Итак, что же такое PageSpeed Insights?

Существует миф о том, что это официальный инспектор Google.

Этот ресурс является частью проекта Google developers, однако не является официальной оценкой.

Это четко описано в FAQ, который, к сожалению, не переведен на русский язык – потому, наверное, отечественные seo-специалисты о нем и не знают:

https://developers.google.com/speed/docs/insights/faq

PageSpeed Insights был разработан «на основании рекомендаций постов и статей веб-разработчиков сообщества» (“Many of the rules used by PageSpeed Insights came out of recommendations of blog posts and articles published by developers in the web community”).

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

“Since PageSpeed is a performance optimization tool, its recommendations are biased in favor of speed (…) our suggestions might be restrictive for an individual web site. You have to consider the tradeoffs for your own application (…)”

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

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

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

Если есть замечания в этом разделе, то это говорит о некачественной работе верстальщика или администратора сайта.

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

Что касается замечаний из раздела по скорости, то эти замечания я бы разбил на две группы:

Замечания, а вернее одно замечание: «Сократите время ответа сервера» крайне важно устранить.
Что такое время ответа сервера? Это время, за которое после команды пользователя открыть определенную страницу на сервере происходит выполнение всех команд программного кода, сбор информации из базы данных, формирование html страницы, которую отобразит браузер, и передача ее пользователю.
Этот параметр влияет на позиции в поисковой выдаче. На сайте https://moz.com/blog/how-website-speed-actually-impacts-search-ranking приведены результаты исследований, доказывающие это, а также опровержение гипотезы о влиянии на позиции времени загрузки изображений, стилей и других сопутствующих странице файлов.
Googleсчитает, что время ответа сервера должно составлять менее 200 мс. Если на загрузку вашего сайта требуется меньше времени, то сервис не покажет замечания и не покажет время загрузки Вашего сайта. Хотя, если ваши страницы загружаются за 150 мс, вы можете улучшить этот показатель до 30-50 мс.

Ко второй группе я отношу все остальные замечания. Эти замечания отображают не скорость, а использование технологий, которые в теории могут ускорить работу сайта. Т.е. замечания могут быть у очень быстро работающего сайта, и их может практически не быть у весьма неторопливого ресурса. Хочу отметить, что современный сайт не может обойтись без замечаний, поскольку система предъявит замечания ко всем подключенным скриптам, в том числе и google analytics, поскольку мы не можем влиять на настройки серверов Google и других сервисов.
Эти замечания также отражаются на общей скорости загрузки сайта (но, как указано выше, это не влияет на позиции сайта), но эта скорость уже важна для людей – то есть, как долго пользователь будет ждать открытия Вашего сайта?
Я рекомендую выполнять замечания по включению Gzip сжатия и использования кэша браузера.
Не рекомендую выполнять «Удалите код JavaScript и CSS, блокирующий отображение верхней части страницы», поскольку выполнение этой рекомендации часто приводит к неправильной загрузке и функционированию сайта.
Остальные замечания следует оценивать по степени эффективности, если выполнение сократит Вам пару килобайт, то можно и пропустить такое замечание, а если у Вас, к примеру, очень объемные изображения, то подумайте о людях, которые будут ждать их загрузки на телефоне, через мобильный интернет и выполните рекомендации.

Какой мы можем сделать вывод?

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

Google PageSpeed Insights обновился — и оценка сайтов упала. Что об этом нужно знать?

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

Веб-сайты, имевшие оценку PageSpeed Insights 95-99 баллов (из 100 возможных), за ночь опустились до отметки 32-35. Показатели упали у всех проверенных нами сайтов. Рассказываем, что случилось и что необходимо предпринять.

Время загрузки веб-сайта важно не только с точки зрения пользовательского опыта. Быстрая загрузка стала ключевым фактором ранжирования Google с июля этого года. Сам Google предоставлял инструмент для измерения и оптимизации времени загрузки с помощью функции PageSpeed Insights.

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

Пользователи по всему миру заметили, что результаты, предоставленные новым инструментом, значительно хуже, чем в предыдущих версиях. Крупные новостные порталы упали вплоть до 20–30 баллов. Всё говорит о том, что PageSpeed Insights стал оценивать скорость намного строже.

Конечно, в панику впадать не нужно, так как все инструменты после обновления проходят период баг-фикса, когда не всё работает идеально. В частности, сейчас инструмент даёт разные оценки для одной и той же страницы, а порой вообще указывает, что страница не доступна (хотя это не так). По моему опыту, потребуется 2–3 недели, чтобы разработчики исправили критичные ошибки и инструмент начал работать стабильно. Хотя скорость загрузки сайта и влияет на его позицию в выдаче Google, всё-таки за одну ночь позиции вашего сайта не обрушатся. Сохраняйте спокойствие.

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

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

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

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

Во главе угла — скорость загрузки, и она разбита на 6 пунктов.

Время загрузки первого контента — загрузка первого экрана сайта, готового к взаимодействию.

Индекс скорости загрузки — общая загрузка отображения всей страницы.

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

Время загрузки достаточной части контента — загрузка текста, картинок, css, js, относится к времени загрузки первого экрана.

Время окончания работы ЦП — серверные настройки.

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

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

Старый Google PageSpeed Insights требовал улучшать цифры по модифицированию css, js, html и всех остальных ресурсов, необходимых для корректного отображения сайта. Хотя на практике подобная модификация, согласно рекомендациям Гугла, наоборот, приводила к задержке загрузки страницы. Сейчас это не влияет на ранг оценки и носит лишь рекомендательный характер.

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

Появилась новая рекомендация относительно использования новых форматов изображений: JPEG 2000, JPEG XR и WebP. Это более современные и лёгкие форматы изображений, которые позволяют серьёзно оптимизировать скорость загрузки, особенно на нагруженных картинками сайтах. Ну и Google любит всё новое, так что вот :–)

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

Загружены большие картинки (размер и/или вес), хотя пользователь видит их в миниатюре и в маленьком разрешении — оптимизируйте картинки, начните переход на более современные форматы. Вот несколько сервисов, которые могут вам в этом помочь: tinypng (просто переобжать и облегчить картинки) и online-convert (конвертируем из png в современный WebP).

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

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

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

Мнение редакции может не совпадать с мнением автора. Ваши статьи присылайте нам на [email protected]. А наши требования к ним — вот тут.

Google PageSpeed Insights — что это и как добиться результата 100%?

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

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

Как работает Google PageSpeed Insights?

По результатам анализа Google PageSpeed Insights дает характеристику параметров скорости сайта при загрузке на компьютерах и на мобильных устройствах. Для оценки скорости отображения веб-страницы сервис использует 100-балльную шкалу:

90 баллов или выше означает быструю загрузку,
от 50 до 90 — среднюю,
ниже 50 — медленную.

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

Лицемерие google. PageSpeed Insights

Google Page Speed Insights — это сервис от гугла, который позволяет определить производительность сайта и дает рекомендации по его оптимизации. Очень важно понимать, что это всего лишь рекомендации! Некоторые воспринимают эти рекомендации настолько серьезно, что готовы реализовать все что там написано в ущерб функционалу своего сайта, что в итоге может даже навредить. Но это довольно сложная тема с множеством нюансов, а данная статься лишь мои мысли в слух и пара замечаний самому google.

Есть такая рекомендация:

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

Форматы JPEG 2000, JPEG XR и WebP обеспечивают более эффективное сжатие по сравнению с PNG или JPEG, поэтому такие изображения загружаются быстрее и потребляют меньше трафика

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

На момент написания данной статьи, это всего 80%. Вполне не плохо, но еще слишком мало чтобы использовать повсеместно. И как вы думаете что делает с этой информацией сам PageSpeed Insights? Правильно, он использует PNG:

Ну ладно, не то что сами рекомендуют, но почему бы не SVG? Нужно же подать пример, но зачем? А давайте проверим на оптимизацию сам сайт developers.google.com на котором находится данный сервис:

Мобильная версия всего лишь 51, а вы видели эту страницу? Она практически пустая, несколько меню сверху и снизу, пара новостей и поиск:

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

В общем любая оптимизация полезна, любая рекомендация имеет смысл быть, но давайте без фанатизма. Спасибо за внимание.

О PageSpeed Insights | Разработчики Google

PageSpeed Insights (PSI) сообщает об эффективности страницы как на мобильных устройствах, так и на компьютерах.
устройств и предлагает варианты улучшения этой страницы.

PSI предоставляет лабораторные и полевые данные о странице. Лабораторные данные полезны для отладки
проблемы с производительностью, поскольку он собирается в контролируемой среде. Однако это не может
выявить узкие места в реальном мире.Полевые данные полезны для фиксации реальных, реальных пользователей.
опыт, но имеет более ограниченный набор показателей. Смотрите, как думать
About Speed Tools для получения дополнительной информации о 2 типах данных.

Оценка производительности

В верхней части отчета PSI показывает оценку, которая обобщает эффективность страницы.
Этот счет определяется запуском Lighthouse для сбора и
анализировать лабораторные данные о странице. Оценка 90 или выше считается хорошей.От 50 до 90 — это балл, который требует улучшения, а значение ниже 50 считается плохим.

Реальные полевые данные

Когда PSI получает URL-адрес, он будет искать его в пользовательском интерфейсе Chrome.
Набор данных отчета (CrUX). Если возможно, PSI сообщает о первом
Contentful Paint (FCP), задержка первого ввода (FID),
Самая большая Contentful Paint (LCP) и совокупный макет
Данные метрики сдвига (CLS) для источника и, возможно, URL-адреса конкретной страницы.

Хорошая оценка, требуется улучшение, плохая

PSI также классифицирует полевые данные по 3 сегментам, описывая опыт, который считается полезным, а также потребности.
улучшение или плохое. PSI устанавливает следующие пороги для хорошего / требует улучшения / плохого,
на основе нашего анализа набора данных CrUX:

	Хорошо	Требует улучшения	Плохо
FCP	[0, 1800 мс]	(1800 мс, 3000 мс)	более 3000 мс
FID	[0, 100 мс]	(100 мс, 300 мс)	более 300 мс
LCP	[0, 2500 мс]	(2500 мс, 4000 мс)	более 4000 мс
CLS	[0, 0.1]	(0,1, 0,25]	более 0,25

Распределение и выбранные значения метрики

PSI представляет распределение этих показателей, чтобы разработчики могли понять
диапазон значений FCP, FID, LCP и CLS для этой страницы или источника. Это распределение также
разделены на три категории: хорошие, нуждаются в улучшении и плохие, обозначенные зеленым, оранжевым,
и красные полосы. Например, если на оранжевой полосе FCP отображается 14%, это означает, что 14% всех
наблюдаемые значения FCP находятся между 1000 мс и 3000 мс.Эти данные представляют собой сводное представление
всех загрузок страниц за предыдущий 28-дневный период сбора.

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

Core Web Vitals

Core Web Vitals — это общий набор сигналов, важных для всей сети.
опыты.Основные показатели Web Vitals — это FID, LCP и CLS с соответствующими показателями.
пороги. Страница проходит оценку Core Web Vitals, если 75-й процентиль
все три показателя хороши. В противном случае страница не проходит оценку.

Различия между полевыми данными в PSI и CrUX

Разница между полевыми данными в PSI и отчетом о пользовательском опыте Chrome на
BigQuery заключается в том, что данные PSI обновляются ежедневно за последний 28-дневный период.Данные установлены на
BigQuery обновляется только ежемесячно.

Лабораторные данные

PSI использует Lighthouse для анализа заданного URL-адреса и получения оценки производительности, оценивающей
эффективность страницы по разным показателям, в том числе по: Первый содержательный
Краска, Самая большая содержательная краска, Скорость
Индекс, совокупный сдвиг макета, время до
Интерактивное и общее время блокировки.

Каждый показатель оценивается и обозначается значком:

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

Аудит

Lighthouse делит свои проверки на три части:

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

Часто задаваемые вопросы (FAQ)

Какие устройства и условия сети использует Lighthouse для имитации загрузки страницы?

В настоящее время Lighthouse моделирует загрузку страницы на устройстве среднего уровня (Moto G4) на
Мобильная сеть.

Почему полевые и лабораторные данные иногда противоречат друг другу?

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

Почему для всех показателей выбран 75-й процентиль?

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

Почему FCP в v4 и v5 имеет разные значения?

FCP в версии 5 сообщает о 75-м процентиле (по состоянию на 4 ноября 2019 г.), ранее это был 90-й процентиль.В версии 4 FCP сообщает медианное значение (50-й процентиль).

Почему у FID в v5 разные значения?

FID сообщает о 75-м процентиле (по состоянию на 27 мая 2020 г.), ранее это был 95-й процентиль.

Какова хорошая оценка лабораторных данных?

Любой зеленый результат (90+) считается хорошим.

Почему оценка производительности меняется от запуска к запуску? Я на своей странице ничего не менял!

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

Почему данные о скорости в реальном отчете об опыте пользователя Chrome недоступны для URL-адреса?

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

Почему данные о скорости в реальном отчете о пользовательском опыте Chrome недоступны для источника?

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

Еще вопросы?

Если у вас есть конкретный и ответственный вопрос об использовании PageSpeed Insights,
задайте свой вопрос на английском в Stack Overflow.

Если у вас есть общие отзывы или вопросы о PageSpeed Insights, или вы хотите начать
общее обсуждение, начните тему в списке рассылки.

Обратная связь

Была ли эта страница полезной?

да

Большой! Спасибо за ваш отзыв!Если у вас есть конкретный вопрос, на который можно ответить, об использовании PageSpeed Insights,
задать вопрос на английском в стеке
Переполнение. Чтобы задать общие вопросы, отзывы и обсуждения, начните обсуждение в
список рассылки.

Нет

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

Как использовать Google PageSpeed Insights (правильный путь)

Что такое Google PageSpeed Insights?

Google PageSpeed Insights — это бесплатный инструмент, который поможет вам найти и исправить проблемы, замедляющие работу вашего веб-приложения.Инструмент с открытым исходным кодом под названием Lighthouse собирает и анализирует лабораторные данные, которые объединяются с реальными данными из набора данных Chrome User Experience Report. Результатом является оценка, которая суммирует производительность и ряд рекомендаций.

Схема работы Lighthouse — Источник: Google

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

Аудит	Описание	Масса
Первая насыщенная краска (FCP)	Первый момент времени, когда пользователь может увидеть любое содержимое страницы на экране.	15%
Индекс скорости (SI)	Визуальный прогресс загрузки страницы и скорость отрисовки содержимого.	15%
Краска с наибольшим содержанием (LCP)	Время, пока самый большой элемент содержимого не станет полностью видимым на экране.	25%
Время до взаимодействия (TTI)	Время, необходимое для того, чтобы страница стала полностью интерактивной.	15%
Общее время блокировки (TBT)	Степень неинтерактивности страницы до тех пор, пока она не станет надежно интерактивной.	25%
Совокупное смещение макета (CLS)	Как часто пользователь сталкивается с неожиданными сдвигами макета.	5%

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

Общая оценка производительности делится на категории «Хорошо», «Требует улучшения» и «Плохо» на основе значений каждой взвешенной метрики.

Хорошо : 90–100 баллов
Требуется улучшение : 50-89 баллов
Плохо : 1–49

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

Просто использовать

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

Тем не менее, начать работу с Google PageSpeed Insights легко:

Посетите страницу Google PageSpeed Insights
Введите URL своей веб-страницы
Нажмите «Анализировать»

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

Пример результатов производительности для Yahoo.com — Источник: Google

Сформированный отчет разделен на несколько разделов:

Оценка результативности : Общая оценка
Field Data : реальные данные Google, если таковые имеются
Origin Summary : Обзор Core Web Vitals
Лабораторные данные : метрики рассчитаны с помощью Lighthouse
Возможности : Предложения по ускорению загрузки страницы
Диагностика : Дополнительная информация о производительности приложения

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

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

Пример возможности для улучшения — Источник: Google

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

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

Вы все еще нуждаетесь в нагрузочном тестировании

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

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

В дополнение к быстрому созданию нагрузочных тестов, LoadNinja запускает нагрузочные тесты на реальных экземплярах браузера, чтобы обеспечить наиболее точные измерения производительности и упростить отладку. Нагрузочные тесты на основе браузера учитывают время выполнения JavaScript, что критично для одностраничных приложений (SPA) и других приложений с большим количеством JS.

Подпишитесь на бесплатную пробную версию LoadNinja

Посмотрите, как легко начать нагрузочное тестирование сегодня!

Итог: Тестируйте с умом

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

Google PageSpeed Insights для WordPress

Последнее обновление: 19 мая 2021 г.

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

Контрольный тест производительности

Benchmarking Pagespeed — отличный способ определить эффективность и производительность вашего веб-сайта WordPress. Как мы обсуждали в разделе «Оптимизация WordPress для повышения скорости и производительности», одним из первых шагов по ускорению сайта является измерение его текущей производительности.

Мы рекомендуем использовать комбинацию сервисов, поскольку они будут тестироваться из разных мест и типов серверов, что поможет составить более полную картину производительности веб-сайта.Некоторые общие примеры включают; WebPageTest.org, Pingdom, WP Engine Page Performance и Google PageSpeed Insights.

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

Google PageSpeed Insights

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

Многие люди стремятся получить идеальную оценку 100/100 в Google, будь то потому, что этого требует клиент, или потому, что Google в значительной степени управляет поисковой оптимизацией, поэтому инструмент Google, кажется, имеет больший вес. Однако важно понимать, что означает эта оценка с точки зрения вашего бизнеса, наряду с отчетами об эффективности из множества других мест.Любой зеленый балл (90-100) считается хорошим, желтый балл (50-89) считается средним, любой красный балл (0-49) считается плохим.

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

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

PageSpeed Audits

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

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

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

Полный список проверок см. В справочном руководстве Google «Lighthouse».

Полевые и лабораторные данные

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

Первая насыщенная краска

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

Улучшение FCP

Минимизировать количество внешних таблиц стилей и скриптов, блокирующих рендеринг
- Это можно сделать с помощью такого плагина, как WP Rocket.
Уменьшить время отклика сервера
Минимизируйте и сжимайте текстовые ресурсы, чтобы ускорить их загрузку
- Это можно сделать с помощью такого плагина, как WP Rocket.
Устранение Javascript, блокирующего рендеринг, и снижение нагрузки на JavaScript

Для получения дополнительной информации см. Первую содержательную раскраску в справочных материалах Google.

Индекс скорости

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

Индекс повышения скорости

Оптимизировать изображения
Код минимизировать
- Уменьшение количества и размера файлов на вашем веб-сайте приведет к уменьшению общего веса страницы. Снижение веса страницы улучшит время загрузки для всех устройств и сетей. Минификация может быть достигнута с помощью различных плагинов, таких как WP Rocket.
Используйте кеширование
Используйте CDN
- CDN может географически размещать более крупные активы ближе к людям, загружающим контент вашего сайта.Это увеличивает скорость загрузки страниц за счет снижения нагрузки на устройство и сеть конечных пользователей. Узнайте, как включить CDN для WordPress.
Оптимизация базы данных
Практикуйте ответственное управление плагинами и темами
- Удалите неиспользуемые плагины и темы.
  - Избыточный код по-прежнему может быть вызван и загружен на страницу, даже если плагин или тема неактивны. Полностью удалите все элементы, которые веб-сайт не использует активно.
- Регулярно обновляйте плагины и темы.
  - Для автоматического управления обновлениями подключаемых модулей, включая тестирование и восстановление после обновления, попробуйте Smart Plugin Manager.
Ограничение внешних сценариев
- Внешние сценарии являются частой причиной медленной загрузки веб-сайта, поскольку ресурсы размещаются на внешнем сервере и не могут быть оптимизированы или управляться с одного и того же веб-сайта. Ограничьте использование загружаемых извне скриптов, таких как шрифты, системы комментариев, iFrames или рекламные сервисы.
Используйте облегченную тему
- Ваша тема и платформа могут иметь большое влияние на производительность, поскольку ресурсы загружаются на каждой странице.По мере развития языков разработки (например, с новыми версиями PHP) тема будет становиться все менее и менее эффективной. Фреймворк Genesis и темы Studiopress включены во все планы хостинга WP Engine и предварительно настроены для оптимальной SEO и производительности сайта. 4 простых шага для начала работы с Genesis и StudioPress.

Время до взаимодействия

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

Этот показатель обычно высок на сайтах, использующих большое количество Javascript. Следовательно, чтобы улучшить эту метрику, неэффективный код, скорее всего, придется переписать или иным образом заменить. Мы рекомендуем разрабатывать код по методике «от простоя до срочности», чтобы повысить производительность в этой области.

Дополнительную информацию см. В разделе «Время интерактивности» в справочной информации Google

СЛЕДУЮЩИЙ ШАГ: Использование инструмента производительности страницы WP Engine

Google PageSpeed Insights vs.Расширение Web Vitals для повышения производительности

Сообщение обновлено 28 января 2021 года

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

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

Скорость выставления оценок с помощью Google PageSpeed Insights

В течение многих лет Google PageSpeed Insights — это инструмент, который Google был основным предложением поисковой системы, чтобы вы могли понять, как сайт работает в их глазах. Со временем инструмент постепенно улучшался, чтобы предлагать больше и метрики, но он всегда сводился к оценке выполнения от 0 до 100.Он будет соотносить цвет красного, желтого или зеленого в зависимости от того, считал ли он эту оценку неудовлетворительной, хорошей или феноменальной.

Со временем Google начал включать дополнительный контекст об оценке и сообщать о проблемах, которые, по его мнению, влияли на вашу оценку. Прозрачность помогла разработчикам и маркетологам знать, где можно улучшить свой сайт; в разделе «Диагностика» инструмента можно было бы разбить такие вещи, как запросы, ресурсы, блокирующие рендеринг, были ли минимизированы CSS и JavaScript и т.Это была памятка, которая поможет вам быстро выявить и исправить проблемы с производительностью на сайте.

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

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

Чтобы решить эту проблему, Google недавно выпустил Core Web Vitals, инструмент, который предоставляет подробную информацию о реальной скорости и удобстве использования вашего сайта. Мы выступаем за использование CWV в качестве дорожной карты для улучшения вашего рейтинга, и он может пролить свет на то, что вам нужно обновить, чтобы сделать небольшой, но важный скачок с 89 до 95.

Об измерениях в Google Core Web Vitals

Мы собираемся изучить факторы, влияющие на Core Web Vitals Google, и объяснить, как использовать эти измерения для эффективного тестирования вашего веб-сайта. Хотя мы подробно рассмотрим, что может препятствовать пользовательскому опыту, оценке и ранжированию, имейте в виду, что сообщение не является исчерпывающим и может пропускать некоторые элементы, которые мы считаем заданными. за каждую новую сборку. Тем не менее, не стесняйтесь обращаться к нам с любыми вопросами о вашей конкретной ситуации.

Web Vitals — это четыре новых показателя, которые Google использует для оценки скорости определенного URL. Прежде чем углубляться в сами измерения, важно отметить, что на каждое из них будут влиять реальные обстоятельства, в которых тестируется веб-сайт. Например, сайт, протестированный на быстром ноутбуке с широкополосным доступом в Интернет, получит другие оценки, чем сайт, протестированный на старом сотовом телефоне с 3G-Интернетом. При этом очень важно учитывать тот факт, что любые данные формируются как производительностью сайта, так и возможностями устройства.

Переходим к хорошему. Для начала познакомимся с четырьмя измерениями, составляющими показатель Web Vitals Score:

FCP — Первая полноценная краска
LCP — Краска с наибольшим содержанием
FID — Задержка первого входа
CLS — Кумулятивная смена компоновки

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

Также стоит отметить, что вся эта запись игнорирует производительность на стороне сервера. Считается само собой разумеющимся, что ваш веб-сервер быстро предоставит HTML-ответ на запрос URL. Это самое первое, что ДОЛЖНО происходить при каждом просмотре страницы, и если оно не будет быстрым, каждое выполненное измерение будет плохим.

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

Первая полноценная краска

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

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

В общем, этот результат может поддерживаться вещами, блокирующими рендеринг, включая таблицы стилей и скрипты.Каждый раз, когда ссылка на таблицу стилей добавляется в HTML, отрисовка блокируется до тех пор, пока этот ресурс не будет полностью загружен и проанализирован. То же самое обычно и со сценариями, хотя они могут быть добавлены с атрибутами defer или async. Эти параметры по умолчанию недоступны для стилей, хотя существуют приемы, например использование атрибута media в сочетании с событием onload.

Оценка

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

Краска с наибольшим содержанием

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

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

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

Задержка первого входа

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

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

Отрисовка сложных стилей
Анализ активов
Отображение видео / графики
Запуск кучи javascript
Наиболее частой причиной FID является чрезмерно сложный JS от третьих лиц, таких как трекеры и рекламодатели. Но это также может быть вызвано скриптами и библиотеками, используемыми на самом сайте.

Чтобы уменьшить FID, лучше всего уменьшить количество JS, выполняемых на данной странице.Затем, в отношении оставшегося JS, отложите любой JS, который не критичен для взаимодействия с пользователем. Если можете, подождите, пока загрузится этот некритический Javascript, до завершения события window.load. На многих сайтах это имеет смысл даже для аналитики!

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

Важно понимать, в какой степени FID влияет на производительность устройства. Это восходит к нашему сравнению быстрого ноутбука и старого сотового телефона. Для оценки FID используется время, а не «количество скриптов». Современный компьютер может обрабатывать БОЛЬШОЙ объем вычислений за очень короткий период времени, а старый телефон — нет. Таким образом, даже если вы видите отличную оценку FID на ноутбуке, это может не иметь большого значения в реальном мире, когда ваш сайт посещают различные устройства.Еще хуже то, что когда сайт работает медленно, он имеет тенденцию к снежному кому.

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

Совокупный сдвиг макета

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

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

Теперь, когда измеряется CLS, выяснилось, что это своего рода «ловушка» даже для сайтов, которые пытаются поступать правильно. Как? Многие разработчики используют инструмент PageSpeed Insights для проверки производительности сайта. Это нормально, но дает оценку моментального снимка только во время первоначального рендеринга. Это означает, что ленивая загрузка изображений — которые невидимы для инструмента, потому что они загружаются позже — не позволяет разработчикам осознавать, что смещение макета произойдет при полной загрузке изображений.

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

Использование показателей Web Vitals для создания более быстрых веб-сайтов

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

Фактические данные поля, которые Google имеет для данной страницы.
Лабораторные данные из Google PageSpeed Insights
Лабораторные данные из расширения Web Vitals

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

Ниже мы подробнее рассмотрим каждый из трех источников данных.

Полевые данные

Есть несколько способов получить доступ к полевым данным Google, которые подробно описаны в этом сообщении в блоге.Однако самый простой способ — поискать в консоли поиска Google в разделе «Улучшения»> «Основные веб-ресурсы» или в отчете PageSpeed Insights в разделе «Полевые данные». PageSpeed Insights обычно показывает агрегированные данные полей для проверяемого домена, и, если проверяемый URL достаточно популярен, также отображаются данные полей для конкретного URL.

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

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

Лабораторные данные из инструмента PageSpeed Insights

PSI — замечательный инструмент, который позволяет быстро проверить производительность заданного URL-адреса на имитируемом мобильном или настольном устройстве. На момент написания смоделированным мобильным устройством был очень старый Motorola G4 с медленным соединением. Если на вашей странице есть проблема, PageSpeed Insights почти наверняка ее покажет.

Помимо оценок, он также показывает предложения.Теперь он даже показывает предложения, привязанные к определенным показателям Web Vital. Например, если есть большое неоптимизированное изображение, которое появляется над сгибом при загрузке страницы, оно, скорее всего, укажет это изображение как проблему в разделе «Первая отрисовка содержимого».

При анализе предложений следует помнить, что любой «пройденный» аудит по умолчанию скрыт. Хотя это помогает уменьшить беспорядок, иногда при этом скрывается важная информация. Нередко определенный URL-адрес имеет плохой FID при прохождении всех аудитов.В таком случае стоит покопаться, чтобы узнать, сколько из них едва прошло. Все может начать складываться.

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

Лабораторные данные из расширения Web Vitals

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

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

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

Заключение

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

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

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

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

Метрики в Google Analytics

Google Analytics — хорошее место для начала для новичков. Если вы никогда раньше не отслеживали скорость своего сайта, вы можете следить за этими показателями, чтобы получить представление о взлетах и падениях производительности вашего сайта. Вы можете найти эти данные по пути Google Analytics: Поведение> Скорость сайта> Обзор.

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

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

Время загрузки страниц

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

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

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

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

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

Google PageSpeed Insights

Если Google Analytics сообщает вам, когда что-то не так со скоростью вашей страницы, то Google PageSpeed Insights предоставляет контекст, в котором части вашего веб-сайта испытывают трудности.Этот инструмент дает вам общую оценку (от 0 до 100, где 100 — лучший результат) как для мобильных, так и для настольных страниц. Затем он разбивает вашу производительность на различные показатели и предоставляет возможности и диагностику для максимального изменения.

Например, вот результаты анализа веб-сайта Trinity Insight:

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

Первая отрисовка (содержательная и значимая)

Первая отрисовка (FP) относится к первой отрисовке чего-либо в вашем браузере.Часто это изображение заголовка или просто цвет фона на странице. FP — метрика тщеславия. Эти фоны и цвета могут срабатывать немедленно, заставляя вас думать, что ваша скорость высока. Однако ваш пользователь все еще сидит и ждет, пока ваша страница действительно загрузится. Улучшение FP может иметь номинальное влияние на ваш показатель отказов, но ничего существенного.

Если вы немного углубитесь в метрики FP, вы обнаружите FCP или First Contentful Paint . Это относится к первому жизнеспособному контенту на вашем веб-сайте (в виде текста, изображений и т. Д.). По сути, FCP — это первый раз, когда появляется что-то, что ваша аудитория может действительно использовать или получить информацию.

Однако есть дополнительный уровень выше этого. First Meaningful Paint (FMP) был придуман Google и означает время, необходимое для загрузки основного контента на страницу, или время, необходимое для загрузки контента, который пользователи пришли на ваш сайт, чтобы увидеть. Независимо от того, насколько впечатляющим является ваш веб-сайт, никто не пришел на него только для того, чтобы увидеть ваш фон и панель инструментов навигации.Вот почему FCP и FMP разделены, но расположены рядом друг с другом в Pagespeed Insights от Google.

Speed Index

Google определяет Speed Index как «насколько быстро содержимое страницы заполняется визуально». Поисковый гигант призывает пользователей оптимизировать свои страницы, чтобы они загружались быстрее. Это включает использование менее объемных изображений и упрощение кода. Как и в случае с другими показателями в этом списке, чем меньше число, тем лучше.

Время до взаимодействия

Показатель Время до взаимодействия (TTI) выводит FCP и FMP на новый уровень.Google определяет интерактивность в три этапа:

На странице отображается полезный контент (прошел FCP).
Обработчики событий зарегистрированы для наиболее видимых элементов страницы.
Страница реагирует на действия пользователя в течение 50 миллисекунд.

Это означает, что ваш пользователь может без проблем перемещаться по вашей странице и отображаемой информации. Ранее он назывался «Последовательно интерактивный». Например, если алкогольный бренд загружает на свой сайт форму контроля, чтобы указать дату своего рождения и подтвердить, что вам больше 21 года, TTI — это сумма, необходимая для того, чтобы вы могли щелкнуть по полям и отправить информацию.

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

Первый режим ожидания ЦП

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

Подобно FP по сравнению с FCP, первый режим ожидания ЦП обычно выполняется быстрее, чем TTI.

Макс. Потенциальная задержка первого ввода

Задержка первого ввода (FID) относится к времени с момента первого взаимодействия пользователя с вашим веб-сайтом до момента, когда браузер может ответить на реакцию.

Например, если вы нажимаете ссылку в Facebook или Google, вы просто сидите и ждете загрузки страницы? Это связано с тем, что браузер слишком занят (обычно обрабатывает другие элементы вашего приложения), чтобы загрузить страницу.

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

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

Дополнительные точки данных, которые имеют значение

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

Время до первого байта

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

Количество HTTP-запросов

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

Чем меньше HTTP-запросов, тем быстрее ваша страница сможет полностью загрузиться, улучшая такие показатели, как ваш FMP, TTI и FID.

Повысьте скорость страницы с помощью Trinity Insight

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

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

Как скорость страницы влияет на SEO и рейтинг Google

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

Но как на самом деле работает этот инструмент PageSpeed Insights от Google? И, что более важно, влияет ли скорость страницы на SEO ? В этой статье вы найдете все, что вам нужно знать.

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

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

Что такое Google PageSpeed Insights?
1. Mobile vs.Рабочий стол
2. Что такое скорость страницы на самом деле?
Влияет ли PageSpeed Insights на SEO? Важна ли оценка 100/100?
Показатели PageSpeed Insights
1. Полевые и лабораторные данные (показатели производительности)
2. Возможности и диагностика
Как рассчитывается показатель PageSpeed Insights?
Ключевые моменты повышения рейтинга PageSpeed Insights
1. Время ответа сервера
2. Сжатие изображения
3. Структура HTML и CSS
4. Минификация и сжатие скриптов
5. Политика кэширования
6. Легкая тема и плагины
Как массово проверить рейтинг PageSpeed Insights
Другие инструменты для измерения и повышения скорости загрузки сайта
1. Пингдом
2. GT-Metrix
3. mod_pagespeed
4. Google AMP (ускоренные мобильные страницы)

Что такое Google PageSpeed Insights?

PageSpeed Insights — это онлайн-инструмент, предоставляемый Google, который используется для выявления проблем веб-производительности на сайтах.Хотя эти инструменты в основном связаны с техническими проблемами SEO , они также анализируют сайт с точки зрения взаимодействия с пользователем и доступности.

Вы можете получить доступ к PageSpeed Insights, посетив https://developers.google.com/speed/pagespeed/insights/.

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

Однако это не единственный инструмент PageSpeed, предоставляемый Google. Также есть mod_pagespeed, серверный модуль, используемый для решения этих проблем со скоростью, и полноценный Lighthouse (инструмент анализа сайта, который поддерживает все), доступный в самом Chrome. Существует также ряд расширений Chrome, связанных с Google PageSpeed Insights.

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

Мобильные и настольные

Когда вы вставляете страницу для ее тестирования, Google выставляет две оценки: одну для мобильной версии и одну для настольной версии.

Изначально PageSpeed Tool дал только один балл для настольной версии. Но в последнее время использование мобильных устройств становится все более популярным. По состоянию на 2018 год более 50% пользователей поисковых систем выполняют поиск с мобильных устройств. Поскольку Google перешел на индекс для мобильных устройств, также имело смысл сначала протестировать мобильные версии на скорость.

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

Если да, то почему у них разные оценки?

Mobile: Когда вы используете инструмент PageSpeed Insights, первый результат, который вы получите, — это скорость мобильной связи. Это означает, что ваш веб-сайт был протестирован с использованием мобильного подключения, вероятно, с подключением 4G, так как это, по крайней мере, самая распространенная скорость в США.

https://www.uscellular.com/coverage-map/voice-and-data-maps.html

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

И вот в чем проблема. Дело не всегда в вашем сайте, дело в скорости соединения. Может показаться, что ваш сайт работает медленно, хотя на самом деле скорость соединения низкая.

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

Итак, веб-сайт проходит такое же тестирование, но отличается в основном скоростью соединения.

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

Что такое скорость страницы?

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

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

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

Однако мы можем работать только с тем, что умеем работать, а именно с нашим веб-сайтом и нашим сервером. Все остальное мы действительно не контролируем.

Попросту говоря, скорость страницы — это не показатель, как в PageSpeed Insights. Это время загрузки веб-страницы, которое измеряется в секундах. Вот что важно.

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

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

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

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

Например, предположим, что вы хотите запустить всплывающий скрипт с намерением выхода. Для загрузки этого сценария требуется примерно 5–10 секунд. Однако вы хотите показать его пользователю только через 20-30 секунд.

Если вы начнете запускать свой скрипт немедленно, вы можете отложить загрузку других важных элементов, таких как первое, что должен увидеть пользователь: содержимое над сгибом.Это было бы очень плохо, тем более, что вы не собираетесь использовать этот скрипт примерно через 20-30 секунд в будущем.

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

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

Влияет ли скорость страницы на SEO? Важна ли оценка 100/100 Insights?

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

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

Вы должны помнить, что скорость измеряется в секундах, а не в точках от 0 до 100. Хотя PageSpeed Insights — это инструмент, который помогает вам повысить скорость, результат не обязательно что-то значит в реальном мире.

Тем не менее, важно улучшить показатель скорости страницы.

Почему?

Потому что с Google мы не знаем наверняка, используется ли оценка в качестве фактора ранжирования. Гугл использует секунды? Использует ли он счет? Кто знает…

Тем не менее, я встречал сайты с идеальной скоростью страницы, которые имеют низкий рейтинг, а сайты с рейтингом ниже 50 — очень хорошо (#youtube).

Однако вы должны принять во внимание, как Google проводит эти тесты.Мы не знаем, откуда проводятся тесты. Ваш сервер из Румынии и Google тестирует его с подключением 3G в США? Что ж, вы, очевидно, можете ожидать низких скоростей.

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

Иногда Google противоречит сам себе!

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

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

Кроме того, вы не сможете правильно кэшировать скрипт, если не сохраните аналитику.js на вашем сервере. Очевидно, что Google Analytics не рекомендует этого. Это также ад для обслуживания, поскольку каждый раз, когда файл JavaScript Google Analytics получает обновление, вам также придется обновлять его на своем сайте.

Это, конечно, происходит не только с инструментами и скриптами Google, но и с любыми сторонними скриптами, которые вы не контролируете.

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

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

Вы также можете протестировать свой сайт с помощью https://www.thinkwithgoogle.com/intl/en-gb/feature/testmysite/, чтобы получить более простое объяснение того, насколько быстро ваш сайт загружается!

Сайт BrandMentions, другой нашей компании, загружается менее чем за 2 секунды при подключении к сети 4G, как вы можете видеть выше.Нам бы это понравилось. Конечно, всегда есть возможности для улучшения. По стандартам Google… это средний показатель.

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

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

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

Показатели PageSpeed Insights

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

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

Полевые и лабораторные данные

Это новые действительно полезные метрики. Они разделены на две категории: полевые и лабораторные данные.

Полевые данные — это то, что важно в реальном мире, поскольку это данные, полученные Google от реальных пользователей через Chrome или других поставщиков данных.

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

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

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

Лабораторные данные — это то, что на самом деле генерирует оценку скорости страницы Google.

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

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

Как видите, страница отрисована не полностью, что-то там отображалось.

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

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

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

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

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

Возможности и диагностика

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

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

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

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

Чем больше у вас будет в этом списке, тем лучше!

Как рассчитывается показатель PageSpeed Insights?

Хотя вы можете увидеть очень много вещей в PageSpeed Insights Tool, на самом деле оценка рассчитывается только с использованием секунд в разделе лабораторных данных.Если вы внимательно прочитаете, вы действительно сможете увидеть сообщение «Эти показатели не влияют напрямую на оценку производительности». в разделе «Возможности и диагностика».

Метрики в лабораторных данных называются метриками производительности. Всего их 6, и мы представили их выше. Каждой метрике присваивается оценка от 0 до 100. У каждой метрики свой вес при вычислении оценки.

3 — Первая содержательная отрисовка
1 — Первая значимая отрисовка
2 — Первый процессор простаивает
5 — Время до интерактивности
4 — Индекс скорости
0 — Расчетная задержка ввода

В порядке важности они перечислены следующим образом: «Время до взаимодействия», «Индекс скорости», «Первая отрисовка содержимого», «Первая простоя ЦП», «Первая значимая отрисовка» и «Расчетная задержка ввода», которые фактически не влияют на оценку.

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

Google также разместил файл Sheet, который вы можете использовать, чтобы увидеть, как на самом деле генерируется оценка. Если вы знаете функции Excel, вы можете перепроектировать, как все работает. Вы можете скачать этот файл здесь, но вы должны сделать свою копию (Файл -> Сделать свою копию), прежде чем сможете редактировать ее.Также есть версия для Lighthouse v5.

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

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

В конечном итоге оценки делятся на 3 категории: Низкий (0-49), Средний (50-89) и Хороший (90-100).Затем выдается среднее значение в качестве окончательной оценки вашего веб-сайта.

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

Ключевые моменты повышения оценки PageSpeed Insights

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

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

Время ответа сервера

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

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

Что ж, любая хостинговая компания, которая занимает хорошие позиции в Google, должна предоставлять достойные услуги. Однако вам решать. Лучший совет? Если вы в основном ориентируетесь на локальное SEO, выберите локальный сервер.Например, если большая часть вашей аудитории проживает в Италии, выберите сервер с центром обработки данных в Италии.

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

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

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

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

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

Сжатие изображения

В общем, изображения — самая большая проблема на веб-сайтах. Они большие, и их нужно много загружать.

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

Размер диска: Чем больше физического места занимает образ на жестком диске или SSD, тем больше потребуется для загрузки.100 КБ будут загружены намного быстрее, чем 1000 КБ (1 МБ). Если в вашем сообщении в блоге есть 10 таких изображений, ожидайте, что ваш сайт будет загружаться очень медленно.

Вы можете использовать WP Smush для оптимизации ваших изображений. Это плагин, который сжимает изображения без потери качества. Это означает, что вы можете уменьшить изображение размером 1000 × 1000 пикселей с 200 КБ до 150 КБ, не замечая разницы в качестве, поэтому оно загружается на 25% быстрее.

Размер экрана: Размер экрана — это размер, при котором отображается изображение.Например, изображение ниже отображается с разрешением 300 × 300 пикселей.

Чтобы изображения загружались быстрее, сначала нужно убедиться, что вы не используете изображение больше, чем оно будет отображаться. Например, если у вас есть раздел HTML, стилизованный с помощью CSS размером 300 × 300 пикселей, но вы загружаете изображение размером 1000 × 1000 пикселей в источник, вы теряете время загрузки для этих 700 × 700 пикселей.

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

WordPress делает это автоматически, создавая несколько экземпляров изображения при его загрузке. Вот почему вы увидите суффикс 300 × 300 или 150 × 150 в конце пути к файлу изображения. Вот почему вы можете выбирать размеры (большой, средний, эскиз). Хотя это не идеально, особенно если вы вручную изменяете размер изображения с помощью щелчка и перетаскивания, и в долгосрочной перспективе оно занимает больше места на вашем сервере, это действительно помогает увеличить скорость загрузки.

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

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

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

Конечно, есть плагины для других CMS, таких как Joomla или Magento. Просто выполните поиск в Google. Если вы не пользуетесь популярной CMS, такой как WordPress, отсрочку изображений можно выполнить с помощью jQuery, но вам наверняка понадобится разработчик для этого, если вы не один из них.

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

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

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

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

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

Структура HTML и CSS

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

Обычно проблемы не в HTML, а в CSS. Если вы напишете свой CSS хаотично, это приведет к более медленному времени загрузки и плохому взаимодействию с пользователем.

Возьмем пример. Большинство веб-сайтов, если не все, следуют этой структуре HTML: голова> тело> нижний колонтитул.

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

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

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

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

Минификация и сжатие скриптов

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

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

cssminifier.com

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

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

body { font-size: 16px; } нижний колонтитул { font-size: 16px; }

Я мог бы написать:

body, footer { font-size: 16px; }

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

Так, например, если у меня есть следующий код: 123 4 123 123 123 4 123 123, я мог бы заменить 123 на 1 и получить сжатую версию, подобную этой: 1 4 1 1 1 4 1 1. Конечно, это намного сложнее, чем то, что я представил.

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

Работает почти так же, как WinRAR; мы, наверное, все это знаем, потому что с незапамятных времен используем его бесплатно!

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

Помните, что сжатие зависит от настройки сервера. Если ваш сервер не поддерживает Gzip, вы не сможете сжимать файлы.Если у вас есть сервер Apache, убедитесь, что у вас установлен mod_deflate.

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

Если вы не пользуетесь популярной CMS, вы также можете включить сжатие Gzip через файл .htaccess (серверы Apache), добавив следующий код, если установлен mod_deflate.

& lt; IfModule mod_deflate . c & gt;
# Сжимайте HTML, CSS, JavaScript, текст, XML и шрифты
AddOutputFilterByType DEFLATE приложение / javascript
AddOutputFilterByType DEFLATE application / rss + xml
AddOutputFilterByType DEFLATE application / vnd . ms — fontobject
AddOutputFilterByType DEFLATE application / x — font
AddOutputFilterByType DEFLATE application / x — font — opentype
AddOutputFilterByType DEFLATE application / x — font — otf
AddOutputFilterByType DEFLATE application / x — font — truetype
AddOutputFilterByType DEFLATE application / x — font — ttf
AddOutputFilterByType DEFLATE application / x — javascript
AddOutputFilterByType DEFLATE application / xhtml + xml
AddOutputFilterByType DEFLATE application / xml
AddOutputFilterByType DEFLATE font / opentype
AddOutputFilterByType DEFLATE font / otf
AddOutputFilterByType DEFLATE font / ttf
AddOutputFilterByType DEFLATE изображение / svg + xml
AddOutputFilterByType DEFLATE изображение / x — значок
AddOutputFilterByType DEFLATE текст / css
AddOutputFilterByType DEFLATE текст / html
AddOutputFilterByType DEFLATE текст / javascript
AddOutputFilterByType DEFLATE текст / простой
AddOutputFilterByType DEFLATE текст / xml
# Удаляем ошибки браузера (требуется только для действительно старых браузеров)
BrowserMatch ^Mozilla/ 4 gzip — только — текст / < / span> html
BrowserMatch ^Mozilla/ 4 \ .0[678 ] нет — gzip
BrowserMatch \ bMSIE ! нет — gzip ! gzip — только — текст / html
Добавление заголовка Варьируется Пользователь — Агент
< / IfModule & gt;

140002

& lt; IfModule mod_deflate . c & gt;

# Сжимать HTML, CSS, JavaScript, текст, XML и шрифты

AddOutputFilterByType DEFLATE application / javascript

AddOutputFilterByType DEFLATE application / rss + xml

AddOutputFilterByType DEFLATE application < диапазон> / vnd . ms — fontobject

AddOutputFilterByType DEFLATE application / x — font

AddOutputFilterByType DEFLATE application / x — font — opentype

AddOutputFilterByType DEFLATE application / < / span> x — font — otf

AddOutputFilterByType DEFLATE application / x — font — truetype

AddOutputFilterByType DEFLATE application / x — font — ttf

AddOutputFilterByType DEFLATE application / x — javascript

AddOutputFilterByType DEFLATE application / xhtml + xml

AddOutputFilterByType DEFLATE application / xml

AddOutputFilterByType DEFLATE font / opentype

AddOutputFilterByType DEFLATE font / otf

AddOutputFilterByType DEFLATE font / ttf

Добавить > DEFLATE image / svg + xml

AddOutputFilterByType DEFLATE image / x — icon

AddOutputFilterByType DEFLATE текст / css

AddOutputFilterByType DEFLATE текст / html

DEFLATE text / javascript

AddOutputFilterByType DEFLATE text / plain

AddOutputFilterByType DEFLATE text / xml

# Удаление ошибок браузера (требуется только для действительно старых браузеров)

BrowserMatch ^ Mozilla / < / span> 4 gzip — только — текст / html

BrowserMatch ^Mozilla/ 4 \ .0[678 ] нет — gzip

BrowserMatch \ bMSIE ! нет — gzip ! gzip — только — text / html

Добавлять заголовок Варьируется Пользователь — Агент

< / IfModule & gt;

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

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

Политика кэширования

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

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

Динамические элементы (политика краткого кеширования): Динамические элементы — это элементы на вашем веб-сайте, которые часто меняются.Например, вы можете продолжать добавлять новые сообщения в слайдере на главной странице.

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

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

Статические ресурсы (политика длительного кеширования): Статические ресурсы — это файлы, которые редко изменяются.Обычно это изображения и файлы CSS или JS, но они также могут быть аудиофайлами, видеофайлами и т. Д.

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

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

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

Плагины кеширования: Существует множество плагинов, которые будут правильно обрабатывать протоколы кеширования, необходимые для удобного взаимодействия с пользователем. Если вы используете WordPress, одним из этих плагинов является W3 Total Cache.Однако, если вы хотите выбрать лучший вариант, WP Rocket также довольно популярен, но он обойдется вам в пару сотен долларов.

Просто поищите плагин / расширение / модуль кеша + ваша платформа в Google, чтобы найти то, что вам нужно. Посмотрите обзоры, чтобы выбрать лучший.

кеш файла .htaccess: Вы также можете установить заголовок управления кешем из файла .htaccess на сервере Apache, если вы не запускаете свой веб-сайт на популярной CMS.

Есть несколько способов:

## EXPIRES CACHING ## ExpiresActive On ExpiresByType image / jpg "доступ на 1 год" ExpiresByType image / jpeg "доступ 1 год" ExpiresByType image / доступ 1 год image / png "доступ 1 год" ExpiresByType text / css "доступ 1 месяц" ExpiresByType text / html "доступ 1 час" Приложение ExpiresByType / pdf "доступ 1 месяц" ExpiresByType text / x-javascript "доступ 1 месяц" ExpiresByType application / x-shockwave-flash "access 1 month" ExpiresByType image / x-icon "access 1 year" ExpiresDefault "access 1 month" ## EXPIRES CACHING ##

Или вы также можете использовать этот код:

# Один год для файлов изображений Набор заголовков Cache-Control" max-age = 31536000, общедоступный "

# Один месяц для css и js Заголовочный набор Cache-Control "max-age = 2628000, общедоступный"

Числа в атрибуте max-age указаны в секундах, поэтому 3600 будет означать один час, 86400 — один день и так далее.

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

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

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

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

Облегченная тема и плагины

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

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

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

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

Хорошая тема, которую я рекомендую, — это GeneratePress. Он легкий и загружается очень быстро. Вы можете включать или отключать элементы, чтобы ваш сайт оставался максимально чистым.

Сочетание его с плагином оптимизации, таким как WP Rocket (платный), или комбинацией бесплатных плагинов, таких как Autoptimize + Fastest Cache, сделает его невероятно быстрым! Вы также можете использовать W3 Total Cache, плагин, который очень хорошо выполняет почти все перечисленное выше.

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

Как массово проверить рейтинг PageSpeed Insights

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

Однако есть способ массовой проверки PageSpeed Insights Score. Вы уже догадались?

Это CognitiveSEO Tool Site Audit . После того, как вы настроили технический SEO-анализ с помощью аудита сайта, перейдите в свою кампанию -> Аудит сайта -> Производительность -> PageSpeed.

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

Существует также несколько бесплатная альтернатива — расширение Chrome. Однако на самом деле он запросит список URL-адресов, а затем просто откроет их как новые вкладки в онлайн-инструменте PageSpeed Insights.

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

Другие инструменты SEO для измерения и повышения скорости сайта

Конечно, инструмент Google PageSpeed Insights — не единственный инструмент для проверки и повышения скорости страницы. На этот раз мы действительно не знаем, откуда проводятся тесты. Если ваш сайт размещен на сервере в Европе, а Google проводит тесты в США, естественно, что этот сайт будет работать медленнее.

Однако есть инструменты, которые указывают, откуда выполняется тест.

Pingdom

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

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

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

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

Вы можете найти и другие инструменты, похожие на Pingdom.

GT-Metrix

GT Metrix был одним из моих любимых инструментов для тестирования скорости.Хотя он тестируется только из Ванкувера, Канада, он дает очень полезную информацию.

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

mod_pagespeed

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

Однако установка mod_pagespeed определенно более техническая, чем просто работа со всем в WordPress.

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

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

Google AMP (ускоренные мобильные страницы)

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

Google AMP или ускоренные мобильные страницы — это особый тип HTML, в котором отсутствуют тяжелые и медленные элементы загрузки.

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

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

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

В WordPress и других CMS вы можете добавить AMP на свой сайт через плагин. Для пользовательских веб-сайтов вам нужно будет связаться со своим разработчиком и дать ему эту ссылку.

Заключение

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

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

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

Каков ваш показатель PageSpeed Insights? Видели ли вы более высокие позиции в рейтинге после увеличения скорости загрузки вашего сайта? Поделитесь с нами своим опытом в разделе комментариев ниже!

Как решать проблемы, отмеченные в Google PageSpeed Insights и других советах — Fuel Made

«Алекса, какая погода на улице?»

«Привет, Google, где ближайший итальянский ресторан?»

«Привет, Siri! Как долго я доберусь до ближайшего аэропорта? »

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

А реальная цена.

Не секрет, что скорость сайта влияет на коэффициент конверсии — задержка скорости загрузки страницы в 1 секунду может снизить конверсию на 7%. Но это гораздо глубже, чем просто продажи: скорость работы сайта влияет на качество обслуживания клиентов, SEO и покупательское поведение.

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

Итак … насколько быстро «быстро»?

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

Джон Мюллер, старший аналитик тенденций для веб-мастеров в Google, признал, что сайты должны стремиться к загрузке от 2 до 3 секунд.Пользователи подтверждают это: более половины ожидают, что страница будет загружена в течение этого периода времени, а количество посетителей начинает резко снижаться после этого.

Продавцы слышат это громко и ясно: в период с Черной пятницы 2017 года по 3 января ведущие веб-сайты розничной торговли в западном мире и Китае были готовы к использованию за 2,5 секунды для потребителей, совершающих покупки в Интернете.

Эффект просачивания

Не только быстрый веб-сайт влияет на конверсию, но и скорость влияет на то, как посетителей могут найти вас: как органически, так и с помощью платного трафика.

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

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

Это означает потерю дохода — 53% посетителей мобильного сайта покидают страницу, загрузка которой занимает более трех секунд.

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

Итак, скорость сайта оказывает влияние на всех ваших усилий.

Как увеличить скорость страницы?

Сначала начнем с теста.

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

Одним из наиболее популярных инструментов, на которые опираются продавцы для тестирования скорости сайта, является Google Pagespeed Insights.

Когда вы запустите свой веб-сайт с помощью инструмента, вы увидите две оценки:

Скорость вашего сайта: хорошая, средняя или низкая

Оптимизация

: оценка хорошо, средняя или низкая, а также оценка из 100.

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

Ниже вы увидите список рекомендаций Google по увеличению времени загрузки.

Правда о Google PageSpeed Insights

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

Вашему интернет-магазину могут потребоваться определенные функции, для которых требуются сторонние приложения или файлы большого размера, что делает предложения Google менее актуальными и / или…
Вы можете не контролировать рекомендации, которые они дают (что определенно может произойти, если ваш веб-сайт находится на размещенной платформе, такой как Shopify).

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

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

Другими словами, Google PageSpeed Insights не учитывает пользовательский опыт, поскольку он связан со временем загрузки веб-сайта.

В любом случае, вы можете быть немного ошеломлены проблемами, которые отмечает . Такие слова, как «Устранение блокировки рендеринга» или «Использование кеширования браузера» могут звучать как другой язык, и вы не одиноки.

Так что давайте переведем?

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

«Устраните блокирующие отображение JavaScript и CSS в верхней части страницы»

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

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

Это может быть сложно реализовать, и это должен делать кто-то с продвинутыми навыками CSS и JavaScript, особенно если ваш магазин живет на Shopify.

«Использование кеширования браузера»

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

Когда вы видите это сообщение в Google Pagespeed Insights, это обычно означает, что сервер не принимает заголовки управления кешем (именно эти заголовки позволяют браузеру / серверу знать, обслуживать ли локально кэшированный файл или загружать новый файл) . Или это означает, что активы указаны для кэширования на короткий промежуток времени.

Если ваш магазин существует на Shopify, эта проблема не может быть решена.Поскольку это размещенная платформа, у вас нет никакого контроля над сервером, поэтому, к сожалению, вы не можете вносить изменения такого типа.

«Сократить активы»

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

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

Если вы используете Shopify, платформа не минимизирует какие-либо активы, но минимизирует файлы SCSS, которые обрабатывает, . Поэтому, если вы хотите, чтобы все ваши ресурсы были минимизированы, вам понадобится помощь разработчика.

Чтобы получить максимальную отдачу от минификации, вы можете снять обязанности по обработке SCSS с Shopify и развернуть свои процессы сборки JavaScript и CSS с такими вещами, как Webpack, PostCSS, cssnano и Purgecss.

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

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

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

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

Другой вариант — обработать изображения и передать их через CDN (сеть доставки контента), используя такие веб-сайты, как Kraken.io или Imigix. Этот подход оптимизирует, доставляет и кэширует всю вашу библиотеку изображений, поэтому вам не нужно повторно загружать сжатые изображения.

Beyond PageSpeed Insights

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

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

GTMetrix: этот инструмент объединяет Pagespeed Insights и Yslow для получения одной совокупной оценки — от A до F.Он также предоставляет подробный отчет о производительности, в котором рассматриваются ключевые проблемы.

Webpagetest: Наш фаворит! Обладая целым набором расширенных функций, этот инструмент может предложить отличное представление о скорости вашего сайта. У него есть удобный «водопадный» анализ, который все тщательно разбивает.
Pingdom: это еще один расширенный тест, который мы рекомендуем.С помощью Pingdom вы можете выбрать расположение сервера, с которого хотите провести тестирование, что, как упоминалось выше, действительно влияет на результаты тестирования.

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

Также неплохо протестировать своих конкурентов, чтобы увидеть, что не так с производительностью их сайтов.Как сказал Гарри Шам, компьютерный ученый из Microsoft: двести пятьдесят миллисекунд, быстрее или медленнее, близко к магическому числу для конкурентного преимущества в Интернете.

Самостоятельные методы повышения скорости загрузки сайта

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

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

Удалите ненужные сторонние приложения: Поскольку многие сайты электронной торговли полагаются на сторонние приложения, лучше всего удалить те, которые не являются абсолютно необходимыми.
Попробуйте запустить тест скорости страницы до установки приложения, а затем после, чтобы увидеть, насколько оно влияет на производительность сайта.
Проверьте свои шрифты: Шрифты занимают много места на вашем веб-сайте, поэтому, если на вашем веб-сайте несколько шрифтов, сделайте это простым и выберите один. Поскольку на веб-сайтах часто используются шрифты значков для страниц корзины и учетных записей, мы рекомендуем заменить эти шрифты значков на SVG (масштабируемая векторная графика).В SVG есть несколько улучшений: они не ограничиваются одноцветными, они легче по весу и могут быть лучше с точки зрения доступности и SEO.
Удаление каналов социальных сетей: рассмотрите возможность удаления каналов и виджетов социальных сетей. Хотя они представляют некоторую ценность для клиентов, они значительно увеличивают время загрузки.

Другие факторы в игре

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

Используйте надежный хостинг: Услуги веб-хостинга играют решающую роль в производительности вашего сайта. Одна из причин, по которой мы рекомендуем Shopify, заключается в том, что у него есть некоторые ключевые преимущества в этой сфере. Поскольку это размещенная платформа, сервер масштабируем и оптимизирован для удовлетворения потребностей магазина электронной торговли. Это означает, что время загрузки часто бывает быстрее, чем было бы, если бы вы использовали свой собственный сервер.
Shopify доказал это в действии: на пике Черной пятницы, Киберпонедельника 2017 года, Shopify обрабатывал продажи на 1,1 миллиона долларов в минуту.
Используйте сети доставки контента: CDN — это группа оптимизированных высококачественных серверов, разбросанных по всему миру.Это означает, что копии содержимого вашего сайта — изображения, файлы Javascript и CSS — кэшируются и хранятся на сервере. Поэтому, когда посетитель заходит на ваш сайт, эти ресурсы загружаются с ближайшего географически сервера, что сокращает время загрузки.
Поскольку природа электронной коммерции означает, что вы можете продавать на международном уровне, вам следует серьезно подумать о CDN.

Боковое примечание: Shopify предоставляет CDN для всех статических ресурсов (изображений, CSS и Javascript).

Старайтесь не полагаться на всплывающие окна быстрого доступа: Многие темы Shopify включают всплывающее окно быстрого просмотра, которое обеспечивает обзор продукта с домашней страницы или страницы коллекции. Это происходит без загрузки совершенно новой страницы. Часто пользователи могут даже добавить товар в корзину из этого всплывающего окна.
Какими бы изящными они ни были, эти всплывающие окна часто предварительно загружают всю информацию со страницы продукта, даже если кто-то не нажимает кнопку «Быстрый просмотр».На странице, заполненной миниатюрами изображений товаров, это приводит к огромному объему данных.
Если в этом нет необходимости, рекомендуем их удалить.

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

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

Google speed insights: Google обновил инструмент для измерения скорости загрузки сайта PageSpeed Insights

Google обновил инструмент для измерения скорости загрузки сайта PageSpeed Insights

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

Вывод

Google Pagespeed Insights — Плагин для WordPress

Detailed Page Reporting

Report Summaries

Desktop and Mobile Page Reports

Report Snapshots

Snapshot Comparison Tool

Add/Import Custom URLs

Scheduled Report Checks

Additional Languages

Решение проблем

I entered my API Key and saved the Options, but no Reports are showing up in the Report List.

Page report checks never finish all of the way, I have to press «Start Reporting» again and again to get it to finish checking all of my pages.

An error was reported while trying to check one of my pages, and it has been added to the Ignored Pages section.

I received a Javascript or PHP error.

My Page Scores seem really low. When I click «Recheck Results» when viewing Report Details, the score jumps up dramatically.

I want to clear out all of the current page reports and start over.

Мифы и факты о PageSpeed Insights

Итак, что же такое PageSpeed Insights?

Google PageSpeed Insights обновился — и оценка сайтов упала. Что об этом нужно знать?

Google PageSpeed Insights — что это и как добиться результата 100%?

Как работает Google PageSpeed Insights?

Рекомендации по ускорению загрузки сайта

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

Минимизация кодирования

Оптимизация загрузки видимого содержимого страницы

Активация функции сжатия

Применение кэширования браузера

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

Лицемерие google. PageSpeed Insights

О PageSpeed ​​Insights | Разработчики Google

Оценка производительности

Реальные полевые данные

Хорошая оценка, требуется улучшение, плохая

Распределение и выбранные значения метрики

Core Web Vitals

Различия между полевыми данными в PSI и CrUX

Лабораторные данные

Аудит

Часто задаваемые вопросы (FAQ)

Еще вопросы?

Обратная связь

Как использовать Google PageSpeed ​​Insights (правильный путь)

Что такое Google PageSpeed ​​Insights?

Просто использовать

Вы все еще нуждаетесь в нагрузочном тестировании

Итог: Тестируйте с умом

Google PageSpeed ​​Insights для WordPress

Контрольный тест производительности

Google PageSpeed ​​Insights

PageSpeed ​​Audits

Полевые и лабораторные данные

Первая насыщенная краска

Индекс скорости

Время до взаимодействия

Google PageSpeed ​​Insights vs.Расширение Web Vitals для повышения производительности

Скорость выставления оценок с помощью Google PageSpeed ​​Insights

Об измерениях в Google Core Web Vitals

Использование показателей Web Vitals для создания более быстрых веб-сайтов

Заключение

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

Метрики в Google Analytics

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

Время загрузки страниц

Google PageSpeed ​​Insights

Первая отрисовка (содержательная и значимая)

Speed ​​Index

Время до взаимодействия

Первый режим ожидания ЦП

Макс. Потенциальная задержка первого ввода

Дополнительные точки данных, которые имеют значение

Время до первого байта

Количество HTTP-запросов

Повысьте скорость страницы с помощью Trinity Insight

Как скорость страницы влияет на SEO и рейтинг Google

Что такое Google PageSpeed ​​Insights?

Мобильные и настольные

О PageSpeed Insights | Разработчики Google

Как использовать Google PageSpeed Insights (правильный путь)

Что такое Google PageSpeed Insights?

Google PageSpeed Insights для WordPress

Google PageSpeed Insights

PageSpeed Audits

Google PageSpeed Insights vs.Расширение Web Vitals для повышения производительности

Скорость выставления оценок с помощью Google PageSpeed Insights

Google PageSpeed Insights

Speed Index

Что такое Google PageSpeed Insights?

Показатели PageSpeed Insights

Ключевые моменты повышения оценки PageSpeed Insights

Как массово проверить рейтинг PageSpeed Insights

Как решать проблемы, отмеченные в Google PageSpeed Insights и других советах — Fuel Made

Правда о Google PageSpeed Insights

Beyond PageSpeed Insights