Розганяємо 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
    1. Якщо Google шрифт підключали давно, то обов’язково підключіть його за новою, так як важливо наявність в урлі &display=swap — це нова опція, яка впливає на Google PageSpeed і вона дозволяє показувати текст на сторінці до завантаження шрифту… не завжди це красиво, але збільшує швидкість відображення сайту… і впливає на Google PageSpeed
    2. Якщо є можливість замінити Google шрифти своїми шрифтами, то так і зробіть, краще якщо шрифти будуть на вашому сервері, це теж підвищує швидкість.
    3. Коли обираєте шрифт на Google фонтс, постарайтеся вибрати по мінімуму опцій, вибирайте тільки те, що вам потрібно, і якщо ви не використовуєте на сайті похилий шрифт або товщиною 200, то в налаштуваннях не вибирайте це, так як це вплине на швидкість завантаження.

     

  • Свої шрифти
    1. Перевірте наявність css стилю font-display: swap; в ваших шрифтів, Google PageSpeed звертає увагу на це, і занижує показники, якщо цього стилю не варто:
      @font-face {
       font-family: 'Saira Condensed';
       src: url(sairacondensed.woff2) format('woff2');
       font-display: swap;
      }
    2. Якщо підключаєте шрифти через окремий файл стилів, то це впливає на час першого рендеринга і зменшує показники у 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>
    3. Якщо є можливість, то приберіть все зайве, те що ви не використовуєте, з ваших файлів шрифтів, щоб підвищити швидкість завантаження.
    4. Можна зробити двоетапну завантаження шрифтів: Developing a Robust Font Loading Strategy for CSS-Tricks

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 код.

Спасибі за увагу!

Читайте також  Пошук людей в контакті без реєстрації: Як шукати лодей вконтакте

Степан Лютий

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

You may also like...

Залишити відповідь

Ваша e-mail адреса не оприлюднюватиметься. Обов’язкові поля позначені *