social

Digital Marketing Insights | The Marketpath Web Digest

5 Easy Ways to Speed up Your Website without calling Your Developer

Posted by

The speed at which your site loads for end users 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, if you have any to begin with. Here are a few simple tricks you can use to improve site speed without calling a developer.

1. Reduce Image Sizes

It’s way too easy to upload images from a stock photography site or your iPhone. At a minimum, these images are typically a couple megabytes (MB) each. This is bad for desktops, tablets and especially bad for smartphone users.

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 picresize. 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.

UsageHeight/Width RangeOptimal Size Range
Large hero image, home page banner, etc600px - 1600px100KB - 500KB
Medium to large inline paragraph images200px - 600px50KB - 100KB
Small inline images100px - 200px10KB - 50KB
Icons, thumbnails25px - 100px1KB - 10KB


px = pixels, B = bytes, and KB = kilobytes

Google has a great image optimization reference here. Also note that the average smartphone size is around 350 pixels in width so if you add a 200px image with text that wraps around the text could wrap in an awkward way.

2. Change Image Type

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.

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 the various formats and see which format 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 and I won’t go into any detail except to say they aren’t used for photography.

3. Avoid Excessive Styling

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. 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><strong><span style=”font-size: 18pt;”><span style=”color: green;”>Tongue Twisters</span></span></strong></p>

<p><span style=”font-family: comic sans;”><strong><span style=”font-size: 12pt;”>What would a woodchuck chuck if a woodchuck could chuck wood.</span></strong></span></p>

<p><span style=”font-family: comic sans;”><strong><span style=”font-size: 12pt;”><span style=”color: blue;”>Sally sells seashells by the seashore.</span></span></strong></span></p>

Ugggh. Designers and developers everywhere are throwing up in their mouths right now. Please drop the disgusting over-styling. You may think it’s pretty and looks good but your visitors don’t and readability of your content just went down. Instead, keep it simple and use built-in heading tags for larger text.

Tongue Twisters

What would a woodchuck chuck if a woodchuck could chuck wood.

Sally sells seashells by the seashore.

This snippet now becomes the code below.

<h3>Tongue Twisters</h3>

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

4. Avoid Plugins and Embeds

Many social media and content sites like Twitter, Facebook, and YouTube provide easy ways to embed their content into your site. 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?”

Don’t get me wrong. These features have a time and place but many novice content editors love to add whiz-bang content unnecessarily.

5. Minimize Content

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 by your sales team or over a beer (if you are the sales team). What is the least amount of information your prospects and customers need to take the next step?

If you have questions about improving your website speed, contact us today.

link
Comments (0)
Post a Comment
Name:
Email: (Not Displayed)
Website: (optional)
Comment (HTML tags will be stripped):
Please type the alpha-numeric code above (case sensitive):
Error