TechBlogSD - Все для WordPress і WEB розробки
WEB і WordPress інструкції, новини, огляди тем та плагінів

Як отримати оцінку 100/100 на сайті Google PageSpeed ​​Insights для сайту WordPress?

3

Нещодавно Google оголосила, що досвід роботи зі сторінками стане одним із факторів алгоритму, який вплине на позиції в рейтингу пошуку. Новий термін Core Web Vitals, який ви бачите в Google Search Console, стає важливим чинником, який визначає майбутнє Інтернету. Це змушує всіх веб -майстрів забезпечити швидкість завантаження сайту відповідно до вимог Google, щоб отримати хороший рейтинг у результатах пошуку. Якщо ви використовуєте WordPress для розміщення свого сайту, то насправді легко отримати оцінку 100/100 в інструменті Google PageSpeed ​​Insights.

Це конкретний приклад з нашим власним досвідом. Отже, ми чітко згадуємо плагіни / теми / назви компаній -хостингів. Важливо, що не завжди потрібно дивитися на оцінку PageSpeed, якщо ви чітко бачите, що робите. Наприклад, ви можете використовувати платну рекламу або соціальний маркетинг для просування свого сайту, який має низький показник швидкості сторінки. Тому контекст цієї статті застосовний для блогерів, які прагнуть отримати вищу швидкість, таким чином збільшуючи шанси на вищий рейтинг у пошукових системах та кращий досвід користувача.

Google PageSpeed ​​Insights

Інструментів небагато; Ви можете використовувати для моніторингу швидкості роботи веб -сайту WordPress. Google PageSpeed ​​Insights, Pingdom, GTmetrix та WebPage Test є одними з найбільш використовуваних інструментів у списку. Оскільки результати пошуку Google визначають трафік багатьох веб -сайтів, добре використовувати інструмент PageSpeed ​​Insights як довідковий матеріал.

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

Фактор Вага
Перша змістовна фарба 15%
Індекс швидкості 15%
Найбільша змістовна фарба 25%
Час до інтерактивності 15%
Загальний час блокування 25%
Зсув кумулятивного макета 5%

Після аналізу веб -сторінки Google надасть оцінку за 100 -бальною шкалою. Нижче наведені три діапазони, що вказують на швидкість розташування аналізованої сторінки.

  • 0-49: Погано
  • 50-79: потребує вдосконалення
  • 80-100: Добре

Тому оцінка 100/100 у Google PageSpeed ​​вказує на те, що ваш сайт завантажується надзвичайно швидко, очевидно, Google і користувачам сподобається швидке завантаження веб-сайтів. Ви можете перевірити калькулятор оцінок Lighthouse, щоб перевірити різні параметри, необхідні для динамічного підвищення швидкості.

Пам’ятайте, що крім вищезгаданих факторів, Google також запропонує такі можливості, як видалення невикористаних сценаріїв або видалення невикористаного CSS. Однак ці рекомендації НЕ вплинуть на ваш бал, навіть якщо ви наполегливо працюєте над тим, щоб вони пройшли аудит. Ми чітко наголошуємо на цьому, оскільки багато блогерів вважають, що видалення jQuery допоможе отримати більший бал.

Оцінка та розмір нашого веб -сайту

Перш ніж пояснити, як отримати 100/100, ми хочемо показати вам рахунок нашої домашньої сторінки. Як бачите, ми отримуємо 100 як для мобільних пристроїв, так і для настільних.

Як отримати оцінку 100/100 на сайті Google PageSpeed ​​Insights для сайту WordPress?

Оцінка домашньої сторінки

Пам’ятайте, що ми говоримо про те, що цей веб -сайт має майже 2000 повідомлень у блогах і використовує близько 20 плагінів. Якщо ми зможемо отримати повний бал, це цілком можливо для сайтів з меншою кількістю публікацій та плагінів.

5 факторів для отримання 100/100 балів у Google PageSpeed

Нижче наведено 5 основних факторів, які ми детально обговоримо, які, на нашу думку, важливі для отримання оцінки 100/100 у Google PageSpeed.

  1. Отримайте хорошу хостинг -компанію
  2. Немає рекламних кодів
  3. Використовуйте полегшену тему
  4. Видаліть важкі плагіни
  5. Використовуйте плагін кешування

Кілька інших факторів, таких як очищення БД та CDN, також можуть допомогти у залежності від вашої ситуації. Ми також розглянемо ці аспекти.

1 Хороший хостинг

Ми запустили цей веб -сайт у Weebly і перейшли на WordPress із Bluehost. Згодом у травні 2016 року ми перенесли сайт на план SiteGround GoGeek, а потім на SiteGround Cloud VPS. З того часу не було повернення назад або витрачання часу на розміщення пов’язаних з цим питань.

Нещодавно SiteGround перенесла свою інфраструктуру на платформу Google Cloud. Це дуже допомагає мати надійний час першої відповіді від сервера. Ми навіть не використовуємо Cloudflare або будь -який інший CDN, щоб отримати 100/100 балів у Google PageSpeed. Мова йде про хороший хостинг, який ви використовуєте для свого сайту. Тому не забудьте придбати преміальний план хостингу, такий як SiteGround Cloud VPS або подібний. Це допоможе заощадити багато часу та зосередитися на інших аспектах роботи веб -сайту.

2 Відсутність рекламних кодів

Майже 90% блогерів починають вести блог, щоб заробляти гроші в Інтернеті. Перший вибір для них – подати заявку на Google AdSense, а другий – спробувати афілійований маркетинг. Оскільки партнерському маркетингу потрібен надійний сайт, Google AdSense є ідеальним варіантом для нових блогерів.

Ми використовуємо Google AdSense, і це є нашим основним джерелом доходу для ведення цього веб -сайту. Ми пояснили проблеми з AdSense та швидкістю сторінки у нашій статті – AdSense проти швидкості сторінки – це іронія. Сторінка, яку ми протестували в PageSpeed, є домашньою сторінкою цього сайту. Причина, чому ми отримуємо 100/100 балів, полягає в тому, що ми не використовуємо код AdSense на домашній сторінці. Однак на всьому сайті є автоматична реклама. Коли ми перевірили сторінку після перевірки оцінки PageSpeed, ми виявили, що внизу сторінки відображається одне оголошення. Сторінка завантажується швидше, коли внизу з’являється одне оголошення.

Дозвольте нам показати вам результат якоїсь випадкової сторінки з 5 оголошеннями AdSense на цьому сайті. Як бачите, оцінка знаходиться в діапазоні 55/90. Це зниження на 45/10% на мобільних та настільних комп’ютерах.

Як отримати оцінку 100/100 на сайті Google PageSpeed ​​Insights для сайту WordPress?

Мобільна швидкість випадкової сторінки

Як отримати оцінку 100/100 на сайті Google PageSpeed ​​Insights для сайту WordPress?

Швидкість робочого столу випадкової сторінки

Якщо ваш вибір – використовувати AdSense або інші подібні рекламні програми, забудьте про швидкість сторінки. Google PageSpeed ​​покаже вам багато проблем через завантаження сторонніх сценаріїв на ваш сайт. На жаль, ви не зможете вирішити ці проблеми, не видаливши код сценарію реклами.

Як отримати оцінку 100/100 на сайті Google PageSpeed ​​Insights для сайту WordPress?

Вплив AdSense на швидкість

3 Використовуйте полегшену тему

Ми використовували тему Highend 4 роки. Це дуже хороша тема з вбудованими функціями. На жаль, ми не використовували 90% функцій, таких як карти, поширені запитання, відгуки тощо. Однак тема завантажує ресурси CSS та JS, необхідні для всіх цих функцій, незалежно від того, чи використовуєте ви на сторінці чи ні. Це безглуздо, як володіти великим палацом, але все ще жити в маленькій хатині за межами палацу.

На жаль, змінити тему було непросто через тісну інтеграцію теми Highend по всьому сайту. Наприклад, тема Highend має можливість інтегрувати Google Analytics за допомогою параметрів теми. Отже, ми витратили багато часу, щоб знайти тему заміни, яка є мінімальною за своєю суттю, але пропонує базові функції без плагінів.

На щастя, дуже мало тем відповідало нашим критеріям. Якщо бути точним, ми вибрали теми GeneratePress та Astra, а пізніше вирішили придбати GeneratePress. Після шести місяців роботи з міграції ми змінили тему в червні 2020 року, і показник PageSpeed ​​збільшився щонайменше на 30% (з оголошеннями AdSense).

Ми втратили п’ять попередніх років, вибравши неправильну тему, яка нам не потрібна. Не робіть такої ж помилки та купуйте преміальну та мінімалістичну тему, яка задовольняє ваші потреби. Тема GeneratePress пропонує гачки з використанням елементів, розділів, типографіки та інших основних функцій, які нам потрібні. Для будь -яких інших цілей краще використовувати плагіни, щоб нам не довелося витрачати ще п’ять років на те, щоб змінити цю тему.

4 Видаліть важкі плагіни

Подібно до теми, є важкі плагіни, які зменшать швидкість сторінки. Раніше на цьому сайті ми використовували плагіни WPBakery Page Builder, WooCommerce та WP Review. Тепер ми перенесли всі ці плагіни разом із темою Highend у підкаталог. Це спричинило велику втрату трафіку для нас разом із оновленнями алгоритмів Google у травні 2020 року. Однак нам потрібно рухатися далі із збільшенням швидкості на ~ 30%.

Якщо ви використовуєте або плануєте знайти конструктор сторінок або подібні плагіни, зупиніться і добре подумайте.

  • Ми перетворили макет WPBakery Page Builder і використовуємо Gutenberg за замовчуванням для створення нашої домашньої сторінки. Навіть GeneratePress пропонує макети Elementor та власний міні -конструктор сторінок, однак ви напевно можете створити гідні макети з повнорозмірними jumbotron та заголовками героїв за допомогою блоку Gutenberg Group.
  • Уникайте роздутих плагінів, таких як WP Review – він все ще використовує чудовий шрифт 4.7 за ціною 97 доларів (ліцензія на 3 сайти). Це абсолютно смішно, завантажуючи версію 4.7 на кожну окрему сторінку під час запуску версії 6. Пам’ятайте, що мова йде про 2000 сторінок, з яких лише 70 сторінок використовують шаблон огляду з плагіна. Це своєрідний компроміс, про який слід подумати, перш ніж встановлювати будь -який плагін на своєму сайті.
  • WooCommerce – це ще один плагін, який знищить ваш сайт, додавши адміністративні виклики AJAX для кошика. Знову ж таки, 50 продуктів проти 2000 повідомлень – це не найкращий спосіб утримати їх разом як з точки зору відвідуваності, так і з точки зору доходу.

Це важкі способи навчання, для розуміння яких знадобилися роки. Сподіваюся, ви зможете зрозуміти і використовувати лише необхідні плагіни на своєму сайті.

5 Використовуйте плагін кешування

Ми використовуємо WP Rocket більше року. Найкраща частина плагіна – він генерує критичний CSS для кожного типу дописів на вашому сайті. Поряд з кешуванням та попередньою завантаженням, критичний CSS підвищить швидкість вашого сайту до вершини. Зауважте, ми також використовували WP Rocket на тему Highend з WooCommerce та іншими важкими плагінами, як описано вище. Однак результат у Google PageSpeed ​​був 30/60.

Отже, висновок такий: плагін кешування найкраще працює з найкращою кодованою темою/плагінами. В іншому випадку у вас буде неправильне поєднання без особливого збільшення швидкості. Зверніть увагу, що SiteGround пропонує кешування серверів за замовчуванням з плагіном SG Optimizer. Однак це не працює для нас навіть із простою темою GeneratePress. Оскільки ми хочемо зберегти кешування незалежно від хостингу, WP Rocket або подібний плагін був для нас найкращим варіантом. Нижче наведено кешування та інші функції, які ви отримаєте з WP Rocket:

  • Кешування браузера, стиснення GZIP, видалення рядка запиту та оптимізація шрифтів Google.
  • Вимкніть вбудовування, смайлики та керуйте API серцевого ритму.
  • Важлива генерація CSS для кожного типу публікацій з попереднім завантаженням URL -адрес на основі вашої XML -карти сайту.
  • Розмістіть jQuery Migrate, Google Analytics та Facebook Pixels для покращення швидкості.
  • Об’єднайте та зменшіть CSS та JS.
  • Очищення зайвих записів у базі даних, таких як перехідні процеси, редакції та автозбереження.
  • Ледаче завантаження зображень, відео та кадрів.
  • Окремий кеш для мобільних пристроїв та настільних ПК, якщо потрібно.

Ви також можете придбати CDN та використовувати плагін для оптимізації зображення за додаткову плату (ми не використовуємо ці функції).

Інші фактори

Ну, у всьому Інтернеті ви знайдете слово "CDN", говорячи про швидкість роботи сайту WordPress. SiteGround також пропонує безкоштовну інтеграцію CDN з Cloudflare. Якщо ви не націлені на цільову аудиторію в таких країнах, як Інтернет, заблоковані Інтернетом, ми не вважаємо, що CDN може насправді різко збільшити швидкість. Для такого сайту, як наш, це допоможе швидше обслуговувати статичні файли, як -от великі зображення. Однак SiteGround представила інструменти сайту (замінивши cPanel ), які автоматично генеруватимуть зображення WebP за допомогою свого плагіна SG Optimizer. Ми все ще не використовуємо Ця функція дозволяє використовувати будь -який плагін WebP для подання легких зображень підтримуваним браузерам замість формату PNG/JPEG.

Ще один фактор – очищення вашої бази даних та сайту. Як уже згадувалося, WP Rocket пропонує опцію очищення БД, яку можна періодично планувати. Однак це не те прибирання, про яке ми тут говоримо.

  • Чи знаєте ви, що плагін WooCommerce додасть 25+ таблиць у вашу базу даних? Як ми пояснили тут, за замовчуванням для встановлення WordPress буде лише 12 таблиць для одного сайту. Ми витратили багато часу на міграцію замовлень, продуктів та файлів WooCommerce. Нам також потрібно видалити ескізи WooCommerce, щоб очистити місце для зберігання. Дізнайтеся більше про те, як повністю видалити WooCommerce зі свого сайту.
  • Плагін WP Review Pro додасть ~ 25 користувацьких полів до кожної вашої публікації. Все це призведе до збільшення таблиці постмета. Він також генерує 2 додаткові ескізи для кожного завантаженого вами зображення.
  • WP Bakery та багато інших плагінів матимуть CSS, JS та інші ресурси в окремому каталозі у папці завантажень. Ці сценарії уповільнюють роботу вашого сайту, завантажуючи його на всі сторінки.
  • Тема Highend буде генерувати ~ 10 ескізів (це буде змінюватися залежно від розміру зображення та параметрів) для кожного завантаженого зображення.

Тепер, коли просто зміна теми на GeneratePress та перенесення важких плагінів у підкаталог ніяк не допоможе очистити поточний безлад. Якщо ви змінюєте тему або видаляєте плагіни, не забудьте видалити всі сліди, які вони залишають у таблицях wp_postmeta та wp_options. Це допоможе збільшити швидкість завантаження сторінки за рахунок скорочення часу виконання запитів до бази даних.

Заключні слова

Ми навмисно написали цю статтю таким чином, що НЕ слід робити, щоб отримати 100/100 балів в інструменті Google PageSpeed ​​Insights. Це для тих блогерів, які в середині блогів намагаються підвищити швидкість. Однак, якщо ви новий блогер, це повинно дати вам чітке уявлення про вплив вибору таких опцій, як AdSense і важкі теми для конструкторів сторінок. Як каже одне популярне прислів’я: «Простота – це найвища складність», вибір того, що вам потрібно, допоможе вам отримати високі бали, а також заощадить багато часу.

Джерело запису: www.webnots.com
Залиште відповідь

Цей веб -сайт використовує файли cookie, щоб покращити ваш досвід. Ми припустимо, що з цим все гаразд, але ви можете відмовитися, якщо захочете. Прийняти Читати далі