You’ve heard the cliché that perception is everything, and it’s the same for websites. Your website’s first impression can either push users away or turn them into customers. Speed is a large factor in first impressions, but your website’s perceived speed isn’t always the actual speed. You can make small changes to your site’s code to give it the perception that it loads much faster than it actually does and hide some of its speed imperfections. The end result is a user’s first impression of a fast-loading site even if test actual speeds remain the same.
You might think your site is fast enough, but a survey conducted by Search Engine Land showed that even a half a second load time delay affected business metrics. One second impacts user engagement by almost 2% and a four-second delay impacts user clicks by over 4%. This may seem like a small number, but when you speak in terms of thousands or millions of visitors a month, this statistical value is a very high amount of potential customers.
So, what do you do when you’ve exhausted every measure to make your site’s performance as optimal as possible? Here are a couple of suggestions that will make load times seem faster to users.
Lazy loading is a trick using Ajax. It’s mainly used with images or parts of your site that require a high amount of calculation before content displays.
Take a page that shows reports. Reports usually take a lot of calculations on the backend, and then the database returns values to the frontend. Depending on the efficiency of your SQL, it can take an inordinate amount of time before the report values are returned to your frontend. Without lazy loading, your server waits for these values to return before displaying content.
The same issue can be said of images. Suppose you have a site that requires high-quality images. The better quality of your images, the more amount of space they use and the longer it takes to display in a browser.
If you’ve never worked with Ajax, you’ve still probably seen an Ajax loading screen. Ajax components load with the spinner most users recognize. The spinner indicates that content is loading. The main reason developers work with Ajax is that you don’t need to perform an entire page refresh when making calls to the server. You can send a request from a div container and have only that div’s content update.
With lazy loading, you have components of your page load in parallel with your main page content. This means that faster loading components such as plain text, backgrounds, colors, and smaller images will load quickly and your longer processing components will show a spinner until they finish loading.
If you use lazy loading for components that are below the fold (the section of your page where users must scroll down to see), your users might never even see the spinner. The perception is that your users can see a running page before components that slow down the page display. Users can start reading your page before large images display or reports calculate. This keeps users engaged even if other components take too long to load.
The image compression debate always comes with the predicament of image quality. Photography sites, traveling sites, and others that depend heavily on image quality without suffering performance issues has to determine if it’s worth the effort.
JPEG format offers smaller image sizes, but PNG has the better flexibility and quality. Luckily, there are several open-source plugins that help you reduce image size while keeping your quality. Here are a few to check out:
Move Web Font CSS to the Top of the Page
For people who follow Google’s PageSpeed suggestions to the letter, this one will be counterintuitive. Google suggests that people place these files at the footer of your page. This stops the page blocking issue that requires styles to load before the HTML renders. This might speed up the page, but it creates a problem called FOUT – flash of unstyled text.
You’ve probably seen FOUT before. It’s when text loads but remains unstyled for a second or two until the web font style loads. The issue here is that the browser might display a broken page until the font style loads.
The simple way to fix a “broken looking” page with FOUT is to move the web font styles to the top of the page.
This might affect your actual speed, but you can test your pages again after you make the change. If the change only makes a minor difference, then you’re probably safe to keep it especially if you believe you’re losing users based on web fonts loading improperly.
Don’t Ignore Your Actual Load Speeds
Your perceived speed is just as important as actual speed, but you shouldn’t forget about actual speed and compromise your site’s performance. If you make any changes with site speed, always test it before you commit it to production.