Розганяємо Google PageSpeed до 100 і більше
Прості і корисні поради, які дозволять вам максимально розігнати сайт без необхідності закопуватися в метриках Google PageSpeed і Lighthouse.
JavaScript
- Замість JavaScript намагайтеся частіше використовувати HTML5 теги: <input type=date>, <input type=time>, Details/Summary і т. д.
Ми дуже часто забуваємо або навіть не знаємо про готових рішеннях вбудовані в браузери, які краще будуть працювати під різними пристроями і які не потребують додаткового JavaScript коду.
- Використовуйте минификацию JavaScript коду.
- Постарайтеся винести весь ваш JavaScript код в футер або відкладену завантаження і чим менше JavaScript буде в <head>, тим краще будуть показники в Google PageSpeed.
- <script src=”шлях до файлу”> вимагає додаткового звернення до сервера, пам’ятайте про це.
Якщо замість JavaScript файлу, вставити в футері вміст файлу:
<script> вміст файлу </script>
Тоді перше завантаження буде швидше, але не буде кешування JavaScript файлу.
Відкладене завантаження
- Використовуйте ліниву (відкладену) для завантаження зображень, iframe, video, audio, javascript і інших подібних об’єктів. Її варто включати для елементів, які знаходяться в попапах або на другому і наступних екранах на сторінці.
Для цих цілей є безліч бібліотек: lazyload, lazysizes, autoload і т. д. - У Chrome можна використовувати нативну ліниву завантаження.
- ВК пропонує розміщувати підключення JavaScript коду в <head> для роботи їх віджета коментарів, але це знижує Google PageSpeed і швидкість завантаження сторінки.
Замість коду, який пропонує ВК:
<!-- Put this script tag to the <head> of your page --> <script type="text/javascript" src="https://vk.com/js/api/openapi.js?162"></script> <script type="text/javascript"> VK.init({apiId: ID, onlyWidgets: true}); </script> <!-- Put this div tag to the place where the Comments block will be --> <div id="vk_comments"></div> <script type="text/javascript"> VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); </script>
Вставляємо трохи змінений код під відкладену завантаження:
<div id="vk_comments"></div> <script onload="showvk()" data-aload data-original="https://vk.com/js/api/openapi.js?162"></script> <script> function showvk() { VK.init({apiId: ID, onlyWidgets: true}); VK.Widgets.Comments("vk_comments", {limit: 10, attach: "*"}); } </script>
В результаті отримуємо код, який завантажиться тільки коли екран дійде до віджета.
Код картки, який пропонує вставити Google на сайт:
<iframe src="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Якщо карта знаходиться в попапі або далеко в футері, то людина зайшовши на вашу сторінку, відразу ж почне довантажувати дуже багато зайвого з цього кадру і швидкість завантаження подібної сторінки буде дуже низькою, Google PageSpeed вам поставить мінус і великою!
Вставляємо трохи змінений код під відкладену завантаження:
<iframe data-aload data-original="https://www.google.com/maps/embed?pb=!1m14" width="600" height="450" frameborder="0" style="border:0;" allowfullscreen=""></iframe>
Все зводиться до того, щоб не давати браузеру src=”” відразу, а лише коли людині це реально знадобиться. І так з усіма об’єктами!
Jquery
- Якщо є можливість, то не використовуйте Jquery у себе в проектах і це значно підвищить швидкість вашого сайту, але якщо вже використовуєте, то поступово замінюйте на чистий нативний JavaScript.
- Якщо ви підключаєте Jquery в <head>, то це блокує відображення сторінки, так як браузер чекає поки завантажиться все що знаходиться в <head>, а вже потім показує сторінку. Але так як сама бібліотека маленька, а інет у всіх швидкий, то це слабо впливає на швидкість, гугл якщо і знижує рейтинг, то приблизно 0.5, хоча раніше 10 або 20 очок знімав за таке…
- Весь Jquery код, який ви написали або Jquery бібліотеки, які ви використовуєте, краще помістити в футер сайту, через блокування відображення. Якщо не можете перенести в футер, то можливо вам варто використовувати відкладене виконання коду, стаття на цю тему: Safely using .ready() before including jQuery.
Шрифти
- Google Fonts
- Якщо Google шрифт підключали давно, то обов’язково підключіть його за новою, так як важливо наявність в урлі &display=swap — це нова опція, яка впливає на Google PageSpeed і вона дозволяє показувати текст на сторінці до завантаження шрифту… не завжди це красиво, але збільшує швидкість відображення сайту… і впливає на Google PageSpeed
- Якщо є можливість замінити Google шрифти своїми шрифтами, то так і зробіть, краще якщо шрифти будуть на вашому сервері, це теж підвищує швидкість.
- Коли обираєте шрифт на Google фонтс, постарайтеся вибрати по мінімуму опцій, вибирайте тільки те, що вам потрібно, і якщо ви не використовуєте на сайті похилий шрифт або товщиною 200, то в налаштуваннях не вибирайте це, так як це вплине на швидкість завантаження.
- Свої шрифти
- Перевірте наявність css стилю font-display: swap; в ваших шрифтів, Google PageSpeed звертає увагу на це, і занижує показники, якщо цього стилю не варто:
@font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; }
- Якщо підключаєте шрифти через окремий файл стилів, то це впливає на час першого рендеринга і зменшує показники у Google PageSpeed, краще так не робити:
<link href="/fonts.css" rel="stylesheet">
Якщо ви підключення шрифту вставите в <head> через тег <style>, а не <link>, то це поліпшить швидкість завантаження і показники Google PageSpeed, так як браузер не потрібно буде окремо звертатися за вашим файлом стилів:
<head> <title>Demo</title> <style> @font-face { font-family: 'Saira Condensed'; src: url(sairacondensed.woff2) format('woff2'); font-display: swap; } </style> </head>
- Якщо є можливість, то приберіть все зайве, те що ви не використовуєте, з ваших файлів шрифтів, щоб підвищити швидкість завантаження.
- Можна зробити двоетапну завантаження шрифтів: Developing a Robust Font Loading Strategy for CSS-Tricks
- Перевірте наявність css стилю font-display: swap; в ваших шрифтів, Google PageSpeed звертає увагу на це, і занижує показники, якщо цього стилю не варто:
CSS
- Намагайтеся позбавлятися від зайвого CSS коду, під старі браузери, в тому числі від префіксів -moz- -o- -ms- -webkit-
- Намагайтеся не завантажувати стилі, які не використовуються на цій сторінці, але використовуються на інших сторінках сайту.
- Якщо є можливість, то варто довантажувати шматки CSS і HTML-коду через відкладену завантаження.
- Довантажувати стилі за допомогою <link href=’st.css’ rel=’stylesheet’> уповільнює першу завантаження сторінки і її рендеринг, але дає можливість кешування браузером цього файлу.
Якщо у вас унікальні стилі для кожної сторінки або вам важливіше, щоб перша завантаження сторінки була трохи швидше, то замість файлу вставляємо тег style:
<style> вміст файлу </style>
- Використовуйте минификацию CSS, наприклад Cssresizer або іншими подібними інструментами.
HTML
- Чим більше HTML тегів на сторінці, тим більше ресурсів браузеру потрібно на рендеринг сторінок, і це позначається на показниках Google PageSpeed, але тільки якщо ваша сторінка занадто перевантажена тегами.
- Уникайте надмірної вкладеності HTML тегів, на це також звертає увагу Google PageSpeed.
- Варто чистити свій HTML коду для старих браузерів, так як зазвичай саме такий код створює величезну кількість зайвих і вкладених тегів.
- Кількість тегів і вкладеність, особливо сильно впливають на Google PageSpeed для мобільних.
Зображення
- Використовуйте тег <picture>, щоб можна було використовувати сучасні формати зображень (JPEG 2000, JPEG XR і WebP). Google PageSpeed звертає на це увагу, якщо у вас немає ледачою завантаження зображень.
<picture> <source srcset="image.webp" type="image/webp"> <img src="image.jpg" alt="Тест"> </picture>
Так само можна використовувати media і підставляти різні зображення під різні дозволи і різну щільність пікселів.
<source media="(max-width: 640px)" srcset="image.png image-retina.png 2x">
Подібне корисно як для картинок, так і для відео.
Мінус: треба багато місця, бо доведеться зберігати різні формати зображень (відео) і під різні дозволи.
- Використовуйте ліниву завантаження для всіх зображень, які знаходяться в попапах або на другому і наступних екранах на сторінці.
- Використовуйте максимальне стиснення картинок, на це також звертає увагу Google PageSpeed. Інструментів для стиснення багато, один для прикладу: compressor.io
Серверні установки
- Включити кешування статичних файлів (шрифти, скрипти, картинки, css і так далі), при цьому встановити рік кешування, інакше гугл лається.
- Включити gzip стиснення.
- Використовуйте HTTP заголовки Last-Modified і If-Modified-Since для кешування сторінок.
Зв’язок
- Результати сильно залежать від віддаленості вашого сервера від вас. Якщо ви знаходитесь на Гаваях, а сервер у Москві, то результати для вас будуть плачевні.
- Результати залежать від вашого сервера і комп’ютера, і якщо під час тестів сервер або комп’ютер був перевантажений чимось, то буде поганий результат.
Висновок
Вичавити PageSpeed 108 або більше пунктів неможливо 🙂
Навіть 100 пунктів вичавлювати під мобілу безглуздо. Ми повинні прагнути до 100, а не впадати в параною! Це всього лише один з багатьох показників, які важливі для сайту.
Можете подивитися приклад сторінки, де показники для мобіли 97-98 та 100 для компа.
На сторінці є цілий ряд розділів, які присутні на сторінці, але доступні тільки по прямой ссылке для клієнтів, їх потрібно буде зробити подгружаемыми за необхідності, що зменшить кількість html і css код.
Спасибі за увагу!