A website is like a building. The structure is your code and database, the land it is on is your server, and its address is your domain name. In order for a user to have a good experience, the structure needs to be sound, the space and utilities need to be adequate, and the address needs to be accessible. A fault in any of those parts will lead to a sub par or even unusable experience, in addition to serious WordPress performance issues.
In order to know where your site is slowing down, you need to test it objectively with tools that give you sizes and load times. If you are using a modern browser like Chrome or Firefox, these tools are sitting right in front of you. While in either browser click on the Help item in the menu and type in Developer. You will see options that open a new window which show all the information about the page you are on. The Network tab allows you to see how long the page takes to load and the size of various files involved.
Impact of Images on your Website
In the last eight years, the overall size of an average website has grown over 300%. In the same timeframe, bandwidth has not kept up. This has resulted in sites that look nice, but users never get to see them since they take too long to load. The average user gives a site three seconds to load before hitting the back button and going somewhere else. While many website testing tools give you a lot of information about other technical issues, the overall image size remains the number one way to improve user experience.
The best way to optimize images is by reducing the size. After adjusting image size accordingly, take a hard look at each page and it’s use of images. Do you need all of the images that are there? Do you need multiple, or any, for that matter, full-size images? Can text convey what your image conveys? Anything you can remove means an immediate reduction in load time. Although the image type is important, the method you use to deliver those images is just as big of a deal.
CDN, Caching, and Lazy Loading
The three main methods for optimizing images involve a Content Delivery Network(CDN), caching, and plugins/code.
CDN—the Shock Absorber for the Internet
Content Delivery Networks have been around for a while, but it has only been in the last five to 10 years that access and cost has allowed them to become available to the majority of websites. Today your web host should include a CDN service out of the box, like Pressable does.
When your site is connected to a CDN, two things happen: 1) Your images are delivered from a number of servers across the globe, reducing strain on your main server and 2) users get images delivered from a location that is closer to them from a speed perspective. This allows your server to focus on processor intensive tasks like database requests. It also delivers your images faster.
Inherently in any CDN scenario, caching has to be involved. This allows an image to be kept on the various CDN servers for longer periods of time. There are a number of configurations for caching but your hosting provider should take care of most of them for you.
Lazy Loading For the Win
After your CDN caches images, the next step is considering how to further optimize image delivery to your users. Lazy loading should be on the top of your list. When an image is lazy loaded on your site, it is not actually loaded until the user can see it on their screen. This offers a significant advantage and should be implemented at all times.
There are two ways to lazy load images on a WordPress powered website: by using custom code or a plugin. In many situations, it is advised to use custom code for optimizing your site in WordPress; however, in the case of lazy load images, there are a number of great plugins available that have a number of additional benefits. Jetpack is free and comes with the lazy load capability. Jetpack Premium, a paid version of Jetpack, gives you video hosting, backups, and a lot of other great features. At Pressable, all websites get Jetpack Premium available at no extra cost.
Putting it All Together
Optimizing your site involves looking at your site’s structure and the resources available through your website host. Images are the number one area to focus on if you want to speed up your site, improve your users’ experience, and increase revenue. Whether it’s image size or the manner in which you load the images, it’s important to do a regular site audit to make sure your images are optimized properly.
If your site is still experiencing performance issues after you’ve tackled image size, type, and loading, Pressable has a team of WordPress experts ready 24/7 to help you with anything that occurs on your site. Just login to your Pressable account and submit a ticket. Our average response wait times are less than two minutes, so your site will be up and running before you know it.