Швидкість сайту Google. Інструменти для перевірки швидкості завантаження сторінок сайту. Google Page Speed

Завдяки впровадженню передової технології візуалізації даних, міток, фільтрації і моментальних знімків, швидкість для сайту Google надає комплексне рішення для будь-якого веб-майстра, який хоче підвищити ефективність свого сайту, рейтинг пошукової системи і кількість відвідувачів. Якщо сторінка сайту завантажується повільно, виявити проблему не завжди легко. На щастя, є безкоштовний інструмент, який користувач може застосувати, щоб точно дізнатися, що уповільнює завантаження сторінки. Google PageSpeed Insights - це інструмент, який дозволяє швидко і легко тестувати швидкість сторінки. Для перевірки достатньо ввести URL-адресу та натиснути «Аналізувати», щоб швидко отримати докладний звіт про швидкості сайту від Google про причини уповільнення цієї сторінки на основі двох параметрів з рекомендаціями щодо її усунення.

Досконалий оціночний показник сайту

За інформацією Google, система перевіряє працездатність сторінок для мобільного і настільної версії, витягуючи URL один раз за допомогою мобільного агента і другий - з допомогою агента робочого столу ПК. Показник PageSpeed варіюється від 0 до 100 балів. Більш високий бал, звичайно ж, краще, а оцінка 85 і більше - відмінний показник швидкості сайту від Google. Якщо власник бачить у своєму звіті багато червоних і жовтих кольорів, це пов'язано з тим, що на сторінці є серйозні проблеми із завантаженням. Інструмент повідомить про ці проблеми, хоча повідомлення про помилки можуть бути трохи важкими для розуміння. Ось, що може отримати розробник у повідомленні сервісу:


Потрібно уникати переадресації цільової сторінки, щоб забезпечити тестовану швидкість сайту від Google. Якщо сторінка не була спроектована оперативно, результатом може бути кілька переадресацій на сторінки, оптимізованих для різних пристроїв. Включити стиснення. Сьогоднішні браузери оснащені функцією, щоб обслуговувати меншу альтернативну версію сторінки для користувачів інтернету. З включеним gzip-компресором ці сторінки можуть зменшуватися на 90%. Мінімізація CSS, HTML, jаvascript. Це відноситься до видалення непотрібних даних. Погана кодування може бути причиною поганої роботи сайту, і її можна усунути кількома різними способами. Пріоритет вищеописаного контенту. Швидкість відкриття сторінок залежить не тільки від того, як швидко завантажується сторінка. Це також стосується «сприйманої продуктивності». Якщо код структурований неправильно, результатом може бути зниження сприйманої продуктивності в свідомості користувача, навіть якщо швидкість завантаження сайту в нормі. Прискорити час відгуку сервера. Це час, необхідний для сервера початку завантаження вмісту сторінки для користувача, може сповільнюватися низкою чинників у відповідності з вимогою Google. Якщо потрібно, щоб сайт був блискавичним і забезпечив хорошу швидкість, краще оплачувати гідний веб-хостинг. Усунути jаvascript з блокуванням візуалізації. Java дозволяє використовувати деякі потужні сторонні інструменти та інтерактивні елементи сторінки. Проблема в тому, що Java також зупиняє розбір HTML-коду. Кешування браузера після перевірки швидкості роботи сайту Google Page Speed. Рекомендується виконувати кешування з періодом не більше семи днів, а для незмінних елементів один рік. Оптимізація зображень. У блозі Google тестувальники спеціально попереджають про загрозу зображень для швидкості сайту.

Прискорення завантаження сторінок

Перевірка швидкості роботи сайту Google - справа добровільне. Згідно з Google, веб-сайт може втратити до половини своїх відвідувачів при завантаженні. Це означає, що вони хочуть, щоб час завантаження було коротким і приємним, щоб максимізувати користувальницький інтерфейс. Тим не менш звіти MachMetrics показують, що час завантаження сторінки все ще надто повільне. Це цінна інформація, але далі власник сайту повинен зосередитися на поліпшенні оцінки.
При цьому потрібно звернути увагу на список пропозицій, які є у Google. Вивчивши ці поради і подивившись, як зміниться час завантаження сторінки, можна в цілому отримати більш швидкий сайт. Щоб перевірити швидкість завантаження сайту Google Speed, використовують функцію PageSpeed Insights, яка працює з установленим переліком правил швидкості і зручності використання. Пропозиції щодо підвищення ефективності будуть засновані на регулярно оновлюваних правилах Google, щоб відповідати новітнім передовим методам роботи сайтів. Це означає, що поліпшення оцінки сьогодні не може гарантувати високий бал через шість місяців або рік. Не варто робити непотрібні зміни для мобільних або настільних комп'ютерів, якщо проблема є одиничною. Користувальницький інтерфейс Google для цієї системи фантастично простий. В ньому є розділи «Можливі оптимізації» і «Знайдені оптимізації».
Перевірити швидкість завантаження сайту Google Speed в категорії «Знайдена оптимізація» нескладно, оскільки перевіряється сторінка вже виконує вимоги Google, хоча і це може змінитися з плином часу. Поки ж потрібно зосередитися тільки на можливостях оптимізації. У списку від Google можна знайти короткі пропозиції, такі як «мінімізувати HTML» або «приоритезировать видимий контент». Більшість розробників інтерфейсів розуміють, що це значить, і знають, як вирішити проблему відразу. Якщо недосвідчені власники сайтів не знають цього, вони можуть просто натиснути на текстове повідомлення «Показати, як виправити» у кожної пропонованої оптимізації, щоб розширити свої знання і вивчити всі основні кроки для усунення проблеми. І робити це потрібно з кожної оптимізацією, щоб розробники дійсно могли максимально використовувати можливості PageSpeed Insights.

Процес вимірювання

Вимірюють час завантаження сторінки. Після оцінки швидкості сайту Google виконують оптимізацію, яку рекомендує Google PSI. Вимірюють час завантаження сторінки ще раз. Якщо це зробить сайт швидше, зберігають зміни. В іншому випадку скасовують їх. Повторюють, доки не буде виконано все те, що пропонує PSI. Цей процес проб і помилок є громіздким, але якщо є моніторинг швидкості, то він усуває половину проблем. Google використовує значення PageSpeed Insights для нульового значення відносно параметрів, які, швидше за все, викликають затримку при завантаженні. При виправленні цих конкретних проблем і у розробника буде веб-сайт з більш швидким завантаженням. Знову ж таки, оцінка не всезнаюча. «Кращі практики» просто означають, що PageSpeed Insights фокусується на тому, що, швидше за все, змінить ситуацію, і він широко використовується для підвищення продуктивності. Аналіз може відрізнятися. У кінцевому рахунку, використовувати рекомендації PageSpeed Insights краще, ніж просто залишити сайт у вільному плаванні в інтернеті.

Переадресації цільової сторінки

Після перевірки швидкості завантаження сторінки сайту Google функція PageSpeed Insights виявляє, що на сайті є більше одного перенаправлення з даного URL-адреси на кінцеву цільову сторінку. В якості прикладу можна навести ланцюжок перенаправлення наступним чином: example.com -> https://example.com -> https://www.example.com. Замість цього правильна версія повинна бути такою: example.com -> https://www.example.com. Часто виникає множинна ланцюжок перенаправлення, тому що є дві частини коду, кожна з яких обробляє свою частину переадресацій. Скажімо, один файл коду обробляє перенаправлення https, а інший - переадресацію вручну зі старих URL-адрес сторінок на нові. Для того щоб виправити збій, збирають переадресації в одну «функцію».
Часто сайти містять такі види перенаправлення: Протокол (HTTP -> HTTPS). Домен (youtu.be -> youtube.com). Субдомен (youtube.com -> www.youtube.com). Сторінка youtube.com/old-url -> youtube.com/new-url). Якщо сайт працює на мобільній версії - в іншому домені, піддомені або вкладеній папці - це викличе непотрібне перенаправлення для всіх мобільних користувачів. Загальний приклад: example.com -> m.example.com. Ще гірший приклад: example.com -> www.example.com -> m.example.com. Google рекомендує створювати чуйний веб-сайт, тому точно такий же контент відображається для всіх пристроїв - просто масштабується і оформляється по-різному в залежності від ширини екрана пристрою. Інструментом, який можна використовувати в цьому випадку, є сервіс status.io, де можете легко ввести один або кілька URL-адрес, щоб перевірити, як вони будуть перенаправлятися.

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

Якщо тест швидкості завантаження сайту Google містить мінімальну кількість балів, розробник, для того щоб досягти високих результатів, повинен дотримуватися наступних рекомендацій: Зображення є найбільш поширеною причиною низьких показників PageSpeed. На більшості сайтів зображення складають більше 50% завантаженого контенту, тому можна істотно поліпшити ситуацію, оптимізуючи свої картинки. Як правило, більшість зображень на веб-сайті повинно бути менше 100 КБ. Повнорозмірні фони часто бувають більше, тому необхідна оптимізація. Тут Google все продумав. Він дає можливість завантажувати вже оптимізовані зображення в нижній частині звіту PageSpeed. Тоді все що потрібно зробити - це завантажити їх. Якщо використовується WordPress, то WP Smush - відмінний плагін для цих цілей. Він також включає можливість автоматичної зміни розмірів зображень і їх стиснення.

Внутрішні і зовнішні ресурси

Існує два типи ресурсів, які може завантажувати сторінка. Внутрішні - це ресурси на сайті, які контролюються розробником. Зовнішні - це ресурси, які завантажуються розробником з інших джерел в інтернеті і не контролюються ним. Останні найчастіше відображаються у блоці «Виключити». Ось що можна зробити для візуалізації блокуючих ресурсів, якщо аналіз швидкості сайту Google показав незадовільні результати: Внутрішні ресурси, які часто можна об'єднати в один, просто завантаживши оптимізовані файли jаvascript і CSS в нижній частині звіту PageSpeed. Або якщо є CMS, наприклад, WordPress, використовують плагін ти-mize для обробки комбінованих елементів. Деякі ресурси при об'єднанні можуть перестати працювати, тому переконуються, що зміни оборотні. Зовнішні ресурси, які можна зробити внутрішніми. Якщо завантажуються шрифти з інтернету, краще робити це зі свого сервера. Деякі внутрішні ресурси, які можна видалити з завантаження. Теми або плагіни на сайті можуть завантажувати ресурси, які їм дійсно не потрібні, тому що не використовують цю функцію. Таким чином, можна додати код на ваш сайт, щоб спеціально заборонити завантаження цих ресурсів. Деякі ресурси, які можна замінити чимось іншим, для чого потрібна менша кількість часу для завантаження. У деяких зовнішніх ресурсах розробники нічого не можуть зробити, тоді він застряє. Для кешування браузера додають код в файл .htaccess або звертаються в свою хостингову компанію для включення кешування браузера для внутрішніх ресурсів. Якщо розробник нічого не може зробити з зовнішніми ресурсами і кешування браузерів, краще звернутися за допомогою до фахівців.

Мінімізація HTML і CSS

Для збільшення швидкості роботи сайту після Google-тестування виконують мінімізацію HTML і CSS. Це робиться шляхом видалення додаткових файлів на сайті. Цей додатковий матеріал зазвичай являє собою вкладки, прогалини і нові рядки - все те, що дозволяє людині читати, і це дійсно важливо для комп'ютера. Є три основних типи даних, які можна зробити менше: HTML; CSS; jаvascript. На більшості сайтів є багато файлів, які завантажуються. Але можна комбінувати декілька разом, щоб зробити їх менше, і майже завжди можна видалити зайвий матеріал. Якщо розробник використовує WordPress, ти-mize - це дуже хороший плагін для цього. Більшість сайтів можуть використовувати HTML і CSS без будь-яких проблем. Незалежно від того, працює чи JS minify, швидкість сайту залежить від того, які плагіни і теми використовуються. Відомо, що стиснутий файл займає менше місця, ніж вихідний. Той же принцип застосовується в інтернеті: стислі дані займають менше місця. Таким чином, головне - щоб було включено стиснення на веб-сервері, щоб воно могло зменшити розмір файлів, а потім файли меншого розміру швидше будуть передаватися на сайті. Це означає, що люди, які відвідують сайт, швидше отримують потрібну інформацію і почувають себе комфортно. На більшості веб-серверів можна включити стиснення gzip з невеликим доповненням до файлу .htaccess. Як варіант для цього можна звернутися до підтримки хостингу.

«Сприймається» продуктивність контенту

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

jаvascript з блокуванням візуалізації

При вимірі швидкості сайту Google PageSpeed Insights можна отримати пропозиція про усунення блокування коду jаvascript і CSS. Більшість веб-сайтів містять комбінацію HTML, CSS, jаvascript і PHP-коду, які додають контент, форматування та інтерактивність на сайт. При рендерінгу веб-сторінки браузер спочатку завантажує скрипти і код CSS, а потім переходить до HTML. Затримки при завантаженні скриптів і CSS завадять користувачам бачити будь-який контент на екрані, звідси і термін «блокування візуалізації». Хоча затримка може становити всього мілісекунди, сайт буде виглядати «повільним» для користувача. Існує безліч методів для виправлення сценаріїв блокування і CSS в WordPress, які оптимізують час завантаження сторінки. Найпростіший спосіб - використовувати плагін кешування. Ось ще два, щоб спробувати розробникам: Fix Render-Blocking Scripts і CSS з автооптимизацией. Ти-mize - популярний вибір для автоматичної оптимізації часу завантаження сторінки WordPress. Це дозволяє адміністраторам використовувати передові методи оптимізації коду, не вимагаючи експертних знань. Адміни можуть вибирати з меню опцій, щоб зменшити час завантаження сторінки, відкидаючи зміни, якщо відбуваються непередбачені події: Для початку входять в свою панель управління WordPress та вибирають «Плагіни»> «Додати новий». Знайти ти-mize, потім встановити і активувати плагін. Navigate to Settings> ти-mize, щоб переглянути конфігурацію плагіна. На вкладці «Головна » встановити прапорці «Оптимізувати код jаvascript» і «Оптимізувати код CSS», а потім натиснути «Зберегти зміни». Повторно перевіряють сайт за допомогою інструменту Google PageSpeed Insights і порівнюють результати.

Інструменти для поліпшення часу завантаження

Існує кілька інструментів, які можна використовувати для поліпшення швидкості сторінки або просто для того, щоб побачити, як працює сайт: Швидкість сторінки - це класика. Дає розробникам всі ключі і поради для поліпшення завантаження сторінки. Тест веб-сторінки - це інструмент Google. Пропонує безкоштовний тест швидкості, що містить графіки оптимізації сторінки. YSlow - цей плагін, який швидко показує, як працює сайт, і дає розробнику інформацію про те, як підвищити швидкість. Компресор YUI - цей інструмент допомагає стиснути код, мінімізуючи jаvascript і CSS. OnCrawl - пропонує чіткий огляд продуктивності сторінок і допоможе дізнатися, які з них слід оптимізувати першими.

Використання клавіш розробника Chrome

Веб-браузер Google Chrome включає в себе засоби для розробників. Вони допомагають усувати проблеми з допомогою HTML, CSS і[removed]. Для доступу до інструментів розробника на Microsoft Windows або Linux натискають Ctrl + Shift + I. Для того ж на Apple Mac OS X натискають Option + Command + I. У вкладці «Мережа» на панелі «Інструменти розробника» в Chrome перераховані всі підключення для поточної сторінки. Щоб протестувати певну сторінку, відкривають «Інструменти розробника» і переходять до неї. Крім того, якщо потрібно протестувати поточну сторінку, просто оновлюють її. Chrome відображає інформацію для кожного ресурсу сторінки та її запиту: Ім'я або URL запитаного ресурсу. Метод HTTP (GET або POST). Статус. Код стану HTTP, повертається сервером. Тип MIME ресурсу. Ініціатор - референт відправляється на сервер, зазвичай це URL-адресу показувалася сторінки. Розмір ресурсу, отриманий браузером (якщо сторінка була стиснута сервером, це значення менше фактичного розміру файлу). Загальний час для витягання ресурсу, включаючи пошук DNS і час завантаження. Терміни - тимчасова шкала являє собою блок даних з тимчасовим переглядом кожного запиту. Якщо навести вказівник миші на панель, з'явиться спливаюча підказка з детальним поділом часу завантаження: Блокування - включає час пошуку DNS, SSL-квитування і підключення до сервера. Відправка - включає час відправки запиту з усіма даними на сервер. Очікування - включає час, коли сервер повинен відображати контент, який буде обслуговуватися, і почати відправляти її в браузер. Прийом - включає час, необхідний для завантаження вмісту. Іноді сервер починає відправляти контент до його створення. Наприклад, скрипт PHP може почати відправку HTML, хоча він все ще динамічно генерує вміст сторінки. Цей тип сценарію може призвести до неправильним результатам часу очікування. Комбінація час очікування прийому - це найважливіший фактор у визначенні швидкості сайту. Швидкість підключення до інтернету також може вплинути на продуктивність, тому розробники завжди повинні порівнювати час, коли оцінюються критерії продуктивності сайту. У нижній частині вкладки «Мережа» представлена зведення процесу завантаження сторінки. Це резюме включає в себе загальну кількість запитів, розмір сторінки, в тому числі її ресурси, і розбивку часу, що витрачається на відображення сторінки в браузері. Після аналізу продуктивності завантаження сторінки на сайті власник буде мати краще уявлення про те, де він може зосередити свої зусилля по швидкісній оптимізації.