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 the 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 that we keep unused codes in CSS files but we delete unused images from images directory. It is the main problem. When you visit web page then browser loads css files and loads all images declared in these files. If any image is not exists then server returns 404 error. Consider following mistake in my case. I was using some background images in my wordpress blog. For those 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 try to load 4 images ( bg.png, item_border.png, titlebg.gif, footer.jpg) but those are not exists in the image folder

For this reason for a single page visit my WordPress is generating 4 not-found 404 pages using full resource of my server. It means my mistake increases my unwanted server cost 4 times. I tested many WordPress themes those have this same issue. Theme developers may do this mistake but as a webmaster you have to find it out. You have to be sure that in your CSS files 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 a 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.