Performance and Security
Optimize HTML loading and understand important security considerations for links, forms, iframes, and resources.
Script Loading
Scripts can block HTML parsing depending on how they are included. defer downloads scripts while allowing parsing to continue and executes them after parsing. async downloads independently and executes as soon as available, so execution order should not be relied upon between async scripts.
<script src="app.js" defer></script>\n<script src="analytics.js" async></script>- defer preserves document parsing and executes after parsing.
- async scripts execute independently when ready.
Which attribute is generally appropriate for scripts that should execute after HTML parsing?
Lazy Loading
The loading="lazy" attribute can allow images and iframes to be deferred until they are near the viewport. This can reduce initial network and rendering work, particularly on pages with many below-the-fold resources.
<img src="large-photo.jpg" loading="lazy" width="1200" height="800" alt="Mountain view">- Lazy loading can reduce unnecessary initial resource loading.
- Do not lazy-load critical above-the-fold images indiscriminately.
Which attribute requests lazy loading for an image?
noopener and External Links
When opening external content in a new browsing context, developers should understand the security implications of target="_blank". The rel="noopener" relationship prevents the opened document from accessing the opener through window.opener.
<a href="https://example.com" target="_blank" rel="noopener">\n Open Example\n</a>- Understand opener relationships when opening new browsing contexts.
- Use appropriate rel values for external links.
What does rel="noopener" primarily prevent?