Оптимизация сайта для GooglePage Speed (учтены все особенности после его обновления) Часть 1

Эта статья будет интересна, кто столкнулся с разного рода проблемами после обновления Google PageSpeed и претензиям со стороны заказчиков или начальника, почему упал бал или возникло такое количество замечаний. А так же тем, кто производит оптимизацию сайтов.
В первую очередь стоит упомянуть, что вот в этой статье ^[1], на мой взгляд, всё очень грамотно и доступно расписано.

Я же от себя добавлю больше практических советов, а так же будет интересно послушать вашу точку зрения и увидеть ваши наработки.

Перечислю о чём я буду говорить в этой статье:

1. CSS и JS
   • подключение файлов
   • загрузка библиотек
   • трюки

2. Fonts
   • подключение шрифтов
   • отображение шрифтов во время загрузки страницы

3. Изображения
   • разные форматы (jpg, png, webp, base64)
   • sprite

И если ты остался на этой статье до этого момента, то тебе скорее всего интересно (или у тебя заглючила кнопка «назад») Ниже подробнее о каждом пункте.

CSS и JS

JS

1. Обязательным будет свойство async для подключаемых скриптов (кроме jQuery). Это точно избавит вас от замечания в GPSpeed по поводу асинхронной загрузки скриптов.
2. Совет банальный, но он очень толковый — старайтесь использовать сложные и массивные библиотеки по минимуму.
3. Свои настройки js библиотек (slick, fancybox) или небольшие фрагменты кода, которые выполняют разные задачи лучше заливать на сервер одним файлом. В моём случае, и скрипт для отправки почты, и маска для input и анимация и всё-всё находится в одном файле build.js ( которому я так же задаю async.
4. Этот совет ситуативный, то есть под ситуацию смотрите. Если у вас сразу после открытия страницы на её первом экране выполняется какой-то скрипт, то его будет правильнее подключить отдельно и не давать ему async

CSS

1. Тут немного посложнее. К тегу link вам необходимо будет добавить такое свойство

   <link media="none" onload="if(media!="all") media="all"" rel="stylesheet" type="text/css", href= main.css>

   Именно в таком виде ваши css файлы будут подключаться лишь после дерева DOM. Грубо говоря, это тот же async только для .css

2. Очень важный и действенный совет! Он добавляет от 5 до 10 баллов гарантированно. Нужно разделить ваш main.css на два файла. В первом будут только те стили, которые подгружаются для того контента, который виден сразу после открытия страницы. Это top bar, header, первая картинка, первая form и тд. В общем то, что вы поместили на «лицо» вашего сайта. Во втором уже всё остальное.

Шрифты

Я обнаружил новое для себя css свойство для шрифтов

font-display

А конкретно, его параметр swap, который не дожидаясь подгрузки вашего красивого и тяжёлого шрифта показывает текст в браузере используя встроенный в этот же браузер шрифт (например sans-serif). Это сразу же убирает одну из ошибок в GPSpeed.

Выглядеть это будет так

 @font-face {
    font-family: 'FontName';
    src: local('FontName'), url('FontName.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    }

Так же есть такой скрипт (для его работы нужно подключить fontfaceobserver.js):

<script>
    var html = document.documentElement;

    if (sessionStorage.fontsLoaded) {
    html.classList.add("fonts-loaded");
    } else {
    var script = document.createElement("script");
    script.src = "../js/fontfaceobserver.js";
    script.async = true;
    script.onload = function() {
      var regular = new FontFaceObserver("FontName");
      var bold = new FontFaceObserver("FontName", {
        weight: "bold"
      });
      var light = new FontFaceObserver("FontName", {
        weight: "300"
      });
      Promise.all([
        regular.load(),
        bold.load(),
        light.load()
      ]).then(function() {
        html.classList.add("fonts-loaded");
        sessionStorage.fontsLoaded = true;
      });
    };
    document.head.appendChild(script);
    }
    </script>

Лично мне не очень помог, но вы попробуйте, может вы лучше с ним совладаете. Ведь я нашёл его на просторах, и люди говорили, что действительно помогает.

Подключение шрифтов

1. В основном встречаются два вида подключения — с помощью ссылки (например на google fonts, или же локально, на сервере. Так вот, по поводу второго способа, его так же можно поделить на 2: отдельным css файлом (с помощью link подключаем fonts.css) и напрямую через код (через ваш style.css).
   И поскольку сейчас мы ведём речь именно об оптимизации сайта для GPSpeed, то я убедился в том, что лучше подключаться шрифты через ваш главный файл css.
2. И ещё один совет, который помогает — положите файлы со шрифтами (woff, ttf и тд) рядом с вашим файлом css, который его запрашивает. Раньше у меня была отдельная папка на сервере для шрифтов, но потом я переместил их скорость загрузки шрифтов увеличилась в 2 раза. (по данным GPSpeed на подключение шрифта Muller раньше у меня уходило 180ms, сейчас 70-90ms)

Изображения, картинки и т.д.

За следующие 2 совету ручаюсь, помогли не только мне, а всему офису и даже друзьям отдалённо работающим.

1. Загружайте абсолютно все картинки <img> с помощью lazyloading. Выглядеть это будет так

<img class="yourClass lazy" data-src="../images/image.jpg" alt="Описание"/>

И не забудьте подключить lazyload.min.js

2. Если у вас на странице много svg элементов, то их лучше добавлять чистым кодом, без лишнего обращения к тегу img. Кроме того, svg необходимо ужимать, например, с помощью этого сайта jakearchibald.github.io/svgomg ^[2] (не реклама).

3. Банально, но не забывайте ужимать ВСЕ картинки на сайте. Даже те, которые весят 5кб. Хоть эти 3 кб которые вы выиграйте никак не повлияют на скорость загрузки, вы избавитесь от ошибки на GPSpeed, и добавите себе до 10 баллов.

!Теперь проблемный момент — форматы изображений. А именно нас волнует webp, JPEG 2000, JPEG XR. Ведь сейчас это один из рекомендуемых GPSpeed-ом шрифтов. Как известно, они до сих пор не поддерживается некоторыми браузерами, среди которых достаточно популярный Mozila Firefox. Хоть они и объявили, что в марте будет полная поддержка этого формата, нам всё-равно ещё год ждать, пока все юзеры этого браузера обновятся до последней версии… Я перерыл кучу сайтов, кучу скриптов, но толкового ничего не нашёл. По этому теперь настало моё время задать вопрос вам: используете ли вы формат webp или любые другие новые форматы изображений? И как вы это делаете?

Автор: Стас

Источник ^[3]