0

Эта статья будет интересна тем, кто столкнулся с разного рода проблемами после обновления Google PageSpeed и претензиям со стороны заказчиков или начальника, почему упал бал или возникло такое количество ошибок.

В первую очередь, стоит упомянуть, что вот в этой статье https://habr.com/post/429668/ на мой взгляд всё очень грамотно и доступно расписано. Я же от себя добавлю больше практических советов, а так же будет интересно послушать вашу точку зрения и увидеть ваши наработки.

ШРИФТЫ:

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

font-display

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

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

@font-face {
font-family: 'FontName';
src: url('FontName.eot');
src: local('FontName'),
    url('FontName.eot?#iefix') format('embedded-opentype'),
    url('FontName.woff2') format('woff2'),
    url('FontName.woff') format('woff'),
    url('FontName.ttf') format('truetype');
font-weight: normal;
font-style: normal;
font-display: swap;
}

Так же есть такой скрипт

<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("Muller");
  var bold = new FontFaceObserver("Muller", {
    weight: "bold"
  });
  var light = new FontFaceObserver("Muller", {
    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>

Который лично мне не очень помог, но вы попробуйте, может вам повезёт. Необходимо лишь подставить свой шрифт и поменять везде на нужные названия шрифтов.

Я подключаю шрифты не отдельным css файлом, а через основной файл css. Хотя многие создают отдельный файл, что является одним лишним запросом на сервер. тут решать вам.

ИЗОБРАЖЕНИЯ, КАРТИНКИ и ТД

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

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

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

  1. Если у вас на странице много svg элементов, то их лучше добавлять чистым кодом, без лишнего обращения к img. Кроме того, их необходимо ужимать с помощью, например, этого сайта https://jakearchibald.github.io/svgomg/
  2. Теперь проблемный пункт - форматы изображений. А именно нас волнует webp. Ведь сейчас это один из рекомендуемых GPSpeed-ом шрифтов. Как измевтно, он до сих пор не читается некоторыми браузерами, среди которых достаточно популярный Mozila Firefox. Я перерыл кучу сайтов, кучу скриптов, но толкового ничего не нашёл. По этому теперь настало моё время задать вопрос вам: используете ли вы формат webp или любые другие новые форматы изображений? И как вы это делаете?

CSS и JS

  1. JS. Обязательным будет свойство async для подключаемых скриптов. Это точно избавит вас от ошибки в GPSpeed
  2. CSS. Тут немного посложнее. К тегу вам необходимо будет добавить такое свойство

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

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

3
  • Явно не по теме (этот вопрос никак не связан с темой Stack Overflow на русском). СО - не хабр. Здесь нет места статьям! 5 дек 2018 в 15:20
  • Для меня это было интересно и полезно, спасибо. Жаль если в текущем формате данного сайта совсем нет места для подобной информации.
    – Nsk
    5 дек 2018 в 15:28
  • 1
    @Nsk - и мне жаль, но есть правила ресурса. 5 дек 2018 в 15:29

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Посмотрите другие вопросы с метками или задайте свой вопрос.