Google Page Speed — шрифты, иконки, файл js и css не попадают в кэш?

Question

[Alexander9292]

Поставил кэширование на сайте, после чего около 40-а резурсов кэшируется, а 26 еще остаются в не кэша.
Почему шрифты woff2, иконки svg и png, файл js и css не попадают в кэш по анализу Google Page Speed ?


Код кэша, который использую:

<IfModule mod_expires.c>

    ExpiresActive on
    ExpiresDefault                                      "access plus 31536000 seconds"

  # CSS
    ExpiresByType text/css                              "access plus 7 days"

  # Data interchange
    ExpiresByType application/atom+xml                  "access plus 31536000 seconds"
    ExpiresByType application/rdf+xml                   "access plus 31536000 seconds"
    ExpiresByType application/rss+xml                   "access plus 31536000 seconds"

    ExpiresByType application/json                      "access plus 31536000 seconds"
    ExpiresByType application/ld+json                   "access plus 31536000 seconds"
    ExpiresByType application/schema+json               "access plus 31536000 seconds"
    ExpiresByType application/vnd.geo+json              "access plus 31536000 seconds"
    ExpiresByType application/xml                       "access plus 31536000 seconds"
    ExpiresByType text/xml                              "access plus 31536000 seconds"

  # Favicon (cannot be renamed!) and cursor images
    ExpiresByType image/vnd.microsoft.icon              "access plus 31536000 seconds"
    ExpiresByType image/x-icon                          "access plus 31536000 seconds"

  # HTML
    ExpiresByType text/html                             "access plus 31536000 seconds"

  # JavaScript
    ExpiresByType application/javascript                "access plus 7 days"
    ExpiresByType application/x-javascript              "access plus 7 days"
    ExpiresByType text/javascript                       "access plus 7 days"

  # Manifest files
    ExpiresByType application/manifest+json             "access plus 31536000 seconds"

    ExpiresByType application/x-web-app-manifest+json   "access plus 31536000 seconds"
    ExpiresByType text/cache-manifest                   "access plus 31536000 seconds"

  # Media files
    ExpiresByType audio/ogg                             "access plus 31536000 seconds"
    ExpiresByType image/bmp                             "access plus 31536000 seconds"
    ExpiresByType image/gif                             "access plus 31536000 seconds"
    ExpiresByType image/jpeg                            "access plus 31536000 seconds"
    ExpiresByType image/jpg                             "access plus 31536000 seconds"
    ExpiresByType image/png                             "access plus 31536000 seconds"
    ExpiresByType image/svg+xml                         "access plus 31536000 seconds"
    ExpiresByType image/webp                            "access plus 31536000 seconds"
    ExpiresByType video/mp4                             "access plus 31536000 seconds"
    ExpiresByType video/ogg                             "access plus 31536000 seconds"
    ExpiresByType video/webm                            "access plus 31536000 seconds"

  # Web fonts

    # Embedded OpenType (EOT)
    ExpiresByType application/vnd.ms-fontobject         "access plus 31536000 seconds"
    ExpiresByType font/eot                              "access plus 31536000 seconds"

    # OpenType
    ExpiresByType font/opentype                         "access plus 31536000 seconds"

    # TrueType
    ExpiresByType application/x-font-ttf                "access plus 31536000 seconds"

    # Web Open Font Format (WOFF) 1.0
    ExpiresByType application/font-woff                 "access plus 31536000 seconds"
    ExpiresByType application/x-font-woff               "access plus 31536000 seconds"
    ExpiresByType font/woff                             "access plus 31536000 seconds"

    # Web Open Font Format (WOFF) 2.0
    ExpiresByType application/font-woff2                "access plus 31536000 seconds"

  # Other
    ExpiresByType text/x-cross-domain-policy            "access plus 31536000 seconds"

</IfModule>

<FilesMatch "\.(ogg|ogv|svg|css|js|svgz|eot|otf|woff|woff2|mp4|ttf|rss|atom|jpg|jpeg|gif|png|webp|ico|zip|tgz|gz|rar|bz2|doc|xls|exe|ppt|tar|mid|midi|wav|bmp|rtf)$">
    Header set Cache-Control "max-age=31536000, must-revalidate"
</FilesMatch>

Answer 1

[Антон Вебсайтовский]

Хороший вопрос, я тож этим щас интересуюсь, адаптирую сайт чтоб быстрее грузился.

У меня так svg и woff2
# Add correct content-type for fonts & SVG
AddType application/font-woff2 .woff2
AddType image/svg+xml .svg
и

<ifModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/plain text/xml application/xml application/xhtml+xml text/css text/javascript application/javascript application/x-javascript application/font-woff2 image/svg+xml
</ifModule>

Я твой код пробовал и потом просканил сайт опять, как было 39 так и осталось.
Задайте правила эффективного использования кеша для статических объектов Найдено 39 ресурсов.

Comments

[Alexander9292]

Попробовал Ваш вариант, но всё равно что-то не клеиться :(

[Денис Юрьев]

woff2 сжимать - это нечто, учитывайте что он из себя представляет итак сжатый woff =)

[Антон Вебсайтовский]

Alexander9292, а у меня вот что еще, не знаю как решить ) тег этот вставлял, и иконки вообще не грузились, еще в класс тега вставил font-display: swap

[Денис Юрьев]

Антон Вебсайтовский, а вам вот это почитать советую)

[Alexander9292]

Антон Вебсайтовский, вот такое помогло

[Антон Вебсайтовский]

Денис Юрьев, спасибо.

[Антон Вебсайтовский]

Alexander9292, о как ты сделал ))))) затещу )

[Антон Вебсайтовский]

Alexander9292, вопрос появился, так грузить обычным методом

@font-face { 
  font-family: 'Web font'; 
  src: url('webfont.woff2') format('woff2'), 
       url('webfont.ttf')  format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */ 
       url('webfont.woff') format('woff'); 
  font-weight: normal; 
  font-style: normal; 
}

----------
Если так добавить, то браузер не все качает, а выбирает.
-------
На developers.google приводится пример как браузер определяет, что для отображении сайта нужен какой-либо шрифт, он читает предоставленных список ресурсов в указанном порядке и старается скачать нужный шрифт.
1)Браузер читает разметку страницы и определяет, какие варианты шрифтов нужны для отрисовки текста.
2)Браузер проверяет, не установлены ли нужные шрифты на устройстве.
3)Если файла нет на устройстве, браузер читает список внешних расположений:
4)Если формат указан, перед скачивание браузер проверяется, поддерживается ли он. В случае отрицательного ответа программа переходит к следующему варианту.
5)Если указание на формат отсутствует, браузер скачивает ресурс.
----------

А по твоему примеру, выходит что грузиться все форматы будут.

[Alexander9292]

Антон Вебсайтовский, не приходилось такое использовать

[Антон Вебсайтовский]

Alexander9292, по твоему коду, ты грузишь только один формат .woff2 я верно понял, а то не весь код вижу, или грузишь еще и .woff и .ttf, это самые необходимые три формата, что бы и на андроиде и на айос все ок было.

[Денис Юрьев]

Антон Вебсайтовский, woff2 на сегодня достаточно, но если хотите более широкий охват юзайте только woff, сжимая его веб-сервером. Размер выйдет один.
woff2 - это woff сжатый алгоритмом brotli. разница с gzip на фоне всего контента будет еле заметна.

[Антон Вебсайтовский]

Сделал как ты писал, но чет ничего не изменилось )

<link rel="preload" href="/media/css/frontend/opensans/opensans-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />
    <link rel="preload" href="/media/css/frontend/opensans/opensans-regular.ttf" as="font" type="font/ttf" crossorigin="anonymous" />
    <link rel="preload" href="/media/css/frontend/opensans/opensans-regular.woff" as="font" type="font/woff" crossorigin="anonymous" />

[Антон Вебсайтовский]

Денис Юрьев, а выше то как я сделал, это бред или так и юзать? тогда буду грузить 2 woff2 и woff2.

[Alexander9292]

Антон Вебсайтовский, по скрину я отметил только то что требовалось изменить на page speed

[Антон Вебсайтовский]

Alexander9292, понял. ты не для всего делал.

[Антон Вебсайтовский]

Alexander9292, то есть у тебя такого нет?

@font-face {
font-family: 'Web font';
src: url('webfont.woff2') format('woff2'),
url('webfont.ttf') format('truetype'), /* Только если нужна поддержка старых Android, иначе закомментировать */
url('webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}

у тебя только, такая подгрузка файла со шрифтом

<link rel="preload" href="/media/css/frontend/opensans/opensans-regular.woff2" as="font" type="font/woff2" crossorigin="anonymous" />

[Антон Вебсайтовский]

А что ты делал с этим, если это главные стили шаблона и она в самом верху. в хеад.

[Alexander9292]

Антон Вебсайтовский, нет, шрифт у меня прописан только без условий.

[Alexander9292]

Антон Вебсайтовский, я все css складываю в один файл
Обычно такой проблемы нету.

[Антон Вебсайтовский]

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

<script>
      $(document).bind("ready", function() {
        setTimeout(function() {
          var script = document.createElement('script');
          script.src = '/media/js/frontend/yamap.js';
          document.body.appendChild(script);
          
          var script = document.createElement('script');
          script.src = '/media/js/frontend/lightbox/js/lightbox.js';
          document.body.appendChild(script);
        }, 2000);
      });
    </script>

[Alexander9292]

Антон Вебсайтовский, читал что в таких случаях можно ещё css подключать в подвале, а стили шапки и главного экрана подключить в тэге head через тэг style

[Антон Вебсайтовский]

Alexander9292, да верно.

[Антон Вебсайтовский]

Alexander9292, ну как у тебя получилось решить проблему которая в теме у тя, я мутил но пока не вышло.

[Антон Вебсайтовский]

Alexander9292, рекомендую статью https://business-online.su/blog/google-pagespeed-i..., тут есть хорошие подсказки.

[Alexander9292]

Антон Вебсайтовский, вопрос с кэшом не решился
Спасибо за статью

[Антон Вебсайтовский]

Alexander9292, а время пробовал менять, в .htaccess, на кешировании js и т.д, ну то что ошибка показывает.
Если посмотреть в консоле, то видно что он эти файлы из кеша грузит, а значит проблема во времени, в хранении кеша я так думаю.



Вот более правильный код, там и форматов шрифтов больше
https://gist.github.com/solancer/a51cf728a119a16f4...

Тут об каком-то конфиге речь идет: Как задать правило эффективного использования кэша для статических объектов?