Do you know your WordPress site is being loaded multiple times for a single page visit? I am sure you don’t know. It is happening behind your eyes. A simple mistake of CSS style codes may increase your WordPress server usages and server may goes to slower down. In this article I will show you how a bad or old CSS code is harmful for your server.

You must know how WordPress handle not found file request. WordPress .htaccess handle all requests. At first it check the requested URL is a file/folder and is that exists or not. If the requested file/folder exists then server return the file/folder otherwise the server pass the request through WordPress script. Then WordPress generates a error page and return 404 HTTP Status code. To generate a 404 page WordPress loads its whole script, plugins and theme files. It means your server uses full resource to handle this 404 request.

Now I will explain the issue with mistake of CSS. You believe that a file size of a CSS is too smaller than your whole page size with HTML,JS and images. Your CSS file is few kilobytes in size. You also believe that CSS is used when HTML script calls it by class or ID and if any class or id are not called by HTML then this code is useless. Your browser read your full CSS file and try to load all resources called in CSS. We don’t delete unused CSS code form CSS file, we keep those for later usage. And a common mistake is we keep unused CSS codes in file but we delete unused images from images directory. It is the main problem. When you call web page , browser load the css file and load all images declared in this file. If any image is not exists server returns 404 error. Consider following mistake in my case. I was using some background images in my wordpress blog. For that backgrounds I had some style codes in style.css file. I decided to remove backgrounds. I deleted those images from images folder as I don’t want to using those but I did not remove the css codes from style.css

body{background:url(images/bg.png) #99CC33; }
 .loop_item{background:url(images/item_border.png) no-repeat #CCCCCC;}
 .title{background:url(images/titlebg.gif) repeat-x #eeeeee};
 #footer{background:url(images/footer.jpg) repeat-x #cccccc};

Above CSS codes load 4 images ( bg.png, item_border.png, titlebg.gif, footer.jpg).

For this reason for single page visit my WordPress is generating 4 not found 404 page using full resource of my server. It means my mistake increase my unwanted server cost 4 times. I tested many WordPress themes those have this same issue. Theme developers may do this mistake but as an webmaster you have to find out it. You have to be sure that in your CSS file there is no not found image.

I AM SURE YOU MUST HAVE THIS PROBLEM BEHIND YOUR EYES.

How can you check you are free or not free from this issue?

I made an WordPress Plugin WP Logs Book to check this issue. My plugin stores all 404 request information. Download and install my plugin from wordress.org . Active this plugin and visit your website. Go to dashboard and open wp-logs-book>Error 404 Log page . This log will show you the list of URLs those are not found in your website.