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

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:

  • 64% of mobile users expect pages to load in less than 4 seconds.
  • A 1-second delay in page load time means a loss of 11% of page views.
  • A 1-second delay means a 7% reduction in conversions.

Here are a few simple tricks you can use to improve site speed without calling a developer.

1. Reduce Image Sizes

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.

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

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

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.

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

4. Avoid Plugins and Embeds

Plug-ins and Embeds

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.

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 in the sales process. What is the least amount of information your prospects and customers need to take the next step?

5.5 Bonus

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

GTmetrix
Pingdom

Happy optimizing!

About The Author:
Emilie Toll

Emilie joined Marketpath in September 2018 as the Marketing and Project Manager. Her responsibilities include: communicating regularly with customers on their project status and tasks, maintaining and adhering to project schedules and deadlines, managing invoices for customers, and contributing to marketing initiatives. She provides strategic guidance and content creation of marketing campaigns on behalf of clients through digital and social marketing. Emilie graduated from the University of Indianapolis with a BA in Marketing and French and an MBA in Marketing and International Business.

Are you ready?

Ready to learn how Marketpath CMS can provide more digital marketing flexibility, remove the stress and headaches of system upgrades, and improve your overall speed to go-live? Then it's time to start that discussion and begin your journey toward becoming a more successful marketer.

contact us now