5 Ways to Make Your Site Smaller and Faster

Confession:  I'd say once a week I genuinely wish I was a kid who spent his work day cutting grass and doing landscaping.  Why?  Because at the end of the day, they are able to say "the grass is cut, the job is complete."  As Web Developers, we can't ever say that, can we?  A site can always be more efficient -- there are always strategies for eliminating bytes.  Always.  And as long as we realize that, we internally and eternally say "the site isn't good enough."  To be a great everyday developer, we're almost destined to feel as though our work isn't good enough -- what a negative way to live our lives!

The good news is that there are a few methods for incredible easy gains in the performance and load time departments.  Here are five gains you can complete in minutes to make your site faster for all users!

1.  Squash Images - ImageOptim

Squashing images is the ultimate free pass in improving site load time.  Photoshop and other image editing applications are infamously inefficient with image compression, causing many KBs of extra download upon each request.  The good news is there are many utilities to eliminate those extra KBs!  My favorite Mac utility is ImageOptim.

You can use gzipping as much as you'd like but extra source KB size is wasteful so using an image optimizing utility is as valuable as any other strategy you can use!

2.  CloudFlare

CloudFlare, a service that starts as free, offers loads of enhancements:

• CDN services
• JavaScript, CSS, and HTML minification
• Downtime backup services
• DDOS prevention
• Location-based asset serving

This isn't a placed advertisement -- davidwalsh.name uses Cloudflare and has used all of its features.  My site has saved GB's of data in transfer thanks to CloudFlare.  Even when my server has been down, CloudFlare has served up the pages flawlessly.  A complete win when you use CloudFlare.

3.  Smaller Glyph Icon Libs with Fontello

Glyph fonts have been popular for a few years now and I'll pass on listing the reasons why -- we know why they're awesome.  The problem is that we lazily use entire glyph font files whilst only using a fraction of the fonts within them.  And though we seldom consider them, font files are usually massive.  In an emoji:    :(.  Lucking utilities like Fontello exist.

Fontello lets you choose individual glyphs from several glyph fonts and thus make your font icon stylesheet KBs smaller.

4.  Generate Static Files

We love our dynamic scripting but why serve dynamic pages when static pages will do?  This is a practice often seen with WordPress -- the post content generally doesn't change but the advertisements and comments may.

The answer?  Finding the key points when a page may change and generating static content when those points occur.  A sweet WordPress utility called Really Static which accomplishes this feat for the blogging platform.  Of course your non-WordPress CMS system will require custom page generation but the speed advantages will be plenty worth it.

If you have content that you need to rotate in those static pages, like advertisements or links to more current content, consider JavaScript and AJAX requests to get that content -- the page will be static and the JavaScript will be served from CDN -- the only speed consideration will then be the AJAX request!

5.  Lazyload Resources...or Embed?

A commonly known symptom of site slowness is the number of requests each page generates.  In the past we've remedied this problem with CSS/image sprites, concatenating JavaScript and CSS resources, and using data URIs.  You could also lazyload resources or simply embed them in the page:

document.querySelectorAll('article pre').length && (function() {
    var mediaPath = '/assets/';

    var stylesheet = document.createElement('style');
    stylesheet.setAttribute('type', 'text/css');
    stylesheet.setAttribute('rel', 'stylesheet');
    stylesheet.setAttribute('href', mediaPath + 'css/syntax.css');
    document.head.appendChild(stylesheet);

    var syntaxScript = document.createElement('script');
    syntaxScript.async = 'true';
    syntaxScript.src = mediaPath + 'js/syntax.js';
    document.body.appendChild(syntaxScript);
})();

The example above loads the syntax highlighter only if elements on the page require highlighting.  And what if the syntax highlighter CSS is just a few lines?  You could save the extra request and embed it within the page:

	
	<style type="text/css">
	<?php include('media/assets/highlight.css'); ?>
	</style>
</head>

Or you could concatenate the highlighter CSS to your site-wide CSS file -- either is a benefit!

As you can see, there are some incredibly easy speed and site gains to be had if you're willing to put in the few minutes effort to make them happen.  And when you think about the number of visitors your site gets, and then the number of pageviews, you can see why these micro-optimizations are so important!