<script src="/js/my-script.js" async></script>
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
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.
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.