Your website needs to load quickly. That goes double for your website on mobile. As a rule, your visitor should be able to see and use a website in under two seconds. Two seconds isn’t a lot of time if you have lengthy javascript, CSS and large image files that play an essential role in your homepage. Optimized delivery of these assets is important, and is one of the red flags Google’s Page Speed Test shows when loading of these assets may delay rendering of your home page. Google’s recommendation to “Eliminate render-blocking JavaScript and CSS in above-the-fold content” can be a simple thing to address by loading CSS and Javascript files asynchronously.
Increase website render time by loading CSS and Javascript files asynchronously
Simply putting javascript files at the end of your file no longer makes them load last. Web browsers are smart enough to attempt delivery of essential elements of your site loaded first so that your web page is functional as quickly as possible. The idea of putting these at the end of your HTML document was that everything above those lines would be shown before it attempts to load those extra elements. Web browsers, as part of the HTML5 spec, let us define how to load these files in regards to page rendering.
Use of the “async” tag for any non-essential javascript:
<script src="/js/my-script.js" async></script>
By adding this tag to your non-essential javascript files, they will continue to load even after the user is able to see and use the site. If these javascript files are large, this can significantly decrease the render time by many seconds. It’s important to note, however, that any essential javascript that is used onLoad or needed right when the page is rendered will still need to function, which can be done by checking for the essential scripts before attempting to perform an action assuming that code is ready.
What about CSS?
CSS files cannot be loaded in the same way, and there isn’t a simple attribute like async for your CSS link tags. CSS is important for the layout of your page, but not necessarily ALL of it at once. Page Speed tests recommend that a site uses fewer separate files in any given page since each trip to the server and back acquiring these elements takes time. Previous recommended method was to merge your CSS files into one so that it’s just a single loaded element. This makes for fewer trips, but a significantly larger filesize.
The solution is two-fold:
- Organize your CSS into essential vs non-essential
- Load all non-essential CSS asynchronously
Organizing Your Essential CSS
There are elements within your CSS that handle the base layout of your page. This might include default fonts, colors and overall page structure, which are all important to see right away. Without these, the browser will show the default fonts and colors, which is usually Times New Roman text on a plain white background… not very pretty. The essential CSS most likley isn’t nearly as much as what’s included in your main file though. By seperating the essential CSS from the rest, you can load this “render blocking” CSS file either inline or non-asynchronously to ensure your users see the well-designed version of your site before the rest is loaded.
Asynchronously Loading Your CSS
Filament Group built a handy Javascript function that simulates async with loadCSS (via GitHub). This function allows CSS files to be loaded via Javascript separate from the rendering of the page. This feature is especially handy for any third-party code elements like slideshows or other bells and whistles in a separate CSS file.
Leverage Browser Caching
Browser cache is handy to expidite the delivery of your site for return visitors. Once a delivered file has been cached, a copy of that file exits on the user’s machine which can be loaded quicker than re-loading the same file from the server. Web browsers will check for a cached version before requesting the same file from the server. Anything that can be cached, should be cached, it really speeds things up.
Browser Caching on Apache
In your .htaccess file, you can set a cache time for specific file types. The example below shows how expiration dates are set for many common website file types.
ExpiresActive On # Text ExpiresByType text/css A31536000 ExpiresByType application/x-javascript A31536000 ExpiresByType text/html A3600 ExpiresByType text/richtext A3600 ExpiresByType text/plain A3600 ExpiresByType text/xml A3600 # Image ExpiresByType image/gif A31536000 ExpiresByType image/x-icon A31536000 ExpiresByType image/jpeg A31536000 ExpiresByType image/png A31536000 ExpiresByType image/svg+xml A31536000
Fast loading pages helps decrease your bounce rate
Getting essential parts of your site delivered to your end user as quickly as possible will help engage your visitors and decrease your bounce rate. People don’t like waiting for things to load, no matter how fancy they might be. Give them something right away, even if the rest is set to load in the background.
The Montana Banana development team can help optimize your site for better page speed.
Share: