eCommerce

Optimizing CSS Delivery for Magento As Per Google Page Speed Insight Tool

  By     |   December 14th, 2016

As per google (or any search engine) standard page loading speed is more important now to get better ranking in search result. How quickly your page load will consider as your website is more user friendly.

After you launched your website using magento store and you did all server side optimization like enabling gzip compression, implementing full page cache, optimizing all of your images, minify html and javascript, css etc. but still you can see some warning in google page speed tool like optimzing your css and javscrip delivery.

Let us discuss the reason and solution for the problem

Why this warning message getting ?

As per google standard we need to load (or prioritize) all above the fold content first and browser can render the html page before wait and load all css / java script from your server or from a cdn delivery service. If browser can load all style for your header portion of html they can render and show the content befor load bottom portion of the page.

The user will love your website if the page load quickly. Also your website user experience can increase, you can reduce your bounce rate, increase conversion rate etc.

The Solution

We normally use 1 or 2 stylesheet and will include all our css declaration inside it. This stylesheet will include in entire website and load it first before render the html code in your browser

We need to use seperate css style sheet for all each individual part of our website. Like header, main navigation, banner, content section, footer section, sidebar, login section, submit form

You can create separate css file for each section and print it just before where the actual html portion start each section

Here is a php code example to dynamically display css from a file

 

The above code will dynamically minify your css and print on your page before load to the browser.

Want to build your own eCommerce or enhance your eCommerce website features ?

Contact us now for free consultation

Contact Us

Tags: ,

RECENT COMMENTS