Рубрики
Uncategorized

Как я забил почти идеально в Google Lighthouse (со сайтом WordPress!)

В этом посте я покажу вам, как я получил почти идеальный балл Google Lighthouse … С … с меткой WebDev, DevOps, Performance, WebPerf.

В этом посте я покажу вам, как я получил почти идеальный балл Google Lighthouse … с сайтом WordPress.

Этот пост также видео:

Прежде чем мы начнем … Что такое Google Lighthouse?

Просто заявил, Google Lighthouse Это инструмент для измерения производительности, доступности, лучших практик и SEO вашего сайта.

Другими словами, он проверяет ваш сайт.

После аудита маяк показывает счет от 0 до 100. Чем выше оценка, тем лучше ваш сайт выполняет.

Это открытый источник и доступен в виде расширения Chrome или пакет NPM. Вы также можете запустить его в Chrome devtools Отказ

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

npm install -g lighthouse

Затем введите:

lighthouse https://www.example.com/ --view

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

OMG мой маяк баллы воняет

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

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

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

Например, вот результаты ежедневной почты:

Dailymail.com Результаты используют Google Lighthouse. Довольно мрачный на производительности.

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

Фон и мотивация: RealToughCandy.com

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

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

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

Почему производительность/скорость?

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

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

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

Скорость страницы — это всего лишь один ранжирующий фактор, но это большая, тем не менее. ( Согласно backlink.io Есть более 200 факторов рейтинга.)

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

Они просто нажат и выходят на другой сайт.

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

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

Вот основные факторы производительности, на которых я сосредоточился.

Фактор производительности № 1: VPS Хостинг

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

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

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

И самое главное, Мой сайт работает быстрее на VPS по сравнению с общим хостингом Отказ

Поскольку у меня уже имел общий хостинг на NameChap, я просто обновил свой пакет хостинга в VPS.

🖥 Sidenote: Я был клиентом NameChap в течение многих лет и Очень рекомендую их услуги . Их обслуживание клиентов тоже отлично. Не позволяйте имени скидки обмануть вас. (Я также аффилирующий и может заработать небольшую комиссию, если вы что-то покупаете.)

Фактор производительности № 2: Моя тема WordPress

Первое, что я сделал после моего обновления VPS был Исследование Themes WordPress Отказ

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

Номер один , что они не провисались с помощью кода вкус.

И Номер два , что они были относительно популярны. Это почему?

Потому что: документация.

Мне нужна была тема, которая имела все важные вопросы, ответили уже.

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

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

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

На мой взгляд, Fast WordPress сайт начинается с хорошей темы.

Фактор производительности № 3: Управление плагином WordPress

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

И посмотри на все эти красивые модернизы, свисающие перед моим лицом!

Вы имеете в виду, что у меня может быть маленькая синяя птица в середине статьи, рассказывая людям Tweet My S ** T? Запишите меня!

О да, я получил реальный жадный.

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

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

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

И людям действительно нужен кнопка социальной доли под одним из моих CodeCademy Pro Hot занимает ?

Да, наверное не.

Поэтому я запускаю очень легкую плагин WordPress сейчас.

Секрет прохождения балла Google Lighthouse: поставить пользователей первым

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

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

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

Google Lighthouse Оценка из этого поста в блоге.

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

Например, я не видел свой счет на Первая кончанная краска и исправить это.

Тогда иди к Индекс скорости и исправить это.

Тогда иди к Время интерактивности и исправить это.

Вы, безусловно, можете взять этот подход, но я не сделал.

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

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

Мы пишем действительно подробные и тщательные описания.

Мы пишем красиво отформатированные абзацы с хорошими описательными заголовками.

Мы даем пользователям то, что они хотят.

Но у нас тоже много вещей за кулисами. Например, мы:

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

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

И побочный эффект этого? Вы получаете немного Действительно Хорошие баллы в маяке.

Дополнительные инструменты: Google Analytics & Google поисковой консоли

Перед использованием маяка я полагался в основном на Google Analytics и Поиск Google Socole Чтобы увидеть, как мы выступили с точки зрения трафика.

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

Например, на Google Analytics Вы можете увидеть поломку устройств, используемых на вашем сайте.

Теперь, если 90% вашей аудитории находятся на мобильном, вы хотите убедиться, что большинство ваших усилий доставляют мобильный опыт убийцы.

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

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

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

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

Да, нет.

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

Позвольте мне объяснить, как это произошло.

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

Через несколько недель после того, как я нанял свой первый писатель в марте 2020 года, я решил поставить рекламу на RealtoughCandy.com. И пока деньги были приличными к трафику, который я получал, опыт пользователей был Abysmal Отказ

Чтобы проиллюстрировать, я запустил опцию Auto Ads, что означает Google (и позже Ezoic ) решает, где разместить рекламу на моих блогах.

Чем больше рекламных объявлений, они больше денег каждый делает. Как вы можете себе представить, ни Google, ни Ezoic (ни себя) не хочет потерять доход объявлений. Так были реклама Везде Отказ

Мой сайт буквально засорился с рекламой.

В результате мой рейтинг производительности Google Lighthouse Таково :

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

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

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

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

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

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

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

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

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

Проиллюстрировать:

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

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

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

Наконец, после месяцев внутренних дебатов я решил в декабре 2020 года, чтобы удалить все объявления.

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

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

Четыре указываются от эффективности совершенства! На сайте WordPress не меньше.

Вот результат от индивидуальной страницы блога:

Многие страницы все еще несовершены. У меня еще немного работы. Но когда я сравниваю эти цифры на мою конкуренцию, у меня все хорошо.

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

Да, вы можете получить отличный балл Google Lighthouse с WordPress

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

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

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

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

Советы для получения отличного балла Google Lighthouse с WordPress

Есть много технических вещей, которые вы можете делать, чтобы улучшить балл Google Lighthouse с WordPress.

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

Второй Будьте внимательны к своим плагинам.

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

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

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

Например, поскольку Google Ads и Ezoic были автоматически заполнены моими сообщениями в блоге, пользователь получит где угодно от 6 до 20 объявлений.

Это было ужасно для моего балла маяка.

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

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

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

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

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

Я надеюсь, что вам понравилось мое путешествие в центр маяка со сайтом WordPress. Счастливого аудита!

Далее: 11 Предварительные ресурсы интервью Faang Вы не можете позволить себе пропустить На

Пост Как я забил почти идеально в Google Lighthouse (со сайтом WordPress!) появился первым на Realtoughcandy Отказ

Оригинал: «https://dev.to/realtoughcandy/how-i-scored-nearly-perfectly-on-google-lighthouse-with-a-wordpress-site-340d»