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

habr.png

Эта статья будет интересна, кто столкнулся с разного рода проблемами после обновления 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. Выглядеть это будет так


Описание


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

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

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

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

© Habrahabr.ru