baschte/content-animations

Pagespeed: Redundant CSS file - already injected by JS

Closed this issue · 1 comments

peter-neumann-dev commented

Hi Basti 👋🏻

The extension includes both aos.css and aos.js, but the CSS is already bundled within the JavaScript file. Including aos.css is unnecessary as:

  1. All styles are automatically injected by the JS when AOS initializes
  2. Library works identically without the CSS file
  3. Creates duplicate styles and extra HTTP request

Checking the rendered DOM after JavaScript execution shows duplicate styles with identical content:

<head>
 <!-- Loaded with TypoScript: Resources/Public/JavaScript/Vendor/simple-aos/aos.css -->
 <link rel="stylesheet" href="/typo3temp/assets/compressed/847da8fca8060ca1a70f976aab1210b9-min.css.gz?1732358210" media="all">
 <!-- Injected by JS: Resources/Public/JavaScript/Vendor/simple-aos/aos.4.2.0.min.js -->
 <style>body[data-aos-duration="50"] [data-aos],[data-aos][data-aos][data-aos-duration="50"]......</style> 
</head>

Removing the TS include of aos.css was a quick fix for us and some extra lighthouse points 😊

baschte commented

New Release 2.5.2 is out now. Thanks Peter 😁

  • ❤️1