Решил прогнать одну из версток через
https://developers.google.com/speed/pagespeed/insights.
Ранее как-то уже игрался с этим инструментом, но никогда особо под него ничего не оптимизировал. Получал свои 90 + баллов для пк и не беспокоился.
Однако звезды встали другое положение и обратил внимание на оптимизацию для телефонов и просто для себя решил понять как все красиво оптимизировать.
Собственно результат для телефонов вот такой:
Собственно, что касается изображений, прогонял через:
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&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>
Подскажите пожалуйста, желательно более подробно почему так происходит и как исправить ситуацию ?
Средний
