4 Simple Changes To Speed Up Your Site
Posted in: Speed Up Tips   -   August 16, 2012

In this short article we’re going to explore a few simple things any site can do to reach a higher page speed score and reduce load times.

Does this image make me look fat?

In my experience one of the biggest factors for slow page speed is large image sizes. One of the first things you should consider is how to reduce the file size on your sites images.

Often I find sites serving up large images when unnecessary. A few components go into this, like resizing with HTML instead of using the correctly sized image, choosing the incorrect file format, and poor file compression.

  • Avoid resizing the image with HTML, as the client still has to download the full size image.
  • Use PNG only when necessary, like when you need a transparent background of an image. Otherwise JPG is fine in most cases and generally a much smaller file size.
  • Avoid using images to display text. If you can display text in place of an image, do so!
  • Sprite your images when possible, like social icons!

Further reading:

Hurt JavaScripts feelings.

You’ve probably noticed most sites have JavaScript in the header of the site, probably for organization. That is after all where you have just about everything else not pure HTML.

JavaScript however is best suited at the bottom of the totem pole, the way far depths of your page. Scripts can block the loading of a page. When deferred to the bottom, the page is already downloaded and the script can load with the page ready to go.

This is as simple as moving any JS to the bottom of your files just before closing body tags.

Further reading:

Buy local, avoid @import!

Sites with many stylesheets may often be using @import to handle multiple sheets and fonts. This could cause too many requests and they may not be loading in the order you would like them to. Never fear! If you don’t want to combine all your stylesheets you can still load them parallel to each other using <link> over @import.

Further reading:

Reduce Weights.

When using web fonts like Google Fonts, you have the option to select the weights of the font family you will be using. Instead of including the whole set of weights, evaluate which you use and only include those. I suggest keeping web fonts down to 2-3 at most. A font for headings, body text, and an additional for other areas of your site like quotes or subheadings.

You can take this a step further and even get rid of any unneccessary characters you won’t be using. When using LINK (not @import!) you can add a &text paramater to specify exactly what characters you need from the font family. See further reading for a more in-depth look at the text paramater on Google fonts.

Further reading:

These are just a few simple changes you can make to any site. To reach optimal speed levels you should consider expanding further by evaluating your hosting solution, caching options, and delivering your site to visitors via a CDN.

Hailing from "Charm City," Baltimore, MD. Drew Poland (@bmoredrew) is a WordPress Developer and Consultant, lover of Argyle, and connoisseur of Coffee. Currently cultivating an awe-inspiring beard... one that would even make Zeus jealous. You can find out more about Drew at his WordPress Developer blog.

Tags: , , , ,

  • http://blog.justindorfman.com jdorfman

    Great job! This is one of the best post yet. Good fast read with a lot of knowledge packed in.