How to Stop Loading Unnecessary Files and Reducing Website’s HTTP Requests – WordPress Optimization Tips

On Crunchify, we have published multiple speed optimization tutorials for you to refer at any time.

We use MaxCDN as our content provider. It’s been almost 4 years and so far it’s working too good. Genesis WordPress Framework and MaxCDN are the best combination. By default, Genesis Framework comes with lots of optimization, Google Markup Schema, Mobile friendly structure and lot more.

Last week I was looking at my MaxCDN account and suddenly noticed top download resources. As you see in above image top 9 out of 10 resource files were downloaded more than ~5 millions time in last week.

I was surprised and thought should I really need those resource? Do I have to load those files separately? How to get rid-off those files if not required except style.css file, which is absolutely required for site to load.

Let’s get started on how I got rid-off all those 9 files with simple tricks

Step-1

Let’s list all of those 9 files. 2nd column shows number of times it was downloaded.

/wp-includes/js/wp-embed.min.js											12,626,575	2.41 GB	
/wp-content/plugins/crayon-syntax-highlighter/themes/neon/neon.css		11,406,345	2.61 GB	
/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css	11,259,474	4.50 GB	
/wp-content/themes/crunchify/images/bg.png								9,268,221	3.45 GB	
/wp-content/themes/crunchify/images/bg-pattern.png						9,135,288	3.41 GB	
/wp-content/themes/crunchify/images/h3.png								6,289,690	1.18 GB	
/wp-content/themes/crunchify/images/crunchify-logo.png					5,476,295	7.05 GB	
/wp-content/themes/crunchify/images/crunchify-sprite.png				5,334,562	7.45 GB	
/wp-content/plugins/crayon-syntax-highlighter/js/min/crayon.min.js		4,344,704	2.60 GB

Step-2

Let’s group together Crayon Syntax Highlighter Plugin files.

There are 3 files:

neon.css, crayon.min.css and crayon.min.js. I have written a complete separate tutorial with total 7 detailed step to get rid-off those files. Kindly go over it and let me know if you see any issue.

Step-3

Now go over wp-embed-min.js. Please visit tutorial How to Disable Auto Embed Script for WordPress 4.4+. It will stop loading embed file at front end.

Step-4

Let’s go over 3 more .png files:

bg-pattern.png

I was loading this image in header and footer background. I got rid-off it by using color #333 instead.

crunchify-sprite.png

I was loading this sprite image to show social follow buttons in sidebar. I replaced it by fontawesome fonts.

h3.png

I was loading this to show checkmark for H3 posts on some of the location. I replaced it with fontawesome fonts. Below is a fontawesome equivalent.

Step-5

Now we are left with only 2 files. crunchify-logo.png and bg.png, which I thought of keeping it. So, instead of calling as image, I added base64 image equivalent for those file.

Before:

.header-image .site-title a {
    display: block;
    float: left;
    min-height: 60px;
    text-indent: -9999px;
    width: 100%;
    background-position: center !important;
    background-size: contain !important;
    background: url(images/crunchify-logo.png) no-repeat;
}

After:

.header-image .site-title a {
    display: block;
    float: left;
    min-height: 60px;
    text-indent: -9999px;
    width: 100%;
    background-position: center !important;
    background-size: contain !important;
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAmIAAACACAYAAAHfQjXQAABi3UlEQVR42u1dCXhVxfXPQlhcUBEEAQUheQmEPTtucV9xAcLm2r91qYraWnetkR2Sl7AoikutXbRSq9ba1qot1rpVcamKVVFBUZGEbCQkJG+5//O778xjMrlbFpJHmPN957vv3WXu3Llzz/zmnDPnxMVp0hQTVF6Sd3zowaONsAPrVpJomz8nuL00x3DjwsK4hM6uW1VVVdjDOcHq6upgp1WqekWu4aXBZk3cb3BnNxg1xF+oQULyPsMw4pUGM2pra0d1WqUa75/sqcHo1Jld8QWgQaz2Ec/jRv0XelmnVaiiNOdxLw0298RBzzmV09TUhIcIoAdUVlbW46F27NhhNDQ0mA8cDAYN6YHrsaXzjqYHXoTrampqkqXjgZ07dxpKA4WpJ0X3id91dXWGuFcoFDLEfvn6DicvDfbyz9K3uvSEEDVAQyAQwANsFD1DbKkhE6R9YWqok6TGeB4PTvuMtWvXJqrXogehAWh7p7TveblnYT9RIpVRJD5j3heVvZXFKc/RxeYnXVmU8qohyeVKf8qrVX7feM+NVliQ3lPwmisykgrz83tckRHZ4r/XzwcVFHIGDyAehD8fAw8u9qufndhWVFTkyo2B8uTGo3KeUD9X3v+JXA/aPieXs2tlqrF+TUZSwwqfQY0XXlsQl0hbo9rvW1J7/7jD8Nvg454abfHMLMONl87KrndptAD3GvMTlXqR4KDyHxyihy2Tz1Wvo+PredSMl/YtU89XPuPoMfQm6kF+NFRVccou2n6ABqos9tXVlZoNiPPiA/emGqH7Uo0qf8qXnhrtqhPTNnlquJnZf3EqB71I9CxlX7T3SfsS5E9HvVb8l0dI+Rx8xtxrvxafI/3vSb+/Id7OjVse2R/5JI21BYnikzTWxkXqUhDXvL50judPdImHRgPffNaYUXExRKJHicGA+D2IAgw0xH/a4xVYNjvbU8PFYqNBJNDoeYkdPNmjtGhmZshLw3XFjEAlgijoURNVeUaQY0CnVyZ7RP+XSfCT8M8yGZ+uYKm3jdCTTk2aNMUqAZ/UrcqtV/VmUb3amqMNTOp1S7Vi7ll3b16nNxjhre1i2uSiJMDMYume71mFhQleGqtyRU64K16kPG+1IlYMhDrnM6R5lpfGKivpmsbatm3bQCsNrTq/lKdge/wzLg==) no-repeat;
}

I’ve converted both images to base64 images. The advantage we will get, not having to open another connection and make a HTTP request to the server for the image.

Less Request = Better Page load time

There are some advantage of using SVG (Scalable Vector Graphic) image as images scales to any size without losing clarity (except very tiny) which looks great on retina displays.

These Data URIs are not limited to .png or images but for any resources. Here is a simple .png to .svg converter tool which I used online.

Summary

This tutorial is a part of How to Speed Up WordPress and Boost Performance section. You will find all WordPress optimization tricks and tips there.

By doing this steps, I got rid off all 9 un wanted resources out of 10. Which means – my page loads much fast as there will be 9 less request on each page 🙂

Let me know if you have any other tips which will improve site page speed. At Crunchify, speed is the main criteria and that’s the reason we are using very less plugins. All pages load within half a second.