Vote count:
0
I am in charge of a big mobile-focused web site for my company. At the beginning of the project we decided to put all the CSS code into a single .css file and load it within <head>.
<head>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
Same with JavaScript-code but we load at the bottom of <body>.
<script src="scripts.js"></script>
</body>
I always believed that this is a simple and well maintainable approach and once the files are loaded, they're in the browser's cache for the rest of the time the visitor surfs across the sites. However, after maintaining the site for a while now the amount of CSS and JS transferred became more and more so my supervisor complained that we're loading to much CSS and JS during initial page load. He wants to reduce traffic in order to improve page loading speed and reduce traffic costs.
Now, for the JavaScript part I am pretty confident that we can refactor our code by using requireJS and only load the JS modules that we need during runtime. So far, so good.
Now I am asking myself what to do with our giant CSS file which blocks initial rendering of the site because it's referenced in <head>. What would be a good practice to reduce the amount of css? (It's already minified and gzip compressed).
My first thought was to split the css into a "base.css" file which contains styles that are required on all sites (like header, navigation, footer and so on...) and another additional site-specific file (let's call is site.css) which contains all the other styles that are required just for the currently viewed site. This way we could reduce overhead by loading only the styles needed. After thinking about it for a while I pretty quickly realized that this would be difficult and probably not that much more efficient as I hoped.
Then I thought, what if it would be possible to put each set of css styles into its own file (let's say 1 file for each GUI component) and then define dependencies between HTML components and the styles that are required to render, similar to the RequireJS approach. Then, theoretically, we would be able to only load the css files needed during runtime.
Would this be possible? If yes, how? Is there a library that does the job? If no, what's a good alternate solution for reducing the CSS file size?
Definition and resolution of CSS dependencies
Aucun commentaire:
Enregistrer un commentaire