As the web develops, the size of pages has grown tremendously. According to Pingdom, the average website’s page size is approximately 1MB, and that number is constantly growing.

The page size of a website will, often, directly effect the speed upon which the site will load. That is a problem – bigger websites will almost always mean slower websites. Slow websites are bad – you lose traffic right off the bat if your site takes more than 4 seconds to load.

WebsiteBegin had, earlier in January a page size of nearly 1.2MB, but has since shrunk to, on average, 350KB per page. Below, you will find a series of steps I took to remove the bulk of the page size.

Running Through the Basics

Before delving further into the post, it is recommended that you read Improving Site Load Speed by 200%. The article mentions several tools that will be mentioned throughout this article, such as Gtmetrix and PingdomTools.

Compressing Code & Images

Inefficient code can be a burden for your page’s size. Each and every extra space, inefficient string of code, and unnecessary comment contributes to a larger and larger document size for each script.

Compressing and minifying your code will help cut a decent chunk of your website’s size, simply by removing the unneeded clutter. While WordPress offers some great tools to automatically compress your code, I prefer doing it manually for reasons which will be shared later.

If compressing/minifying your code without the use of WordPress plugins, my favorite tools are, undoubtedly:

• TextFixer (HTML)
• MinifyCSS (CSS)
• MinifyJS (JavaScript)

If you would rather use a WordPress plugin to minify and compress your code (not recommended), however, my favorite plugin is, you guessed it, WP Minify.

As for images, I often opt to compress them with a command-line code after saving, but have grown to fancy the WordPress plugin WP Smush.It. The plugin flawlessly compresses all of your images using Yahoo’s Smush.It service.

After all of the above listed modifications, I noticed an approximate 100KB size-drop per page.

Combine Scripts, Remove Redundant Scripts

One of the problems that you will face when using WordPress plugins is the clash of conflicts. On some occasions, scripts will be loaded more than once, and on others, multiple versions of a script will be loaded.

This is a problem that you will often encounter with jQuery – some plugins aren’t very nice to one-another, and will load in their own version of jQuery when one is already loaded.

On WebsiteBegin, I found three instances of jQuery running – all being different versions, and caused by plugins loading their own versions of jQuery. What a mess.

After running through a large list of possible fixes, I only found one that effectively solved all of the problems – disabling all plugins, and enabling each until you find out which one is loading another instance of jQuery. Then I nuked the plugin. Easy.

All of the jQuery scripts that were loaded were being loaded from Google’s CDN, and thus were fairly small, but I still saved almost 90KB on each page!

While combining your CSS scripts will yield very minor benefit in terms of page size (combining the scripts saved approx .5KB per script), the benefit comes in the fact that less resources are downloaded. Thus, I recommend combining all scripts when possible.

If you aren’t willing to combine your scripts manually (which I recommend doing), you can use the JS & CSS Script Optimizer plugin to get things rolling.

Automation VS. Efficiency (Plugins)

We all love our plugins when it comes to WordPress. There are so many, and they help us do so much that their presence is really indispensable… right?

Case and point – the popular posts plugin that I used for a while was really great – it’d automatically generate a list of the highest-viewed posts, and display the post and its thumbnail in the sidebar. Cool!

There were a few problems with the plugin, though:

• It was loading it’s own JS and CSS files
• The images weren’t being shrunken before-hand – they were shrunken with HTML (a big no-no)
• It was using non-compressed or optimized images
• The images weren’t being stored on a CDN

By removing the plugin and manually adding posts to the “popular posts” section with optimized images, I saved just under 300KB per page.

I was blown away by the result. 300KB per page for one quick fix. Imagine what plugins you may be running that are contributing to your page size, negatively, only to save you a little bit of time.

Serving a Cached File & Using a CDN

What if your browser could download and store all of the images of your website, therefore making it quicker to load a page on your website? Or what if the entirety of a page could be served from memory (unless the browser is told to load a new page).

That isn’t something that is impossible – making your website cache-able allows you to do just that. While first-time visitors won’t always get a smaller page-size, they will the next time they visit the page. That’s a good thing.

WordPress has an entire collection of caching plugins, but my favorite are:

• Quick Cache (Used on all of my WordPress sites)
• WP Super Cache
• W3 Total Cache

Another powerful way to help boost the speed of your website is to use a CDN – storing your content closer to your readers. I use Amazon’s CDN, and have a few articles that you can read to find our more information on their function.

How Do You Decrease Page Size?

The methods mentioned above accounted for the biggest chunks of the page size decrease. There were over 50 optimizations I made in different areas, thus making it impossible to go in depth on each one in a post. If you’d like more information, feel free to comment.

Photo Credit: Thumbnail