Although HTTP/2 may change some of the ways we optimize sites, in the meanwhile we’re going to cover some simple ways to help website load faster. First up, what are some ways to reduce the overall size of the data being loaded?

File Sizes

This may seem like a basic concept, and it is, but the smaller the page and its related assets, the faster the page is going to load. If all other things are equal, a page that only has 50k of assets to load is going to load faster than a page that has 5,000k of assets to load. And since this is the case, it’s a good idea to look at the file sizes of the various assets your web pages use. For instance, the images, JS, CSS, and other related files are required by the page. Sometimes, they can be larger than you realize, and can slow down the site significantly. Let’s look at a couple types of assets, and some ways to reduce their size.

Images

The good use of images can really enhance a site, but if you’re not careful, the size of the images on a page can easily go overboard. Especially now, with all of the sliders and carousels that are popular today, it can be easy to end up with huge download sizes for the page due to the use of images alone. In order to keep images files in check, here are a few tips:

  1. Make sure Images are the Right Dimension: If the image for a page only needs to be 300x300, there’s no reason to use the 2400x2400 version, and then change the dimensions of the image via CSS. Making sure the images used on the page are the right dimension is a great first step.

  2. Make sure Images are the Right Format: Similarly, if the images doesn’t need to have transparency, then you may not need to save it as a .png. Saving it as a .jpg instead, for instance, especially for large images, can make a huge impact.

  3. Make sure Images have been Optimized: Even after using the proper format, there is often still size savings that can be had. For instance, I’ve found that exporting an image using Fireworks will often result in a significantly smaller file than doing so through Photoshop, even when the format and compression are the same.

    There are also online options to compress and optimize your images, and depending on how the file was originally saved, could offer significant size savings while keeping the same level of quality. Smush.it used to be a popular tool for this, but the service was recently discontinued by Yahoo!. Some other alternatives include kraken and tinypng.

Text-based Files

In addition to images and other binary formats, text-based files also offer on opportunity to help cut down the total size of a web page. Specifically, I’m thinking of your HTML, CSS, JS, and other similar types of files. Although the savings found here often aren’t quite as dramatic as those gained from optimizing images, there still are usually some things that can be done. Here are a few things to keep in mind:

  • Use only files that are necessary: This comes into play especially when you’re using JS libraries or plugins, or CSS frameworks. These can be very useful and helpful, but if you’re not judicious about when to use them, they can also lead to a bloated page that is loading way more files than it needs to. For instance, do you really need the entire jQuery library if all you want to do is hide an element here and there? Or, do you really need to utilize an entire CSS framework just for the handful of classes that you actually use. Or, does that plugin that’s only used on the homepage really need to be loaded on every single page? Thinking through questions like this can often help you find places to cut down on the number of files your page loads, which decreases the the cumulative size of the files needed by the page.

  • Minify your files, especially JS and CSS: Once you’ve got the files you need, minification allows you to make those files even smaller. Minifying data is taking out all the unnecessary data in a file—thus making the file smaller—but not altering how it works. This may include the removal of spaces, comments, and line-breaks, as well as shortening the names of variables or functions in order to conserve space. Now days a lot of web development frameworks and CMSs have this feature baked in. For instance Rails uses Sprockets to do this for static assets used in production. There are also plenty of online options that can minify files for you, as well as plugins for task runners like Grunt or Gulp that can help automate this process.

Conclusion

The bottom line is that the smaller the files your page needs to load, the faster it can load. Images provide a huge opportunity for saving space, as do the text-based assets your page utilizes. Ultimately it comes down to thoughtfully considering what the page actually needs to render, and seeing if there’s a way to deliver those needed assets in the smallest format possible.