I feel the Need, the Need for Speed! Make your Website Load Fast.

Peter Boyd

March 1, 2013

“I Feel the Need, the Need for Speed!”  – Maverick and Goose

Why Does Speed Matter?

Not only do users get annoyed with slow loading pages, but they can affect your rankings in search.  People will leave slowly loading websites, and they may not even know you exist if your website loads too slowly.

You should regularly check your website loading speed with these tools:

  • PageSpeed Insights
  • YSlow – Toolbar for Chrome or Firefox
  • Firebug – Use the Net tab to see how things load in real time. Makes it easy to find the offending script. Seriously, use the Net tab. It has awesome speed loading info.

Make Sure your Website Loads Fast

So why do I feel the need for speed?  Our site was almost 9 months old, so we had some code and graphics bloat.  We recently did a major review of our own website.  We noticed the blog was loading sloooooooooooooowly.

First, we found a plugin that caused the load time to increase from a less than a second to over 5 to 10 seconds per page, just by itself.  Ouch!  Obviously, we deleted that plugin.  From there though, we started to look at all our code and found ways to improve.

Here are ways we improved our own code:

  1. Plugin Check. We use WordPress for our blog, so we checked our plugins and removed any that were not really in use (i.e. installed but not really needed).  We also consolidated some plugins as they were overlapping with each other.
  2. Sprites. We launched the new site last summer with Sprites for graphics, but over time, we had to update the Sprite graphic with new graphics.
  3. Graphics. We removed some non-essential graphics (i.e. fades, shadows, and other textures). It is more of a flat design, but that is good.  The new design loads faster, while looking cleaner and more modern.
  4. CSS and JS. We combined JavaScript files, ditto for CSS.  Now the JavaScript and CSS load a lot quicker.
  5. Image Smushing. We smushed a bunch of images.
  6. Killed Non-Essential JS. We had JavaScript loading globally for all pages in the header. We killed that and instead only loaded it when needed.
  7. Turned on WP Super Cache for the Blog. This helps some, especially with frequented pages.

The Results

Overall, we reduced our home page loading from 1.5 MB of total size of everything to just 867KB.  Most of that space is the 5 high-res graphics for the home page slider and the 338KB sprite for the entire site graphics. We need those to make the site look good.  This reduced the home page load time from 5 to 8 second in full to 2 to 4 seconds.

The good news is that with modern caching, once those files load the first time, then the rest of the site typically loads less than 50KB a page (sometimes just 10KB).  So sub-pages are amazingly quick, along with the blog. Typically they load in less than a second or two.

Next Steps

There is still more to be done, but alas, clients’ websites come first.

site load speed

Related Articles in Coding,

Our Services for Law Firms


5 Responses to I feel the Need, the Need for Speed! Make your Website Load Fast.

  1. Edward Beckett
    5:44 pm on March 1st, 2013

    Good stuff …

    Bloated sites will pay heavily in terms of usability and even in search rankings …

    Page Speed Insights and YSlow are great tools to get an idea of your sites performance …

    I’m running WP now … Running WP Total Cache yui/compressor for minimizing and combining all my html/js/css and memcached for performance — my sites’ lightning fast now …

    Having a CDN for all the static content and images pays off big time and they are really inexpensive now …

  2. Pol
    4:12 pm on March 7th, 2013

    The format of your logo is wrong. The same picture converted to PNG-8 and commpressed using http://compresspng.com with 16 colors is only 2KB (vs 10KB). It’s just an example, that the first step of every optimization is choosing the right format.

  3. Scott
    10:43 am on March 8th, 2013

    Hi Pol,

    Thanks for your comment. I took some screenshots of our logo compressed in PNG format using the website you provided.

    PNG-8: http://screencast.com/t/vCwTaj00
    PNG-24: http://screencast.com/t/QbZ94FMXO9

    While the PNG-8 image distorts the logo with its limited colors, the PNG-24 logo does look up to par in terms of quality and for only 3kb. However, I chose not to use this method for two reasons:

    1) Compress PNG’s formula makes the resulting PNG un-editable. If you open the PNGs in Photoshop or another image-editing program, they are not recognized as PNGs anymore and have radically changed. The Elephant is excellent for large PNG images that won’t be tweaked going forward but for logos especially, I prefer the the uncompressed image to easily make changes in the future without the original PSD file.

    2) Since our site uses a solid background, I prefer non-transparent image formats reserving the transparent PNGs for gradient backgrounds and the like.

    When it comes down to small savings of 2-3kb, I am swayed to the side that offers a higher quality and easy edits in the future. That said, I totally agree with compressing large PNGs from 120kb down to 60kb for a 50% savings but sometimes, preference wins out in development-decisions. I did re-visit our logo and re-saved it as a JPG which reduced the size from 10kb to about 5/6kb.

    Again, thank you for the comment and for taking a look at our website!

  4. Ellend Largo
    6:16 am on March 14th, 2013

    Been working on my site for a while, my results are:

    google page speed
    The page Cheap Airport Parking Birmingham | Ai… got an overall PageSpeed Score of 97 (out of 100) and yslow Grade A.
    Overall performance score 99 YSlow(V2)
    There always room for improvenment.
    You have a nice site.

  5. Peter Boyd
    6:47 am on March 14th, 2013

    Thanks Ellend. Yes, text and small graphic sites will definitely load quicker.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

 

X PaperStreet slider logo

Free Consultation

Impress & Get Results.

Want a “wow” site now?

Get a quote.