The speed at which your site loads is enormously important. And it’s not just that Google thinks it’s important, it’s that your visitors think it’s important. Make them wait around too long and your traffic will drop like a rock.
A sampling of shocking statistics Hubspot sourced:
Here are a few simple tricks you can use to improve site speed without calling a developer.
It’s easy to upload large images from a stock photography site or your smartphone without noticing. At a minimum, these images are typically a couple megabytes (MB) each. Large images are bad for loading times on desktops, tablets, and especially bad for smartphone users. In order to combat large image load time, it’s important to optimize images for web by compressing and reducing their size. If you’re not an Adobe Photoshop user, then check out Gimp. It’s a free photo editing software that has a lot of features similar to Photoshop. If you don’t want to use a more complex photo editing software like Photoshop or Gimp, try a free online tool like PicMonkey. You can resize, crop, rotate, flip, and add various effects for free.
Here are some guidelines you can use as a rule of thumb. Keep in mind every scenario differs but I’ve found that shooting for these work well.
| Usage | Height/Width Range | Optimal Size Range |
|---|---|---|
| Large hero image, homepage banner, etc. | 600px - 1600px | 100KB - 500KB |
| Medium to large inline paragraph images | 200px - 600px | 50KB - 100KB |
| Small inline images | 100px - 200px | 10KB - 50KB |
| Icons, thumbnails | 25px - 100px | 1KB - 10KB |
px = pixels, B = bytes, and KB = kilobytes
Another consideration is the average smartphone screen size. In the US, devices range from 375 to 540 pixels wide. So, if you add a 650px image with text that wraps around, the text could wrap in an awkward way.
The most prevalent image types found on websites are GIF, JPG, and PNG.
GIF - a raster image that uses a lossy compression algorithm to minimize the size. Not good for photography.
JPG - a raster image that uses a lossy compression algorithm. Great for photographs where high quality resolution isn’t required. Not good for images with text, and also forces a white background.
PNG - a raster image that uses a lossless compression algorithm. This has mostly replaced GIF. images as a web standard but are often larger in size. Great for photography, images with text, and images with parts that are clear or transparent.
Play around with various formats and see which best provides adequate resolution with the smallest size. Keep in mind the recommendations above with regards to photography and images with text.
In addition to these formats, there are vector based graphics. The benefit of a vector graphic is that the download size doesn’t change because it scales to whatever size you desire. These require a little more knowledge, so I won’t go into any detail except to say they aren’t used for photography.
Most web content management systems provide a WYSIWYG editor (what you see is what you get). It’s basically a rich text editor that allows you to edit and format text, much like word processing programs. There are often features to change the font, font size, and color. Any time you use one of these features you add additional code to the page. For example, look at the snippet below.
Tongue Twisters
What would a woodchuck chuck if a woodchuck could chuck wood.
Sally sells seashells by the seashore.
This has a title and two tongue twisters. The title was set to size 18, bold, and green. The woodchuck tongue twister was set to bold, size 12, and the font Comic Sans. Sally’s tongue twister was the same size and boldness but changed to blue. A typical WYSIWYG editor will produce the following code for it.
<p><span style="font-size: 18pt;"><strong><span style="color:green;font-size:20pt">Tongue Twisters</span></strong></span></p> <p><strong><span style="color:black;font-family:Comic Sans MS">What would a woodchuck chuck if a woodchuck could chuck wood.</span></strong></p> <p><span style="font-family: comic sans;"><strong><span style="font-size:12pt;color:blue;font-family:Comic Sans MS">Sally sells seashells by the seashore.</span></strong></span></p>
Designers and developers everywhere are revolted, and I bet your site visitors aren’t too impressed either. Instead, keep it simple and use built-in heading tags for larger text.
What would a woodchuck chuck if a woodchuck could chuck wood.
Sally sells seashells by the seashore.
This snippet now becomes the code below.
<h4>Tongue Twisters</h4> <p>What would a woodchuck chuck if a woodchuck could chuck wood.</p> <p>Sally sells seashells by the seashore.</p>
You’ve achieved a smaller code base, and it’s more readable to your end user. Text doesn’t have as big an impact as images because it’s easily compressed. But it still matters.
Uploading and hosting videos and other media on your own site can significantly decrease site speed. With so many social media and content sites, like Twitter, Facebook, and YouTube, you shouldn’t need to use your own site since these third-parties provide easy ways to embed content onto your site.
Another word of caution is that every embedded piece you add increases the overall load time of your page. Consider how necessary these are and whether or not they add any real value. One simple question to ask is, “Will this get users to call, email, or buy from me?”
We’re all for useful content for your site visitors, but these features have a time and place but many novice content editors love to add whiz-bang content unnecessarily.
Many novice marketers also love to add tons of unnecessary content to pages. They feel they have to explain every facet of their product or service and provide encyclopedias of information about their company. The lesson here is to learn how to be concise. If you write five paragraphs of information, you can very likely condense it to one. Your prospects probably don’t need to know everything, and the less important details can be conveyed in the sales process. What is the least amount of information your prospects and customers need to take the next step?
Did you know that Google Analytics also offers suggestions on how to increase Page Load times? To find this in Google Analytics, navigate to “Behavior” and expand “Site Speed”. Click on “Speed Suggestions”. For every page, Google will offer ways to optimize page load speed (but some your developer might have to help you with).
Additionally, free evaluation and recommendation tools exist. The only drawback is that you will have to go through your site page by page. (You can always export your top 5-20 pages from Google Analytics to have a prioritized list from which to work).
