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

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.