A DIY Guide to Page Loading Speed Best Practices

 In Top Tips, Web

What is page speed?

In a nutshell, page speed can be described two ways:

1) The objective time it takes for a browser to download and display all of the content of a web page.

2) The subjective perception of time taken for a full web page to load as the user sees it.

While the objective description is an important tool for studying load time in order to make improvements, the subjective user description is most important in terms of how the page speed will affect your website’s success. Your end user’s perception of how fast your website is is the true “It Factor” for determining page speed and its effects.

Why should I care about page speed?

Page speed is perhaps the most critical component to the overall success of your website. Just how important is it? For starters, page speed performance is the biggest factor affecting your user’s first impression of the site and their willingness to stay on it. Market Research Studies have concluded that a quarter of online users will abandon a website after a wait time of only 4 seconds. Go up to 5 seconds and nearly ¾ will give up.1 Large corporations such as Amazon and Google have determined that lowering their page size as little as 20kb can result in a 10% increase in overall traffic.2 These very slight differences in loading time have significant impacts to the effectiveness of your website and must be taken seriously.

Another significant effect of website page speed is search engine ranking. Search engines such as google use algorithms to rank how high up the list websites will appear in searches, and one of the biggest factors is your overall page speed. If you neglect your page speed, you could be missing out on a large percentage of potential users who would have been driven to your site through search engines. A great tool for testing how google ranks your website’s page speed is google pagespeed insights. Here are some DIY tips on how to get your pagespeed ranking up:

(Hint: If you need a refresher on some of the terminology described below, check out our guide to digital marketing terms!)

Page Speed Tip #1: Optimizing Images

The easiest and potentially most important way to increase your website’s page speed is by optimizing your images for the fastest possible loading. Images tend to take up a bulk of page space due to their file size. The smaller you can get that file size, the faster they can load on the browser and the faster your overall page will be.

The simplest way to decrease their file size is to decrease their size in dimension. Photo editing programs such as photoshop will all have options for resizing images. For a typical web page an image is never going to need to be more than a thousand or so pixels wide, so no need for huge raw jpeg files to fill out a banner.

Your dpi (dots per inch) is important as well. The standard dpi for a digital image is 72dpi, so converting that down from a 300dpi print-optimized photo can really save some space without affecting the quality at which the image will display. Photoshop also has a great option to save even more space using the “Save for Web” option, which gives you many options for decreasing the file size, such as decreasing the amount of colors used. This will also export the file as a png, a great file-size conscious format for small images and graphics. There are also several online file compression programs, such as tinypng.com, that you can use if you don’t have proper photo editing software.

Page Speed Tip #2: Optimizing Code

Another significant source of lag in page loading speed is code, such as javascript and CSS. When a web page is being displayed on a browser the browser has to pull all of those code sheets from where they are linked. These code-pulling actions are called “HTTP requests,” and they add significant load time. The easiest way to mitigate the problem would be to try combine all of your CSS files or Javascript files into one sheet, rather than having to pull from several. However, this is not always an option depending on your wordpress theme or other factors. Your other option is to try to simplify the code in those sheets, either manually or by using a plugin such as Better WordPress Minify, or by utilizing more in-line CSS rather than pulling from a stylesheet.

Javascript code can be an even bigger headache, as it will often try to load before everything else on your page, and that can add some serious time if it is a complicated code. This can be fixed by adding your javascript code to the footer rather than the header so that it loads last, and this as well can either be done manually or with a plugin such as Scripts to Footer.

Cutting down on the amount of code being loaded on a given page also means keeping the site lean, as in keeping the number of plugins, widgets, and embedded content to a minimum. This is not always an option depending on what your page needs to display, but is something that should always be in the back of your mind.

Page Speed Tip #3: Utilizing Caching

Caching is when the user’s web browser or web server temporarily stores your site’s files so that they don’t have to be requested multiple times as they navigate the page. This significantly reduces the bandwidth your site uses up and increases its speed.

Caching is most often used on CSS, Javascript, and image files because they will not change and it will have the greatest impact on improving page speed. Cache options can be set manually or by using a plugin such as WP Total Cache. Using advanced options you can set expiration times for these cached files so that the user’s browser can pull in fresh files as needed.

Utilizing all of these do-it-yourself page speed optimization tips can give you lightning-fast pages that users won’t abandon, and help dramatically increase the number of visitors to your site and its overall impact.


Invite Change Media Group to your inbox! You’ll get our start-up series of emails, then one email a month of must-know info. No spam ever, unsubscribe any time.


 

John Flynn is the Web Development and Production Artist of Change Media Group. He creates digital and print content for clients, bringing ideas and concepts to life from start to finish. John designs and constructs everything from small run direct mail to full campaigns and complete websites.

Recommended Posts
Contact Us

Want to get in touch? Shoot us a message and we'll get back to you, asap!

Not readable? Change text. captcha txt