Оптимизация производительности страницы: как это сделать — руководство, часть 2

В моей статье «Досадная тема производительности страниц: руководство (часть 1)» мы рассмотрели показатели оптимизации производительности страниц и показали вам, на что обращать внимание и как разобраться в механизме вашего веб-сайта. Прежде всего, вы создали эталон для своей конкурентной среды, по которому вы можете сравнивать свой веб-сайт. В этой статье мы рассмотрим инструменты и меры, которые можно использовать для оптимизации времени загрузки страницы. Здесь в некоторых местах это становится немного техническим, потому что я также хочу показать вам, как мы можем глубже погрузиться в предмет и, прежде всего, как мы можем получить больше данных измерений. Но некоторые технические ноу-хау очень полезны. Но не беспокойтесь! В большинстве случаев нет необходимости просматривать все эти данные.

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

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

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

Инструменты и документация Google

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

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

Серверный модуль

Апач mod_chache и НГИНКС proxy_cache — это дополнительные модули для серверов, которые идут в комплекте с ними «из коробки». На внутренней стороне есть другое программное обеспечение и модули, которые можно использовать в качестве интегрированных компонентов в системах магазинов или программном обеспечении веб-сайтов, таких как WordPress. Однако они обычно не работают непосредственно на сервере, а вместо этого хранят предварительно обработанные документы в определенном месте, поэтому запросы к базе данных, например, не являются абсолютно необходимыми для представления.

ЧИТАТЬ   Как подключить Alexa к iPhone | Цифровые тенденции

Для WordPress мне нужна эта карточка Плагин WPRocket упоминается потому, что он также включает в себя программное кэширование и множество опций оптимизации и довольно широко распространен в мире WP.

Google PageSpeed ​​Insights и тест Lighthouse

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

Что Дополнение Lighthouse для браузера Вы можете загрузить и установить его из Интернет-магазина Chrome.

Расширение уже интегрировано в Chrome DeveloperTools и может использоваться непосредственно оттуда.

Обзор теста Lighthouse в Chrome DevToolsОбзор теста Lighthouse в Chrome DevTools

Снимок экрана Lighthouse в Chrome DevTools.

Отчет Google Crux

Кто на Данные поля из Google Я хотел бы порекомендовать отчет Google Crux. Напоминаем: данные CrUX — это данные об использовании, собранные Google, которые собираются от пользователей через плагины браузера Chrome и т. д. и которые Google предоставляет бесплатно. Вы можете легко хранить эти данные в одном См. расширение Chrome.

Визуализация данных CrUX в визуализаторе Chrome Core Web Vitals.Визуализация данных CrUX в визуализаторе Chrome Core Web Vitals.

Данные CrUX в дополнительном визуализаторе Core Web Vitals Visualizer.

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

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

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

Инструменты, которые любят использовать разработчики

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

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

Водопадная диаграмма из теста веб-страницы показывает соединения и соответствующее время. Водопадная диаграмма из теста веб-страницы показывает соединения и соответствующее время.

Снимок экрана Wasserfalldiagramm webpagetest.org

Стоимость против. Преимущества: в чем смысл?

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

ЧИТАТЬ   Как наблюдать метеорный поток Ориониды сегодня вечером | Цифровые тенденции

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

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

Какой именно метод оптимизации скорости страницы является хорошим?

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

Мы можем помочь тебе!

Вы ищете компетентное, гибкое и надежное агентство онлайн-маркетинга? Мы с нетерпением ждем вашего необязывающего запроса.

Связаться с нами

Мой рекомендуемый подход* будет следующее:

  • Определение соответствующего эталона от конкурентов и, таким образом, является доказательством того, что мы имеем решающее преимущество по сравнению с рынком с точки зрения производительности, включая UX.
  • Обзор основных веб-показателей в Search Console: есть ли расхождения? Если да, то какой?
  • Маяковые испытаниячтобы разобраться в отдельных факторах и проверить рекомендации Google.
  • Просмотр статистики производительности/водопадных диаграмм в Chrome DevTools, webpagetest.org или аналогичном для анализа неправильной загрузки ресурсов или чрезмерного времени обработки.
  • Проверить снова Лучшие практики по оптимизации времени загрузки уже применены.. (Это не означает лучшие практики Lighthousetest.)
  • Передача сжатых данных
  • Использование кеша (бэкенд или сервер)
  • Удалить ненужный JS или CSS: разделение кода
  • Сосредоточьтесь на критическом пути
  • Предоставление изображений в правильном формате и размере (одна из самых частых ошибок)
  • Инфраструктура достаточно подходит для нагрузки, быстрое время отклика системы
  • Избегайте загрузки перенаправлений или ошибок при загрузке.
  • Проверьте подключение к сторонним ресурсам и при необходимости оптимизируйте его.
  • Использование правильных протоколов
  • Проверьте политику кэширования для статических элементов
  • Адресация или предварительная загрузка ресурсов: используйте предварительное подключение, предварительную выборку.
  • Если размер DOM слишком велик, посмотрите, можно ли его уменьшить (для очень сложных страниц это обычно довольно сложно и отнимает много времени).
ЧИТАТЬ   Шедевр и Кандинский вошли в пятерку самых обсуждаемых нейросетей в российских соцсетях

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

Что можно взять с собой?

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

  • Что делает рынок? Имею ли я заметно худшие (или худшие) результаты, чем у конкурентов, что влияет на UX и, следовательно, на продажи?
  • Сколько стоит внедрение и что оно дает?
  • На каком показателе мне сосредоточиться?
  • Какие варианты вмешательства существуют для улучшения производительности?
  • Как мне наладить хорошие рабочие условия с разработчиками?
  • Возможно, есть более важное домашнее задание, которое нужно сделать в первую очередь?

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

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

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

Изображение предоставлено: Изображение на обложке: TarikVision/stock.adobe.com; Изображение 2: Seocracy GmbH: Снимок экрана Маяк в Chrome DevTools; Изображение 3: Seocracy GmbH: Данные CrUX в плагине Core Web Vitals Visualizer; Изображение 4: Сеократие ГмбХ: Снимок экрана Wasserfalldiagramm webpagetest.org

Source