People keep telling you that your website is slow to load. When you run a test using Google PageSpeed Insights, it gives you a slightly disappointing score. You know that faster websites perform best in search engines. So what can you do without redesigning your whole website?
Here are a few things you can change right away that will improve your site speed.
Stop using sliders on your homepage.
A “slider” is the name we commonly give a banner feature at the top of a page that includes several slides of content that move or animate in some way. Sometimes the transition style is actually a sliding effect and sometimes it is a fade or something else. This feature is most commonly on a homepage.
It seems like such a trendy and important tool for conveying several points of information on one page. Many website owners are so convinced of this that they really have a hard time letting go of the slider. But a slider is usually comprised of a bunch of layers and scripts or plugins, and they are notorious for performance problems.
In fact, the trend of sliders has sailed. Even major retail giants who used to highlight different sales and products in a slider have stopped designing their content this way. So there is no need to worry about missing your slider.
If you remove the slider feature from your homepage and replace it with a compelling single image, bold heading, and dynamic call-to-action, your page will perform better and likely even convert customers.
Remove the Google Maps embed from your web page.
Photo by Ingo Joseph
What you probably don’t realize is that the scripts used to embed and load that map into your page produce extra overhead that affects your website. You have no good way to optimize them because they are not hosted or controlled by you. I frequently run speed tests on websites that mention these kinds of scripts as a culprit of optimization concern.
You can still provide the convenience of a map for your visitors without the embed method. I encourage you to consider a custom illustrated map of the area that you can insert as an image. You can also still link to the Google map from your website, without embedding it. This will completely eliminate the slowness issues caused by an embedded map. Plus, it will omit the requirement to integrate Google’s Maps API. That is another big benefit since you don’t need to worry about keeping up with API keys.
Optimize your image sizes.
Website owners commonly have challenges with images. Even big brands make the mistake of uploading stock photos to their website without ever renaming or resizing the file first. Site admins often assume that a program like WordPress will just “take care of it”. And designers sometimes assume that if they attempt to reduce the size and file resolution of their images, they will become poor quality and ugly. The good news is, it is possible to have beautiful quality imagery that is optimized for speed.
For the hesitant designer, it’s important to know that content on the Web does not need to be high res. Your images should never be as high resolution as they would be for print media.
If you are purchasing a stock photo, you likely purchased a large copy of the photo originally. This is a good idea, in case you need to use that image for multiple sizes and purposes. However, once you determine exactly where you are going to use it on your website, you should prepare the image before you upload it.
- If the image is greater than 100 DPI, you should resize it to a lower resolution that is ideal for web use. There is no need to have a 300 DPI image on a website.
- Resize the image to the dimensions of the content area you plan to use it with. This is commonly going to be the largest desktop size you would see this image displayed. (Use a graphic program like Photoshop to do this, not your website software.)
- You may also wish to create another version of the image for the mobile display, which will be set to a different smaller dimension.
- When you save this new version of your image, name it well, with a description that represents the image as well as a related keyword, instead of keeping the “stockphoto123” filename.
- Finally, use a compression tool like tinyjpg.com to optimize the size of your image even further. Download those final “tinified” copies and preview them, to make sure they are still up to par. Then, use those final files as your actual image to upload and insert to the web page.
These quick tips are a great start to optimizing the speed of your website and following some best practices. Even if your website has a vast amount of pages, I encourage you to take these steps on your homepage and other cornerstone pages. After you complete them, retest your website’s performance score for many different pages to see how it improves.