→ Pagespeed insights впливає на видачу. Правда і міфи про Google PageSpeed ​​Insights

Pagespeed insights впливає на видачу. Правда і міфи про Google PageSpeed ​​Insights

Ми випустили нову книгу «Контент-маркетинг у соціальних мережах: Як засісти в голову передплатників та закохати їх у свій бренд».

Google pagespeed insights - це один із найпопулярніших інструментів перевірки показників швидкості завантаження та роботи сторінок веб-сайтів

Що таке google pagespeed insights

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

Pagespeed insights – персональний тренер бігуна – тобто нашого сайту. Він уважно аналізує динаміку завантаження, виділяє проблемні області, і дає поради щодо виправлення помилок, що призводять до зниження швидкості.

Як користуватися pagespeed insights

Щоб скористатися інструментом онлайн вимірювання швидкості завантаження сайту, перейдіть на офіційну сторінку сервісу. Введіть URL-адресу сторінки і натисніть кнопку «Аналізувати».

За результатами аналізу буде виведено характеристику вашого ресурсу з точки зору оптимальних швидкісних параметрів. Окремо представлені вкладки мобільного сканування та аналізу з точки зору продуктивності комп'ютера.

Ставлення отриманих балів до максимального стобального результату виражає рівень оптимізації сайту. Значення 50-70% є середніми показниками більшості ресурсів, які не замислюються про покращення швидкості завантаження. 80-90% означає, що ви ґрунтовно підготували сервер та сторінки. Стовідсотковий результат є великою рідкістю, але іноді трапляється.

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

Для адміністраторів багатьох порталів залишається загадкою, як отримати заповітні 100\100 в Google Pagespeed Insights. Виявляється, досягти практично ідеального результату можна легко, дотримуючись основних прийомів оптимізації.

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

Найприскіпливіша стаття в чек-листах. Усі зображення на сайті мають бути максимально стислими. Способів вирішення проблеми багато:

  • Спробуйте зберігати всі внутрішні картинки у форматі.jpg та якістю 0.5-0.7
  • Використовуйте спеціальні інструменти стиснення: TinyPNG або compressor.io
  • Встановіть спеціальні скрипти для завантаження заготовлених обрізаних зображень.
Максимально використовуйте кеш браузера

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

“

Header set Cache-Control "max-age=40200"

Header set Cache-Control "max-age=624800"

Header set Cache-Control "max-age=2552000"

Header unset Cache-Control

”

Підключіть стиск

Якщо ви колись не ввімкнули стиск на стороні сервера, потрібно це зробити прямо зараз. Є два варіанти стиснення. При встановленій CMS підключіть стиснення в панелі керування, якщо CMS немає, перейдіть до конфігурації Apache і увімкніть Gzip-стиск там.

Щоб перевірити, чи працює стиск, оновіть сайт і розгляньте надіслані браузеру заголовки. Якщо там є рядок Content-Encoding: gzip, все пройшло чудово.

Мінімізуйте обсяг CSS та JavaScript

Усі.js файли повинні бути мініфіковані. Для популярних бібліотек є спеціальні видання у форматі min.js. Якщо ви не знайшли таку редакцію або маєте власний код, до ваших послуг надаються онлайн-мініфікатори, наприклад Closure Compiler.

З кодом CSS допоможуть розібратися такі ж мініфікатори, наприклад cssminifier.

Оптимізуйте завантаження видимого контенту

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

Завантажте блокуючий код наприкінці сторінки

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

У результаті, якщо угорі сторінки виявляються великовагові бібліотеки, сторінка може висіти білим екраном кілька секунд, чекаючи завантаження файлів.

Існує три важливі поради щодо виправлення цього пункту.

  • Майте основні дизайн-стилі вгорі документа, а необов'язкові.css стилі довантажуйте у footer-блоці

“function addCss(fcss) (
xh = window.XMLHttpRequest? new XMLHttpRequest: new ActiveXObject("Microsoft.XMLHTTP");
xh.open("GET", fcss, !1);
xh.send();
var at = document.createElement("style");
at.innerHTML = xh.responseText;
document.head.appendChild(at);
}
addCss("default.css");”

  • Скрипти JavaScript завжди розміщуйте на самому кінці сторінки, щоб вони не заважали завантажувати сторінку.
  • Якщо є можливість, настройте асинхронне завантаження.js скриптів.
Скоротіть час відповіді сервера

Намагайтеся підібрати оптимальну конфігурацію веб-сервера для швидкої віддачі контенту. Першим кроком буде встановлення зв'язки Nginx+Apache для миттєвої віддачі статики кешуючим проксі.

Варто пам'ятати, що всі серверні скрипти затримують завантаження сторінки до закінчення своєї роботи.

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

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

На що впливає швидкість завантаження сторінки

Виникає закономірне питання: для чого ми покращуємо ці параметри, і як вони позначаються на просуванні сайту?

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

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

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

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

Проте нововведень у гугла багато.

Google оголосив, що швидкість завантаження сторінок сайту стане фактором ранжування у мобільному пошуку, починаючи з липня 2018 року. Нововведення назвали Speed ​​Update і воно вплине на «невеликий відсоток запитів», запевнили в Google. Санкції загрожують тільки сторінкам, що завантажуються повільно і надають негативний досвід користувача.

Апдейт набуде чинності в липні 2018 року, тому вебмастер має час підготуватися. Google радить скористатися інструментом PageSpeed ​​Insights, а також Lighthouse.

Крім цього, Google представив відповіді на найпопулярніші питання щодо Speed ​​Update :

Google, як і раніше, буде використовувати десктопний показник швидкості для десктопного індексу?

Так, тут все залишиться без змін.

Враховуючи запуск mobile-first індексу, чи не буде при ранжируванні на десктопах враховуватись лише швидкість мобільного сайту?

Ні, зміна стосується лише мобільного пошуку.

А що щодо сайтів, які отримали результат "Unavailable" у Page Speed ​​Insights? Як їм підготуватись до нововведення?

Власникам сайтів потрібно подумати про продуктивність своїх ресурсів. Для покращення показників сайтів вони можуть використовувати будь-які звичні інструменти.

PageSpeed ​​Insights використовує дані зі звіту про користувальницький досвід користувачів Chrome. Для сайтів, які не увійшли до вибірки звіту, рекомендується використовувати Lighthouse.

Можете назвати відсоток запитів, які торкнуться нововведенням?

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

Наскільки сильно сайт втратить у позиціях у разі потрапляння санкції?

Швидкість – це один із багатьох факторів ранжирування. Не забувайте, що сенс – це «сильний» фактор, і повільна сторінка з релевантним контентом все одно може ранжуватись досить високо.

Чи будуть якісь повідомлення в Search console, чи нововведення є абсолютно алгоритмічним?

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

Speed ​​Update використовує ті ж дані, що й PageSpeed ​​Insights – досвід користувачів Google Chrome?

Google не може розкрити цю інформацію.

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

Для початку зазначимо, що PageSpeed ​​Insights має лише опосередковане відношення до Google. Цей сервіс підтримується та розвивається незалежним ком'юніті web-майстрів та розробників та прямого відношення до пошукового гіганта він не має. Тобто його рекомендації ґрунтуються на думці сторонніх людей, а не виходять безпосередньо від Google.

Ще один факт, на який не всі звертають увагу. PageSpeed ​​Insights зовсім не показує реальну швидкість завантаження сайту. Бал, який він видає – це внутрішня метрика сервісу, а чи не дійсна швидкість завантаження сторінки.

Існують інші інструменти, які показують реальну швидкість завантаження. Наприклад, webpagetest.org або tools.pingdom.com. Але навіть їхнім порадам сліпо слідувати не варто, тому що призначення таких сервісів у тому, щоб допомогти знайти баланс між швидкістю завантаження сайту та його функціональністю. Саме так, знайти баланс, а не зробити сайт блискавично швидким на шкоду решті.

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

Швидкість завантаження сайту не така важлива, як його релевантність. На даний момент показник швидкості завантаження впливає на видачу менш ніж 1% результатів пошуку.

Тож чи варто взагалі прислухатися до порад PageSpeed ​​Insights? Так. Але з розумом.

Наприклад, якщо сервіс каже, що картинки на сайті дуже великі і їх варто зменшити на 80% – це потрібно зробити. Але якщо ви отримали рекомендацію «Видалить код JavaScript і CSS, що блокує відображення верхньої частини сторінки», то сліпо слідувати їй не варто, адже часто такі дії призводять до помилок у роботі сайту.

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

І вже тим більше не варто гнатися за заповітним показником у 100 балів – практично недосяжним ідеалом швидкості завантаження сайту, який навіть Google.com не завжди набирає. Прагнучи підвищити швидкість завантаження сайту, потрібно зіставляти витрати на оптимізацію та підсумковий результат. У багатьох випадках підвищення рейтингу на 3-5 балів не коштує витрачених сил, часу та грошей.

  • Використовуйте кешування в браузері та стиснення gzip/deflate. У випадку, якщо у вас стоїть apache, це налаштовується в htaccess.
  • Оптимізуйте зображення. Видалення непотрібної інформації та стиснення картинок здатні значно зменшити їхню вагу.
  • Скоротіть ресурси javascript, css, html код. Якщо сайт знаходиться на стадії розробки, то для зручності редагування коду цей пункт краще залишити на потім.
  • Використовуйте нову версію HTTP/2. Він більш ефективний, надійний і схильний до меншої кількості помилок.
  • Перейдіть на PHP7. Працює більш ніж удвічі швидше, ніж його попередня версія.
  • Зменшіть час відповіді сервера. Залежить від серверів вашого хостера, їх завантаженості та ненажерливості вашого проекту.
  • Якщо не хочете ставити плагіни, то можете модифікувати дані прямо у файлі.htaccess, що лежить у кореневій папці сайту.

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

print

PageSpeed, або якщо бути точнішим PageSpeed ​​Insights — це продукт компанії Google, за допомогою якого можна легко знайти недоліки свого сайту. Під вадами ми розуміємо лише технічні моменти, які сервіс пропонує виправити.

Що таке Pagespeed insights і навіщо він потрібний?

Pagespeed insights - це сервіс для оцінки якості сайту, а саме: швидкість його завантаження на мобільних пристроях і ПК. Найголовніше – це безкоштовний сервіс рекомендацій для розробників веб-сайтів щодо прискорення сторінки у браузері клієнта. Алгоритми сервісу постійно змінюються, тому сервіс постійно вдосконалюється і дотримується всіх вимог пошукової системи Google.

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

Оскільки швидкість підключення у різних користувачів різна, PageSpeed ​​Insights розглядає лише незалежні від мережі аспекти роботи сторінки: конфігурація сервера, структура HTML, використання зовнішніх ресурсів (зображень, JavaScript та CSS). Використовуючи наші рекомендації, ви зможете оптимізувати відносну швидкість завантаження сторінки. Абсолютна швидкість завантаження в кінцевому підсумку все одно залежить від швидкості підключення до мережі.

Pagespeed використовує свою систему оцінок, яка відповідає різному ступеню важливості:

Важливо! Усі помилки, які знаходить сервіс є лише рекомендаціями і є обов'язковими. Застосувавши всі рекомендації сервісу можна прискорити відносну швидкість завантаження сайту. Це означає, що ви зробили все, що від вас залежить, щоб сайт вантажився максимально швидко.

Переваги та недоліки Google Пейдж Спід

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

  • Не завжди вдається знайти баланс між швидкістю завантаження сайту та гарним зовнішнім виглядом. Потрібно визначитися, що ми хочемо: швидкий чи гарний сайт? І те, й інше отримати практично неможливо.
  • Оцінка мобільних сайтів повторює помилки для ПК, додаючи лише фрагмент про компонування елементів сторінки на маленьких екранах. Це не зовсім адекватний показник, адже Mobile-friendly є фактором ранжування. Тому, якщо хочете підтягнути мобільну версію сайту, потрібно використовувати окремий звіт Google.
  • Сервіс не показує прискорення завантаження сторінок сайту в абсолютному вираженні секундах або хвилинах (якщо все настільки погано). Він лише враховує бали (від 0 до 100), які завжди характеризують реальну швидкість завантаження сайту.
  • Сервіс видає великі рекомендації щодо виправлення та вказує конкретні файли, які потребують оптимізації. Крім того, вже оптимізовані скрипти, стилі та картинки можна завантажити прямо зі сторінки з результатами для комп'ютерів.
Як досягти оцінки 100/100 на PageSpeed ​​Insights

Усі власники сайтів вважають, що якщо у них буде 100/100 у результатах, їхній сайт відразу вийде в топ. Насправді, це не так. По-перше: не тільки швидкість завантаження впливає на позиції сайту. По-друге: досягти позначки в 100/100 практично неможливо (якщо ви хочете сучасний та модний сайт). Оптимальним вважається варіант від 85 і вище, але кожен сайт або система CMS є окремим випадком і їх потрібно розглядати окремо.

Серед основних перешкод на шляху до досягнення заповітних 100 балів у гугл пейдспід можна виділити:

  • некоректне відображення сайту, при переміщенні скриптів та стилів у футер;
  • відсутність можливості кешувати ресурси, що завантажуються зі сторонніх серверів (кнопки соціальних мереж, віджети та багато іншого);
  • відсутність можливості мінімізувати ресурси (JS, CSS), що завантажуються зі сторонніх серверів;
  • Якість стиснення зображень, які влаштують сервіс, не дуже добре виглядають.

    • Про те, як звичайному сайту на WordPress набрати 99/100 у PageSpeed ​​Insights написано на хабрі. Цікава стаття, можливо, вона буде корисна не тільки сайтам на , але і на інших CMS. Також можна використовувати сторонні плагіни, які самі оптимізують сайт: або під пейдспід, або під швидкість завантаження.

    Google PageSpeed ​​- інструмент, який дозволяє перевірити швидкість роботи сайту. Він дозволяє оцінити швидкість завантаження для стаціонарних ПК та для мобільних пристроїв та видає рекомендації, які можуть бути використані для оптимізації.

    Результат аналізу швидкості завантаження сайту виглядає так:

    Перевірити швидкість роботи сайту з Google PageSpeed ​​Insights та рекомендації сервісу

    Після проведення аналізу швидкості завантаження сайту найчастіше можна отримати такі рекомендації:

    Optimize images

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

    Enable Compression

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

    Leverage browser caching

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

    Eliminate render-blocking JavaScript і CSS в додатковій кількості

    JavaScript за замовчуванням виконується в міру того як завантажується сторінка, схожим чином обробляється CSS. Тобто. Якщо JS скрипт підключений у тілі документа, його рендеринг щоразу переривається до того часу, поки скрипт виконано буде. Уникнути цього можна додаючи при підключенні JavaScript і HTML тіло сторінки буде рендерувати незалежно від виконуваного коду.

    Наприклад, JS в асинхронному режимі можна підключити так:

    Minify CSS

    Мініфікація CSS передбачає видалення зайвих пробілів та переносів рядків, що дозволяє скоротити час обробки браузером та збільшити швидкість завантаження сторінки для клієнта

    Minify HTML

    Опція аналогічна до попередньої, але має відношення до HTML коду. Для мініфікації HTML і CSS можна використовувати OpenSource програмні продукти, посилання куди розміщено на сайті сервісу.

    Avoid landing page redirects

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

    Prioritize visible content

    В даному випадку перевіряється розмір контенту, який повинен завантажуватися при переході на головну сторінку сайту, оптимізація не потрібна, якщо обсяг даних становить менше 14.6kB стиснутої інформації, що відповідає розміру congestion window у протоколі TCP і означає, що не потрібно повторне встановлення з'єднання для передачі інформації , яка може бути передана одноразово.

    Reduce server response time

    Pagespeed Insights видає попередження про повільну відповідь сервера у разі якщо вміст сторінки віддається менш ніж за 200 мс.

    Google PageSpeed ​​є дуже корисним інструментом для оптимізації роботи сайтів, але не слід довіряти йому беззастережно. Інформація, що видається Google PageSpeed ​​не завжди коректна і щоб зрозуміти критерії, які оцінюються, краще звернутися до документації.

    Зокрема, часто буде відображатися попередження, що кешування не використовується, хоча фактично

    Важливість швидкості завантаження

    Google Pagespeed Insights – інструмент для оцінки якості оптимізації сторінок в інтернеті. Основний показник, яким оперує пропонований у ньому аналіз – швидкість завантаження сторінки. Дана метрика є однією з ключових, будучи важливим фактором поведінки, про який у нас є .

    Як мінімум, з точки зору користувача, необхідно, щоб сайт працював швидко - це економить наш час і приносить позитивний досвід.

    Навчивши на великих даних про поведінку користувачів нейронну мережу, з метою передбачення конверсій та bounce rate. В результаті, з'ясувалося, що за час завантаження сторінки від 1 до 10 секунд ймовірність відмови підвищується на 123%. Навіть при затримці до 3 секунд вона росте на третину.

    У січні 2018 було оголошено, що з липня цього року Google вводить page speed як фактор ранжування для мобільного пошуку. Це з згаданим дослідженням, у якому ясно показано: швидкість має значення. Тут Google рекомендує розробникам зайнятися оптимізацією своїх сайтів та пропонує для аналізу їх ефективності використовувати інструменти:

    • Chrome User Experience Report. Відкриті дані щодо ключових метриків поведінки користувачів у популярних сегментах інтернету.
    • Lighthouse. Автоматичний аудит веб-сторінок, який є частиною Chrome Developer Tools.
    • PageSpeed ​​Insights. Інструмент, що визначає рівень оптимізації сторінок і пропонує шляхи поліпшення їх параметрів.

    Вторять корпорації та SE-оптимізатори. Часто за результатами аудиту у звітах вони наводять підсумки перевірки Pagespeed Insights. Фахівці рекомендують замовникам усунути всі недоліки, виявлені в ході тестування.

    Про що говорить Google Pagespeed Insights

    Все говорить про те, що швидкість завантаження сайту - найважливіший показник, що впливає і на лояльність користувачів, і позиції у видачі. Як допоможуть Google Insights у покращенні цієї метрики?

    Хтось буде розчарований чи неприємно здивований, але Pagespeed Insights – це не повною мірою про швидкість.

    • Цей інструмент не вимірює швидкість завантаження сторінок.
    • Показник Page Insights не впливає на ранжування.
    • Різниця в показниках між двома сайтами не говорить про якість одного та другого щодо один одного.

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

    Перевіримо вірність затвердження на запит авіаквитки.

    Два топові сайти показують гнітючі, з погляду сервісу, показники.

    А сайт Артемія Лебедєва, присвячений московському метрополітену, написаний на HTML, ідеальний на думку Pagespeed Insights.

    Розробникам, яких цікавить швидкість завантаження сайту, будуть корисні послуги:

    • Pingdom інструменти. Безкоштовний інструмент, що відображає докладні метрики performance сторінки та підсумковий бал.
    • WebPageTest. Інструмент для професійних веб-аналітиків, розробників та оптимізаторів. Дає розгорнуту інформацію за багатьма специфічними показниками, з яких час завантаження сторінки та кількість запитів – найповерхніші.
    • GTmetrix. Один із найкращих сервісів. Формує звіт про час та швидкість завантаження, враховує повний перелік параметрів оптимізації.

    Докладніше про такий фактор, як швидкість завантаження сайту читайте .

    Як прискорити завантаження свого сайту на будь-яких пристроях

    Тим не менш, за допомогою Google Pagespeed Insights ви можете визначити недоліки сторінки, щоб виправити їх та оптимізувати завантаження.

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

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

    Використовуйте графічний редактор: в ідеалі – Photoshop, на крайній випадок – Paint. Перший має параметри збереження картинок у форматі web, що покращує якість оптимізації. Якщо неможливо застосувати жоден із редакторів, можливо, ваш сайт працює на CMS, у функціоналі якої передбачено обрізання зображень.

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

    • Підберіть формат

    У випадку calltouch.ru Google радить змінити формат ряду зображень. Він каже, що JPEG 2000, JPEG XR та WebP більш оптимізовані для Інтернету, ніж використовувані нами PNG.

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

    Намагайтеся вдаватися до JPEG для розміщення фотографій. Ілюстрації та технічну графіку зберігайте у PNG. Векторні зображення ідеально підходять для SVG.

    • Стискайте зображення

    Ось зараз саме час стиснути картинки і за вагою. В інтернеті є кілька безкоштовних або частково платних сервісів, які зменшують розмір картинок без втрати якості:

    • https://tinypng.com/
    • https://punypng.com/
    • https://compressor.io/

    Ці послуги дають стиск від 30% до 80% без візуальних дефектів.

    • Використовуйте атрибути з правильним розміром

    Якщо розробник завантажує велике зображення і обмежує його до меншого атрибутами width і height, йому здається, що оптимізував свій час. Але він насправді забрав час у користувача, який завантажить файл повністю, а побачить його в зменшеному розмірі.

    Для полегшення завдання пакетного стиснення Google пропонує завантажити стислі під час діагностики картинки в архіві. Ви можете розпакувати їх прямо в директорію відповідної сторінки та оновити старі зображення. Пакетний стиск краще провести в PunyPNG.

    Оптимізація JavaScript та CSS

    Google Pagespeed Insights зазвичай рекомендує скорочувати JavaScript і CSS. Зазвичай це порада перенести скрипти та стилі у футер. Але не поспішайте дотримуватися цих рекомендацій.

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

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

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

    • Скорочення CSS

    Щоб не вдаватися до ручної редагування, можна скористатися онлайн-інструментами стиснення файлів стилів. Наприклад, CSScompressor . У ньому є 3 ступені стиснення: Light, Normal, Super Compact, і 3 опції скорочення коментарів: не видаляти, видалити всі, видалити коментарі певної довжини. Доступний Advanced Mode для професійних налаштувань.

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

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

    • Скорочення JavaScript

    Для такого завдання підійде інструмент Online YUI Compressor. Його можна використовувати і для полегшення CSS.

    Просто вставте код у вікно та запустіть стиск. Після процедури замініть код у своїх файлах на сайті та перевірте його продуктивність.

    Інтернет є єдиним простором без відстаней, але це не так. Насправді віддаленість серверів відіграє велику роль. CDN реалізує функціонал переміщення контенту сайту – скриптів, стилів чи зображень у спеціальну мережу.

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

    GZIP стиск

    GZIP - це тип стиснення, концептуально схожий зі звичайним стиском файлів на комп'ютері, але в Інтернеті. Файли, які забезпечують відображення сторінки, завантажуються із сервера у стислому вигляді. Існує цілий перелік алгоритмів стиснення, але gzip найбільш застосовний і популярний в інтернеті. Його підтримують будь-які сучасні браузери.

    Існує 2 типи стиснення gzip: динамічний та статичний.

    • Динамічний стиск

    У цьому випадку файли архівуються прямо на сервері, надсилаються користувачеві та розархівуються у браузері. Такий підхід є ефективним, але створює навантаження на сервер, що може бути неприйнятним для деяких власників сайтів.

    Метод реалізується за допомогою редагування файлу htaccess, що знаходиться в кореневому каталозі ресурсу, розташованого на сервері Apache. Якщо сайт працює на Nginx, підхід не спрацює. Вам необхідно буде включити до файлу відповідні модулі або зв'язатися з адміністрацією, якщо ваші можливості обмежені у цьому питанні.

    • Статичний стиск

    При статичному стиску ресурси сервера не використовуються, хоча при цьому зникає можливість динамічного стиснення HTML - метод працює зі статичними скриптами та CSS.

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

    Використання кешу

    Як і при стисканні, для впровадження кешування існує невеликий нюанс – сервер має працювати під Apache. В іншому випадку вам так чи інакше доведеться зв'язуватися з адміністрацією хостингу.

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

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

    За допомогою заголовків Last-Modified та ETag забезпечується оновлення кешованих файлів на пристрої користувача. Браузер відправляє GET-запит при завантаженні сайту та отримує відповідь 304 - що означає відсутність змін та дозвіл використання контенту з пристрою. Також слід прописати період зберігання файлів через Expires або Cache-Control.

    Найчастіше зберігаються на машині файли зображень, стилів і скриптів.

    Чи варто користуватися Google Pagespeed Insights

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

    • Оптимізація JavaScript та CSS;
    • Оптимізація зображень;
    • Стиснення gzip;
    • Кешування у браузері.

     

     
    Це цікаво: