Google Website Speed Test

Google Website Speed Test

Everyone likes to go fast. We like fast cars, fast services and fast websites. How do you know how you are performing (I mean with your website!)?

It looks like your website pages load fast, but are they really? Is one second really a big deal?

A 1-second delay in page load time yields:

• 11% fewer page views
• 16% decrease in customer satisfaction
• 7% loss in conversions (source: Aberdeen Group)

Amazon found this to be true, reporting increased revenue of 1% for every 100 milliseconds improvement to their site speed. (source: Amazon)

So did Walmart, who found a 2% increase in conversions for every 1 second of improvement.

Akamai did a study and found that:

That’s not all. A study by Akamai found that:

• 47% of people expect a web page to load in two seconds or less.
• 40% will abandon a web page if it takes more than three seconds to load.
• 52% of online shoppers say quick page loads are important for their loyalty to a site.

Who knew it meant so much! 

Today's blog is about some minor things that you can and should be doing with your website to help speed it up. Many of the really good solutions need to be done by a webmaster and that will cost you $100-$150 per hour. So, rather than wait until your site gets too slow, be proactive. Enter information, pictures and code accurately when you are making the change or update to your site or blog.

It's not always the files either. Pages may load because of extraneous coding issues. I'm not a webmaster so some of the resolutions are bit harder for me to explain, but would be beneficial to have done on my own site! 

Here are 5 tips to help you increase your website speed and take advantage of the higher conversion due to faster loading times.

1. Reduce the number of Plugins. Too many plugins can cause chaos with your site. If you have similar plugins that offer similar results, they may fight for position. Slowing down the site. Also having too many plugins means that they maynot all play together well or when there is a WP update they may not have a new version of thier plugin and it will be confused ... and  slow down your site!
2. Optimizing Images and Graphics. When photos are taken, the person taking them usually has the resolution set fairly high. This is great if you are going to be printing the photo, but if you are going to be using it online, high resolution only slows down the loading time. You don't want your picture too small or it will be blurry on some pages, but don't make it so large that it takes too long to load.  (Download a Quick Tutorial on Optimizing Photos and Graphics). With this type of file you need to focus on 3 things: Size, format and the src attribute. 
   1. Size. As I said, oversized images take a long time to load. Use your image editing tools to:
      1. Crop your images to the correct size. For example if your page is 570px wide, it would be silly to upload a graphic that is 2000px. First resize the photo in your image editor to the correct size.
      2. Reduce color depth to the lowest level. So that resolution we talked about, if we lower that, it will impact the clarity a bit but you don't have to go too low.
      3. Remove image captions.
   2. Format. JPEG is the best option. PNG is good however, it may not be compatible with some older browsers. GIFS should be used only for small graphic (less than 10x10 px or a color pallette of 3 colors or less.) Do NOT use BMPS or TIFFs.
   3. Src Attribute. The Src attribute tells the search engine where to find the original of the graphic. Avoid empty scr codes. In HTML it looks somewhat like this where the location of the image is entered in between the " ". When there's no source in between the " " the browser makes a request to the directory of the page itself. SLOOOOW. Don't forget to have your images optimized before you add them to the page.
3. Prioritize Above-the-Fold-Content. As we've discussed before, short attention span can sometimes keep readers from going below the fold (especially if they have found a link to something else that interests them.)  So it makes sense to put the most important information above the fold regardless of whether you have hired anyone to make any of these speed updates. For real estate websites you would want to put your quick links above the fold. Don't just list them, but incorporate them and add a Call to Action just above the ATFC line. 
4. Enable Compression. Some of the things your website speed is based upon are photos and graphics. If you are a WordPress user, you can download plugins that will automatically optimize your graphics and photos when you upload them. There are also dozens of stand-alone programs that are free to use, that will also compress your graphics to reduce loading time. Bulk Smush offers a free and pro version for WordPress and you can Google "Website Speed Optimizers" to find something that looks easy for you to manage if you don't have a WordPress website.
5. Minfy Resources. WYSIWYG makes it easy to build your website and pages, but messy code can slow it down. So it helps to minify your code. There are several apps out there that can help you with this but sometimes it can get a bit techy. So you will have to be careful. Google offers PageSpeed Insights Chrome Edition to minify html. CSS can be minified by YUI Compressor and to minify JavaScript, there is Closure Compiler. I can tell you, however, it is very intimidating and I don't even do it for myself.
6. Optimize CSS Delivery. There are two ways to get the content into your website. One is to use CSS (CSS stands for Cascading Style Sheet and it's used like a style-sheet in MS Word. Anything labeled as Heading1 will have the same style, heading2, etc.). Or you can use HTML which is the normal way most non-professional website builders use. With html, you have code for how you want the text or graphic you are working with to look.

   Sometimes, however, html gets inserted twice. For example:

   would be CSS and it would already be telling the text that you are writing that it will be 14px tall and blue. But sometimes you might enter the code as

   SENTENCE HERE

   This would be a waste of code for the browsers to serch because it is coded twice for the same format. So use one or the other.  In general, an external style sheet (CSS) is preferable, because it reduces the size of your code and creates fewer code duplications.

7. Eliminate render-blocking CSS in "above fold content". As with the javascript description above, CSS does the same thing. if the CSS is messed up and unorganized, it's difficult for the search engines to understand and rank your page. Both 1 and 2 are they type of work that you would probably hire a professional to fix. It's not always easy to know which lines of script are slowing you down and even if you knew, you probably wouldn't be comfortable just getting rid of them.

Some of these tips are easy to implement, but many are possibly more advanced tactics that can be intimidating if you aren’t technically inclined. If that’s the case, you might want to get help.

Here's one resource I can recommend:

If you like digging in and doing it yourself, Google Developers has useful information that can help you improve site performance. Or give me a call. We just updated a website from 61 speed on a mobile device to A+. (two different tools to analyze.)

Here are a few tools to analyze your site speed:

• Pingdom. Test the load time of that page, analyze it and find bottlenecks
• Google PageSpeed insights analyzes the content of a web page, then generates suggestions to make that page faster.
• Yahoo! YSlow
• WebPageTest

It's important to keep your website and blog running at maximum speed. It's more important on a mobile device than desktop these days.

 These are some tasks that you just might want to have hired out.

1. Leverage Your Browser Caching. Most of you know that your browser keeps your history and cache information in the History file. I remember recently explaining about dumping this file periodically to increase the speed of your computer. However, websites do the same thing. When the website is built it doesn't always have a way to periodically clear the cache and your pages load slower. Things that can be cached and stay are things like your logo, your CSS file and other resources. So next time the visitor comes to your webite or even move page to page, the cached image is already there and won't have to be reloaded and slow down the page. 
2. Eliminate render-blocking JavaScript above-the-fold content. Search engines read top down as do readers. If they find messy coding up above the fold then the page will load slower. Above the Fold is actually the point on your page when it loads where you can no longer see more content unless you scroll. It's meant to be like a newspaper. When you pick up the newspaper, it's folded in half. News distributors try to put the important stuff above that fold in the paper in case you skip the bottom half. Same with websites.