Blog, E-commerce, Magento

How to prevent unused css files loading on your magento e-commerce site header

No Comments

Optimizing your page is most important to get quick page load and improve user experience. A good performance website will rank well in google.  However if you check your site in google page speed insight sometime you can see an error like ‘Optimize CSS Delivery of the following’.  You can inspect your css using google chrome inspect tool. Once click inspect, select Audit tab and run audit. You can see a result like below

chrome auditing

From above pictures some of css loaded in page 100% not used, we should prevent loading this page in site to reduce page size, http request and load other used content quickly.

Use below code:

Copy App/code/core/Mage/Page/Block/Html/Head.php
To
App/code/local/Mage/Page/Block/Html/Head.php

Find out function named &_prepareStaticAndSkinElements  and replace below code

 
foreach ($skinItems as $params => $rows) { foreach ($rows as $name) { $items[$params][] = $mergeCallback ? $designPackage->getFilename($name, array('_type' => 'skin')) : $designPackage->getSkinUrl($name, array()); } }

With
$path=$_SERVER['REQUEST_URI']; $actionName = $this->getAction()->getFullActionName(); foreach ($skinItems as $params => $rows) { foreach ($rows as $name) { if($path=="/" && ($name=='css/widgets.css' || $name=='css/captions.css' || $name=='css/settings.css' || $name=='css/slider.css' || $name=='css/cloud-zoom.css' || $name=='css/sagePaySuite.css' || $name=='css/giftvoucher.css' || $name=='css/reupdate.css')): //for home page $name=""; elseif($actionName=="catalog_category_view" && ($name=='css/widgets.css' || $name=='css/captions.css' || $name=='css/settings.css' || $name=='css/slider.css' || $name=='css/cloud-zoom.css' || $name=='css/giftvoucher.css' || $name=='css/reupdate.css' || $name=='css/jquery-ui-1.8.23.custom.css')): //for category page $name=""; elseif($actionName=="catalog_product_view" && ($name=='css/widgets.css' || $name=='css/captions.css' || $name=='css/settings.css' || $name=='css/calendar-win2k-1.css' || $name=='css/reupdate.css')): //for product details page $name=""; elseif($actionName=="checkout_cart_index" && ($name=='css/widgets.css' || $name=='css/captions.css' || $name=='css/settings.css')): //for cart page $name=""; elseif($actionName=="checkout_onepage_index" && ($name=='css/widgets.css' || $name=='css/captions.css' || $name=='css/settings.css' || $name=='css/cloud-zoom.css' || $name=='css/slider.css')): //for login page $name=""; endif; if($name!=""): $items[$params][] = $mergeCallback ? $designPackage->getFilename($name, array('_type' => 'skin')) : $designPackage->getSkinUrl($name, array()); endif; } }

change css file name as per your theme.

Good Luck.

You may also like