Front-End-Performance-Checklist icon indicating copy to clipboard operation
Front-End-Performance-Checklist copied to clipboard

Inline/async <script> should be placed BEFORE <link rel="stylesheet">.

Open dtinth opened this issue 6 years ago • 3 comments

According to the talk FaCSSt—CSS and Performance @ 39:35 about loading CSS and JS,

Example from the talk:

<link rel="stylesheet" href="…">
<script>
  var script = document.createElement('script')
  script.src = '…'
  document.getElementByTagNames('head')[0].appendChild(script)
</script>

Since a <script> may alter the CSSOM of the previous <link> tag, the browser will not execute the <script> tag until all stylesheets declared beforehand finished loading.

dtinth avatar Jul 25 '18 19:07 dtinth

Hey @dtinth, are you proposing a change or a new rule?

thedaviddias avatar Aug 30 '18 02:08 thedaviddias

In this case, I think it would be a new rule: Put analytics tracking script before <link rel="stylesheet">.

dtinth avatar Aug 30 '18 06:08 dtinth

@dtinth - This is true to any script which requires a download and not just "analytics tracking script", so a more general rule would be preferred

yairEO avatar Nov 22 '19 11:11 yairEO

This issue has been automatically marked as stale because it has been open 40 days with no activity. Remove stale label or comment or this will be closed in 10 days. Thank you for your contributions!

github-actions[bot] avatar Aug 19 '23 01:08 github-actions[bot]

This issue was closed because it has been stalled for 10 days with no activity. You can always contact the maintainers directly for more information.

github-actions[bot] avatar Sep 09 '23 01:09 github-actions[bot]