When working on large website projects or web apps, developers tend to use a lot of stylesheets and scripts, some CDNs, some not.
The Problem
The issue with this doing so is a big sacrifice on page load speed. Basically, a web page gets fully loaded AFTER all stylesheets and scripts have been processed and loaded, so naturall the more you have appended to your head tag, the slower your page will load. Many websites carry this issue and it can so easily be avoided. Remember page speed = longer staying visitors.
This problem is also known as render blocking if you've ever done a page speed analysis on google or elsewhere.
Can this be fixed? Of course, i'll even venture to say it is rather easy. How you might ask? Let's demonstrate right now.
Our Logical Process
Our logical process here is to load only the stylesheets and scripts that are absolutely necessary for whatevever appears only on the visible area of the active page. What this means is any markup that is loaded either dynamically (say on user actions) or at later times (such as scrolling down) needs the stylesheet or script it depends on, to be loaded also dynamically.
An Example
Let's take a quick example. Say we have an icon library which we wish to display on our web page, and it is being loaded from a js script for functionality and a css stylesheet for styling. The thing is this library can only be used when the user clicks on a button that will activate or display the icons selection, or a certain section that loads the icons only per request - and not on default page load.
What we will do here is load the stylesheet and script only once the user selects the icons library by pressing the button. Here's some code to visualize.
Demonstration
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<section>
<div class="tab"> <!--select this tab to reveal button -->
<button class="open-library"></button> <!-- click button to display icons, -->
<div class="icons-div hidden"> <!--hidden until button is clicked, this won't show because it needs the css and js to display-->
<i class="emailicon"><i/>
<i class="phoneicon"><i/>
<!-- icon library...-->
</div>
</div>
</section>
We will use some jquery to dynamically add the css and js into our head tag
$('.open-library').on('click', function() {
$('<link href="iconiset.css" rel="stylesheet"/>').appendTo('head');
$('<script src="iconsetjs.js"/>').appendTo('head');
});
Now when the page loads it can load fast, not having to load any stylesheets or scripts (except jquery) and once the user clicks on the tab, only then will it load the library set css and js and successfully display the library.
Note: this is mostly useful when we are working with many css and js imports in our head tag. If we don't have more than a few, it is usually not needed. Although doing so will increase page speed time in google page speed analysis, as it eliminates render blocking resources.
I hope you enjoyed this and feel comfortable to use this performance technique in your next web or app project!
As always see you in the next one.
Uriel Bitton
Website: www.flexrweb.com
Email: support@flexrweb.com
Top comments (0)