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

pagespeed

У цій статті ми розповідаємо вам як можна отримати банкноту 100. І, крім того, це можна зробити не на простому і базовому веб-сайті без надто багато функціональних можливостей, але ми можемо отримати його на досить повному веб-сайті: цей, який ви бачите прямо зараз 🙂

Що таке тест Google PageSpeed ​​Insights і для чого він призначений?

PageSpeed ​​Insights - це інструмент, розроблений Google, який показує ефективність сторінки чи веб-сайту. Результати поділяються на два: мобільна версія (для мобільних пристроїв) та настільна версія (для робочих столів). Окрім того, що Google дає нам оцінку за наш веб-сайт, Google показує нам причини, за якими нас оцінює таким чином, і дає нам ряд порад щодо покращення цього балу.

Google розподіляє оптимізацію на три широкі категорії при ранжируванні веб-сайту:

  • Швидкий Інтернет: оцінка тесту показує, що веб-сайт знаходиться у верхній третині найшвидших сторінок.
  • Звичайний Інтернет: Інтернет знаходиться на середній третині найшвидших сторінок в Інтернеті.
  • Повільна Інтернет: Інтернет займає найповільнішу третину Інтернет-сторінок.

Оцінка, яку нам показує Google, - це значення, яке переходить від 0 до 100. Оцінка близько 100 означає, що сторінка надзвичайно швидка і немає речей для оптимізації. А оцінка, близька до 0, означає, що на веб-сторінці потрібно виконати багато роботи.

Щодо примітки, Google ділить оцінку таким чином:

  • Примітка добре: Оцінка 80 або вище.
  • Примітка наполовину: Оцінка від 60 до 79.
  • Примітка спускатися: Оцінка від 0 до 59.

Чому важливо мати швидкий веб-сайт

За даними Google, 53% користувачів залишають веб-сторінку, якщо завантаження займає більше 3 секунд. Тобто, якщо ваш веб-сайт не завантажується менше ніж за 3 секунди, більше половини ваших користувачів перейде на інший веб-сайт (і можливо, що вони зроблять це до одного з конкурентів).

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

З яким, мати a швидкий та оптимізований веб-сайт, це зробить ваших користувачів чудовими для користувачів. А це означатиме набагато більше конверсій.

Якщо завантаження веб-сайту займає більше 3 секунд, більше 53% відвідувачів буде втрачено, і з кожною секундою затримки часу завантаження коефіцієнт конверсії сторінки зменшується більш ніж на 20%.

Джерело: Google

Швидкість веб-сайту необхідна не тільки для інтернет-магазину. Оскільки очевидно, що швидка електронна комерція дозволить нам збільшити продажі. Це також необхідно для корпоративних веб-сайтів. Оскільки кожен веб-сайт прагне здійснити конверсію, або купувати у нас, зв’яжіться з нами або зателефонуйте нам. Або, просто, ефективно показати, хто ми є або що робимо. У всіх цих випадках нам потрібен швидкий та ефективний веб-сайт.

Поради щодо отримання оцінки 100 на Google PageSpeed ​​Insights

Факторів, що впливають на розміщення приміток у тесті Google, декілька та різноманітні. Тут ми покажемо вам кілька прикладів, які допоможуть вам покращити оцінку.

Усі методи, докладно описані тут, є частиною WPO: Оптимізація веб-продуктивності, тобто оптимізація швидкості веб-сайтів.

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

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

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

Якщо ви використовуєте WordPress, одним із найкращих плагінів для цього, не витрачаючи багато часу на їх ручне стиснення, є WP Smush Image. Це плагін, який має безліч функцій у своїй безкоштовній версії.

використання a плагін автоматичної оптимізації зображення - Це важливо, особливо для веб-сайтів, де є кілька видавців, які регулярно публікують. Таким чином, не має значення, який редактор завантажує вміст із зображеннями, оскільки плагін автоматично оптимізує всі зображення, які завантажуються в Інтернет.

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

Якщо ви не хочете використовувати новий плагін або просто ваш веб-сайт не розроблений у WordPress або іншій CMS, такій як Drupal, яка має подібний плагін, ви можете використовувати онлайн-інструменти для стиснення та оптимізації зображень як Optimizilla або будь-який інший інструмент. Це безкоштовний інструмент, який дозволяє завантажувати до 20 зображень одночасно.

Зменште та оптимізуйте HTML-код

Ще однією порадою щодо покращення швидкості завантаження буде оптимізація HTML-коду. Хоча це повинно бути зроблено якісно, ​​оскільки, якщо це буде зроблено неправильно, ця дія може повністю деконфігурувати інтерфейс вашого веб-проекту.

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

Знову ж таки, існує багато плагінів для WordPress, які дозволяють зменшити HTML-код вашого веб-сайту.

Оптимізуйте CSS-код

Іншим важливим фактором є Оптимізація коду CSS. Зазвичай файли CSS - це зовнішні файли, які потрібно завантажити.

Багато разів ці файли CSS містять код, який насправді не використовується на сторінках. Якщо сторінка використовує лише 10% коду з файлу CSS, вона фактично без потреби завантажує решту 90% із цього файлу.

Перше, що потрібно зробити, це:

  • Проаналізуйте, який код та/або файли CSS дійсно необхідні
  • Налагодження коду щоб спробувати схуднути
  • У багатьох випадках, безпосередньо вставте код CSS в html може бути дійсним варіантом

Оптимізуйте код JavaScript (JS)

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

Перше, що потрібно зробити, це перевірити веб-сторінку та видалити весь код JavaScript це не потрібно для вимог, які ми маємо на нашому веб-сайті. Отримавши лише основні сценарії, ми можемо застосувати ці 3 поради:

  1. Скрипти, які не мають вирішального значення, повинні бути після завантаження, замість того, щоб завантажуватися першим.
  2. Завантажте всі зовнішні файли JavaScript так асинхронний, досить синхронно. Синхронно завантажені сценарії призупиняють процес візуалізації сторінки, тоді як асинхронно завантажені сценарії дозволяють браузеру завантажувати кілька елементів одночасно.
  3. Вважати помістіть деякі функції JS всередину (вбудовані) самої сторінки. Це дозволить нам зменшити кількість запитів, які повинен робити ваш браузер.

Оптимізуйте сервер (хостинг)

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

Час відповіді сервера є безпосередньо фактором оцінки Google PageSpeed ​​Insights. Цей час відгуку, на думку Google, може сповільнитися залежно від кількох факторів:

  • Кількість запитів до бази даних
  • Повільна маршрутизація
  • Використання певних фреймворків
  • Використання певних бібліотек
  • Низькі ресурси процесора
  • Низькі ресурси оперативної пам'яті

На додаток до цих факторів дуже важливим є наявність хорошого системного адміністратора для управління нашим хостингом. Таким чином, ви можете налаштувати та встановити програмне забезпечення, яке дозволяє Інтернету завантажуватися набагато швидше. Як, наприклад, використання статичного та динамічного кеш-систем.

У Kiwop ми оптимізуємо сервери за допомогою Nginx, Varnish, Redis Server, memcache тощо ...

Вже кажуть, що дешево дорого. І це правда, дешевий хостинг може бути дуже дорогим, коли мова йде про оптимізацію та швидкість веб-пошуку.

Стежте за використанням зовнішніх плагінів

Перш за все, якщо ми використовуємо WordPress, ми повинні бути пильними із використанням зовнішніх плагінів. У Kiwop кожна нова функція, яка потрібна веб-розробці, аналізується задовго до її реалізації. Замість того, щоб використовувати новий зовнішній плагін для кожної нової вимоги, ми спеціально програмуємо його, коли це можливо. Оскільки коли ми програмуємо його для вимірювання, ми включаємо лише ті функції, які нам дійсно потрібні. З іншого боку, зовнішні плагіни містять безліч функцій, які не є необхідними, а те, що вони роблять, - це затримка часу завантаження сторінки.

Розмістіть пріоритети на вмісті у верхній частині сторінки

Хоча це здається дивним, швидкість сторінки залежить не тільки від того, наскільки швидко вона завантажується. Це також пов’язано з сприйнятою продуктивністю. Сприйману ефективність можна визначити як "наскільки швидко веб-сайт завантажується". І це може відрізнятися від фактичного часу зарядки. Сприймана продуктивність пов’язана з перспективою користувача.

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

Впровадити AMP

AMP - це технологія, створена Google, яка забезпечує набагато швидший досвід завантаження сторінок на мобільних пристроях. AMP обмежує використання HTML та JS, значно збільшуючи швидкість сторінок і до речі, покращення позиціонування.

Застосування AMP дозволить нам збільшити оцінку Google Page Insights, особливо на мобільних пристроях. Хоча це технологія, яку потрібно розробляти з великою обережністю, оскільки вона може повністю деконфігурувати будь-яку веб-сторінку.

Ми експерти в технології AMP. Фактично, весь наш веб-сайт є дійсним AMP:

Яку оцінку ми отримали за Kiwop в тесті Google

Після всіх теоретичних порад, які ми дали вам, ми вважаємо, що для вас насправді важливо знати, чи працюють ці поради. Так вони працюють. У Kiwop ми отримуємо 89 нот у мобільній версії та максимальна нота - 100 у настільній версії в Google PageSpeed ​​Insights. Ви не вірите? Ось тест у настільній версії:

І ось тут ми також показуємо підтвердження оцінки, отриманої в мобільній версії, оскільки більшість людей завжди забувають показати цю примітку, оскільки вона набагато нижча, ніж примітка до настільної версії:

Зробіть тест самостійно: перейдіть на сторінку Google PageSpeed ​​Insights, у полі URL введіть https://www.kiwop.com, і ви побачите це на власні очі 🙂

Ви хочете, щоб Kiwop оптимізував ваш веб-сайт, щоб покращити оцінку Google? Ми повинні попередити вас, що якщо ви хочете мати ті самі примітки, що і ми, нам доведеться створити нову веб-сторінку.

Висновки

Напевно, ви доклали багато зусиль (за часом та ресурсами) для розробки свого веб-сайту. З яким, ви хочете, щоб це було максимально досконало. А висока швидкість є важливим фактором.

На додаток до тесту Google, є й інші сторінки, які дозволяють оцінити швидкість нашої сторінки, наприклад GTMetrix (примітка - це комбінація PageSpeed ​​та YSlow) або WebPageTest. В обох тестах наша сторінка також отримала чудові результати:

Як ми вже бачили, кожне зображення, елемент тощо ... потрібно враховувати при отриманні хорошої оцінки. Ось чому при розробці вашого веб-сайту важливо мати експертних розробників.

Оцінка 100 на тесті швидкості Google PageSpeed ​​Insights може дати вам прискорення, щоб ваш веб-сайт повинен бути успішним. У Kiwop ми будемо раді допомогти вам!