Проблема при попытке загрузить CSS файл ASYNC для скорости сайта - PullRequest
Новая
       10

Проблема при попытке загрузить CSS файл ASYNC для скорости сайта

0 голосов
/ 20 сентября 2018

Итак, у меня есть клиентский сайт, для которого я занимаюсь SEO и пытаюсь оптимизировать скорость сайта.Я использую понимание скорости страницы, чтобы проверить.Однако существует один файл CSS, который хранится локально (на сервере веб-сайтов, а не на cdn или внешнем хосте) и отображается в виде сценария блокировки рендеринга.

Теперь, когда я вхожу в код заголовка, где он находится в теге ссылки, а не теге скрипта.Кроме того, в прошлом я пытался загрузить этот фрагмент кода в тег сценария, а затем добавить к нему атрибут async, и это ДЕЙСТВИТЕЛЬНО устраняет проблему, т. Е. Представление о скорости страницы больше не говорит о том, что этот сценарий отображаетсяблокирование, однако, следующий скрипт, загруженный в тег ссылки в заголовке, сразу после этого, похоже, блокирует рендеринг.

Затем я могу сделать то же самое для этого и загрузить его втег с атрибутом async, и это будет исправлено, но следующий будет блокировать рендеринг.Я могу пройтись по всем из них и сделать это, и когда я добираюсь до последнего, снова говорится, что самый первый из них - блокировка рендера.

Что я могу сделать, чтобы это исправить?Спасибо.

Ниже приведен пример сценария в теге ссылки в заголовке, а затем код, который я использовал для его исправления. 

<link rel="stylesheet" href="<?php bloginfo('template_url'); ?>/css/foundation.css" />

<script async type="text/javascript">
    var resource = document.createElement('link'); 
    resource.setAttribute("rel", "stylesheet");
    resource.setAttribute("href","wp-content/themes/sawyer/css/foundation.css");
    resource.setAttribute("type","text/css");      
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(resource);
</script>
...