[Из песочницы] Оптимизация сайта для GooglePage Speed (учтены все особенности после его обновления)21.01.2019 21:34

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

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

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

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 вам необходимо будет добавить такое свойство
   
   Именно в таком виде ваши 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):

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

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

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

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

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

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