divider

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

Services: Law Firm Website Design . SEO . Internet Marketing . Law Firm Marketing Guide . Content Marketing . PPC

“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 Posts

Ready to Take Your Website to the Next Level? Great Ideas & Results Only a Phone Call Away

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Let's get started.

One Response to I Feel the Need, the Need for Speed! Make your Website Load Fast.

  1. 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!

Leave a Reply

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

*