{"id":43026,"date":"2015-03-23T11:56:38","date_gmt":"2015-03-23T06:26:38","guid":{"rendered":"https:\/\/www.quickonlinetips.com\/archives\/?p=43026"},"modified":"2020-05-24T11:07:03","modified_gmt":"2020-05-24T05:37:03","slug":"delay-loading-non-critical-css","status":"publish","type":"post","link":"https:\/\/www.quickonlinetips.com\/archives\/2015\/03\/delay-loading-non-critical-css\/","title":{"rendered":"How to Delay Loading of Non Critical CSS to Increase Mobile Site Speed"},"content":{"rendered":"

It’s a good idea to delay the loading of non-critical CSS to speed mobile site page speeds. Probably you use lots of CSS files to style your site, and this forces the browsers to load all these files before rendering your page to your site visitors. This increases your site load times and badly hits your mobile site page speed results.<\/p>\n

Move CSS to Footer<\/h2>\n

Another important part about CSS files (unlike scripts that you add at bottom of pages) is that you traditionally load them in the HEAD section of HTML. While you can try these tips to load CSS faster<\/a>, is there a way to load CSS files in the footer using javascript?<\/p>\n

Here is what typically Google PageSpeed tests will reveal for your mobile site<\/p>\n

\"non<\/p>\n

Google mobile usability is getting important, and soon mobile-friendly sites<\/a> are expected to rank higher in search engine results. I found this script<\/a> suggested by Google to load non-critical CSS with javascript in the footer.<\/p>\n

<script>\r\n\u00a0 \u00a0 \u00a0 var cb = function() {\r\n\u00a0 \u00a0 \u00a0 \u00a0 var l = document.createElement('link'); l.rel = 'stylesheet';\r\n\u00a0 \u00a0 \u00a0 \u00a0 l.href = 'PATH\/TO\/STYLE.CSS<\/span><\/strong>';\r\n\u00a0 \u00a0 \u00a0 \u00a0 var h = document.getElementsByTagName('head')[0]; h.parentNode.insertBefore(l, h);\r\n\u00a0 \u00a0 \u00a0 };\r\n\u00a0 \u00a0 \u00a0 var raf = requestAnimationFrame || mozRequestAnimationFrame ||\r\n\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 webkitRequestAnimationFrame || msRequestAnimationFrame;\r\n\u00a0 \u00a0 \u00a0 if (raf) raf(cb);\r\n\u00a0 \u00a0 \u00a0 else window.addEventListener('load', cb);\r\n<\/script><\/pre>\n
You can replace the path to CSS with your CSS file and this code before the BODY closing tag at the bottom of your HTML. Now this CSS script will load after all content is rendered.<\/p>\n
Non Critical CSS<\/h3>\n
Non-critical CSS means the CSS which can conveniently be loaded later and will not impact your site design drastically. While they suggest you should load all critical CSS inline in the HEAD, many times such CSS is too much to inline. While you can retain your critical primary site design CSS files in the HEAD, you can move the rest of the CSS files to the footer.<\/p>\n
For example, we use Bootstrap<\/a> for superb responsive mobile-first design, and we continue to load it in the HEAD as it is essential for basic site design like columns and sidebars. But we have shifted Font Awesome<\/a> CSS (which loads all the amazing icons you see on this site) to the footer using this script as the icons can load later and are not critical for initial site design.<\/p>\n
Try it yourself and increase your mobile site speed today.<\/p>\n","protected":false},"excerpt":{"rendered":"
It’s a good idea to delay the loading of non-critical CSS to speed mobile site page speeds. Probably you use…<\/p>\n","protected":false},"author":4,"featured_media":43029,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"_kad_post_classname":"","footnotes":""},"categories":[6],"tags":[49],"class_list":["post-43026","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blogging","tag-tutorials"],"_links":{"self":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/43026","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/comments?post=43026"}],"version-history":[{"count":0,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/posts\/43026\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media\/43029"}],"wp:attachment":[{"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/media?parent=43026"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/categories?post=43026"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.quickonlinetips.com\/archives\/wp-json\/wp\/v2\/tags?post=43026"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}