Nobody likes slow websites. The average smartphone user will leave a website if it does not load within 3 seconds and 75% of internet users will not return to a website if it does not load in 4 seconds. Google has even begun to factor page speed into it’s search engine rankings. Now more than ever, its important to ensure that your site is properly optimized for the modern web. Here are a few easy ways for you to do just that.

  • Run a Speed Test

First, you’ll want to gauge how your site is performing without any additional optimization. There are many ways to do this. For an easy and visual method, submit your site to Pingdom and see how it ranks. You’ll get everything from a performance score to a breakdown on each piece of content. If you’re looking for a more intensive method, check out Google’s Page Speed Insights for use in conjunction with Firebug on Firefox.

  • Specify Image Dimensions

Browsers will begin to render your page before the images are loaded. By including image dimensions, you will allow the browser to efficiently render the page with the correct layout. You can do this by placing height and width tags in the HTML of each image. An example would look like this:

<img src="/yourimage.png" width="42" height="42" />

Just remember that you cannot scale images with this method; the browser will still download the full file. If you need to scale your images, do so through your image editor (like Photoshop) or an image resizer (like Shrink-O-Matic).

  • Optimize Images

Ensuring that your image files are as small as possible will make a big difference. Some images contain additional data or colors that are unnecessary. We can eliminate these unnecessary elements through the use of compression tools. You can use Yahoo! Smush.it for .JPEG, .PNG, and .GIF images (via online uploader or WP Plugin if using WP CMS). JPEGMini is a great tool for JPEG optimization (via desktop program). TinyPNG is good for PNG optimization (via online uploader or Photoshop plugin).

  • Put CSS at the Top and JavaScript at the Bottom

Create a site that is up to W3 standards by placing the CSS at the top of your code and the JavaScript at the bottom, for rendering purposes. This will prevent the user from being forced to look at a white page while everything loads.

  • Utilize Browser Caching

Storing cached versions of static resources will increase page speed dramatically. To enable caching, simply add the following code to your .htaccess file:

# BEGIN Expire headers
ExpiresActive On
ExpiresDefault "access plus 1 seconds"
ExpiresByType image/jpeg "access plus 2592000 seconds"
ExpiresByType image/png "access plus 2592000 seconds"
ExpiresByType image/gif "access plus 2592000 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType text/html "access plus 2592000 seconds"
# END Expire headers

Depending on your control panel or CMS, you may have to go through a different range of steps to modify your .htaccess file. Regardless of the process, always ensure that you treat your .htaccess file with care and pay close attention to any modifications that you make, as it is vital to the functionality of your site.

As the web continues to evolve, we can definitely expect to see site speed become even more of a priority, especially in the mobile realm. Take advantage of these tips yourself, or if you would rather have me do it, drop me a line and we can work something out.