Как использовать rel = "preload" as = "style" или as = "script" или метод Better для скорости страницы - PullRequest
Новая
       7

Как использовать rel = "preload" as = "style" или as = "script" или метод Better для скорости страницы

0 голосов
/ 25 августа 2018

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

Так что я пытаюсь реализовать это на моей HTML-странице, пожалуйста, посмотрите мой HTML-код до и после реализации до 

<html>
<head>
 <link href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" rel="stylesheet" type="text/css"> ...........
</head>
<body>

html contents 

  <script src="assets/js/jquery-1.12.4.min.js" type="text/javascript"></script> 
</body>
</html>

После внедрения я меняю вот так 

<html>
<head>
 <link rel="preload" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700" as="style">
 <link rel="preload" href="assets/js/jquery-1.12.4.min.js" as="script">
 <link rel="stylesheet" href="http://fonts.googleapis.com/css?family=lato:400,100,200,300,500%7COpen+Sans:400,300,600,700,800%7COswald:300,400,700">
</head>
<body>

html contents 


  <script src="assets/js/jquery-1.12.4.min.js"></script>
</body>
</html>

Но я не могу заметить увеличения скорости. Поэтому, пожалуйста, помогите сделать это правильно

Я прочитал следующую статью

https://developer.mozilla.org/en-US/docs/Web/HTML/Preloading_content.

Но я не могу понять. Пожалуйста, помогите.

Или есть какой-нибудь лучший способ для скорости страницы?

Ответы [ 2 ]

0 голосов
/ 25 августа 2018

https://developers.google.com/web/updates/2016/03/link-rel-preload

См. Ссылку на статью выше.Я видел ссылку поделился выше.Предварительная загрузка никогда не заставляет страницу загружаться быстро.Он отдает приоритет только тем файлам, которые объявлены как rel = "preload" для загрузки очень рано, когда страница загружается.Вы можете прочитать статью еще раз. Также статья, которой я поделился.Это скажет то же самое.

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

  1. Вы можете уменьшить количество файлов CSS и JS, которые будут загружаться очень очень быстро, чем обычный файл.Вы можете минимизировать файлы сценариев и CSS из (https://www.minifier.org/) здесь.

  2. Избегать внешних ссылок на файлы CSS и JS

  3. Избегатьпробелы и символы новой строки в коде.

  4. Используйте сжатые изображения, которые также будут загружаться быстрее.

  5. Включить кэширование.

0 голосов
/ 25 августа 2018

Почему это не работает

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

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

style.css 

body {
    background-image: url(myimage.png);
}

index.html 

<html>
<head>
  <link rel="stylesheet" href="style.css" />
</head>
<body>

</body>
</html>

Процессзагрузка вышеуказанной страницы состоит (приблизительно) из следующих шагов:

  1. Загрузка index.html
  2. Анализ файла HTML
  3. Из-за тега ссылки, загрузка style.css
  4. Разбор файла CSS
  5. Из-за background-image, скачайте myimage.png
  6. Разобрать изображение и отобразить его на экране

Это означает, что ваш запрос водопада равен index.html -> style.css -> myimage.png.
Добавив предварительную загрузку для myimage.png, браузер может загрузить изображение раньше, поэтому ваш запрос водопада становится: 

index.html  +-> style.css
            +-> myimage.png

Вместо 3, теперь это всего 2 запроса, что означает более быстрое время загрузки.

Что еще вы можете сделать, чтобы улучшить (воспринимаемое) время загрузки страницы?

Некоторые распространенные способы:

  • Сократите ресурсы (JavaScript, таблицы стилей)
  • Убедитесь, что на вашем сервере включено сжатие для статических активов
  • Сначала загружайте только ресурсы, действительно необходимые для загрузки страницы, а затем загружайте другие сценарии (например, для взаимодействия с пользователем).

Но чтобы получить более полное представление о том, что вы можете улучшить, вы можете использовать Система Chrome Audit (Маяк) .

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...