nepster-web
@nepster-web

Как разобраться с блокирующий отображение css файлами для PageSpeed?

Решил прогнать одну из версток через https://developers.google.com/speed/pagespeed/insights.
Ранее как-то уже игрался с этим инструментом, но никогда особо под него ничего не оптимизировал. Получал свои 90 + баллов для пк и не беспокоился.

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

Собственно результат для телефонов вот такой:
52f68d9d796f4dcb80e1f7ee73a455db.png

Собственно, что касается изображений, прогонял через: https://github.com/sindresorhus/gulp-imagemin, но гугл все-равно настаивает на сжатии пару байт. Тут уж наверно ничего не поделать.

А вот то, что меня заинтересовало, так это:
Удалите из верхней части страницы код JavaScript и CSS, блокирующий отображение

Если перейти в раздел рекомендаций https://developers.google.com/speed/docs/insights/... и прочитать, что что советует гугл, то складывается впечатления, что там сидят наркоманы.

Кстате если перенести подключение css стилей вниз, то ошибка не исчезает.

Ради интереса прогнал другие проекты, там таже самая ошибка, но с пометкой "исправить по возможности".

Сейчас я не совсем понимаю, почему гугл не доволен подключением стилей, но хотелось бы разобраться в данном моменте и исправить.

Для большей информации, мой head выглядит так:
<head>
    <meta charset="utf-8">
    <title>Заголовок</title>
    <noscript>
        <meta http-equiv="refresh" content="0; URL=badbrowser.html">
    </noscript>
    <!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link rel="apple-touch-icon" href="img/apple-touch-icon.png">
    <link rel="icon" type="image/png" href="img/favicon.ico">
    <meta http-equiv="cleartype" content="on">
    <meta name="MobileOptimized" content="320">
    <meta name="HandheldFriendly" content="True">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <link href='https://fonts.googleapis.com/css?family=Material+Icons|Roboto:400,700italic,500,700,400italic,300italic,300&amp;subset=latin,cyrillic' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/3.3.1/css/swiper.min.css">
    <link rel="stylesheet" href="css/rating.min.css">
    <link rel="stylesheet" href="css/styles.min.css">
    <script>
        var d = document.documentElement.style;
        if (('flexWrap' in d) || ('WebkitFlexWrap' in d) || ('msFlexWrap' in d)) {
            // FlexBox support
        } else {
            window.location.href = 'badbrowser.html';
        }
    </script>
</head>


Подскажите пожалуйста, желательно более подробно почему так происходит и как исправить ситуацию ?
  • Вопрос задан
  • 287 просмотров
Пригласить эксперта
Ответы на вопрос 2
Serj-One
@Serj-One
i'm sexy and i know it
Если придерживаться рекомендаций, нужно выделить стили, относящиеся к первому экрану, и встроить их непосредственно в страницу. Это делается для того, чтоб первый экран отображался не дожидаясь загрузки страницы полностью, и отображение не блокировалось до полной загрузки стилей пока ещё невидимой части страницы. Подключение остальных стилей в данном случае переносится в конец страницы. Лично я считаю такой подход лёгкой формой шизофрении. Это оправдано, только если сайт действительно очень тяжёлый, и нужно ускорить загрузку хотя бы визуально.

По поводу оптимизации изображений, советую gulp-tinypng, жмёт на порядок лучше и качественней всех локальных оптимизаторов. 500 изображений в месяц бесплатно. Либо gulp-kraken. Жмёт чуть хуже, но тоже очень прилично.
Ответ написан
@semki096
Я както был приятно удивлён, прогнав Drupal.org - результат показал 100%. При том что сайт далеко не простой. Если в Drupal.org покопаться как они всё сделали, думаю можно в этом плане набраться опыта.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
SPIKS Санкт-Петербург
от 70 000 до 90 000 ₽
move2usajobs.com LLC Лос-Анджелес
от 2 000 до 4 000 $
11 окт. 2024, в 20:57
11000 руб./за проект
11 окт. 2024, в 20:49
5000 руб./за проект
11 окт. 2024, в 19:31
20000 руб./за проект