Perceived vs Actual Performance: Your Website’s First Impression is Everything

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

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.

Image Compression

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.

 

Combine CloudFlare with CDN.net for ridiculous speeds.

There’s a lot of reasons to use CloudFlare. There’s many more reasons to use CDN.net. But did you know you can use them together?

First, why would you use both CDN.net and CloudFlare?

Using a CDN.net & CloudFlare combination offers many performance and security enhancements to a website. CDN.net offers high performance CDN, that typically outperforms CloudFlare’s free offering. As we’re a paid product, while CloudFlare is freemium, we can focus our efforts on ensuring our clients get a high cache hit rate (see more on that here), and ensure we have proper capacity at each of our 86 CDN PoPs.

Using CloudFlare’s free plan in conjunction adds a few additional benefits, like real time analytics, basic DDoS, and WAF protection, email address obfuscation, and always online caching, so if your hosting provider goes down, CloudFlare can show a cached backup. It’s the best of both worlds – high performance CDN from CDN.net & added security through CloudFlare.

To get started, you’ll need to have an account with both CDN.net & CloudFlare. If you’re using another CDN provider, you can still follow along and see the benefits, but you’ll have the best experience if you’re using CDN.net. You can signup to both using the links below.

[Signup for CDN.net low latency CDN]

[Signup for Cloudflare]

Getting started using CloudFlare & CDN.net.

1.) First you’ll want to create a new resource in the CDN.net portal.

2.) Upon signup at CloudFlare, it will automatically recognize your existing DNS zones. You will want to make sure all appears correct before proceeding. If everything looks good, you’ll need

to create a new cname entry to your CloudFlare DNS zone. This cname entry will be the CDN hostname that you created in the CDN.net portal.

[Note: You will want to make sure the orange CloudFlare next to the DNS entry is not activated. When the cloud is orange, it is activated. In this case, we want it gray, otherwise you will not see all the performance benefits from CDN.net.]

3.) You’ll need to do some ‘advanced’ configuration of your CDN. service. Don’t worry, it’s super simple. First click on the advanced button under your CDN resource.

Next, just check the box set to ‘ignore set-cookie’ attribute. This will ensure that your static content is still delivered through CDN.net.

4.) There’s one final step! If you were not already using CloudFlare, you will need to change your DNS to point to CloudFlare’s DNS servers. CloudFlare will have given you the DNS servers at signup, however if not, you can retrieve them from the DNS section of the CloudFlare control panel.

Now you’re all set. You will need to setup your site to use CDN.net, however we’ve made that easy too. See our CDN integration guides for WordPress, Drupal and many other popular platforms in our knowledgebase.

What a CDN Can Do for Your WordPress Site

It’s no secret that speed is a factor for a successful site. It’s important for keeping readers engaged and it’s even a factor for search engine quality signals. Once your WordPress site earns a little traffic, you might start to see some performance issues. A single-node server and hosting account can only offer so much bandwidth and resource capacity. If you really want to offer the best, fastest possible WordPress hosting for your users, you need a CDN.

A Little Technical Background on CDNs

Most people wonder what makes a CDN different from traditional hosting. Without getting too technical, CDNs deliver content in a different way than a server hosted in one location. A CDN doesn’t replace traditional hosting. You still need a standard hosting account, but a CDN can be purchased as an additional way to deliver content to your users much more quickly.

When you open a site in your browser, the browser does a DNS lookup to find the location of your server. It then sends a request to your host server to get content from the WordPress site. When one or two people do this at the same time, there isn’t much performance different. Imagine a thousand or even a million people requesting content from your server. This takes a large amount of bandwidth and server resources.

With a CDN, your content is cached across several servers in several different countries. When someone on the west coast of the US requests your content, a CDN determines the geographically closest location and delivers the cached content from that particular data center.

You may wonder how much of a difference it makes to have a CDN deliver content. Even though data moves at the speed of light, it still takes much longer to travel across the planet versus close to the user’s location. Just open a website you know is hosted at the other end of the world. You’ll notice a considerable difference from a site that is hosted more locally. This doesn’t mean a data center must be located in the same state or even the same country. It must just be located close to your users’ location.

So What Can a CDN Do for You?

Speed is the obvious advantage to most people. Even a second can have an impact on your user engagement. User engagement is measurement based on several factors, but the main factor is if users continue to read your content or browse your site more in depth after initially loading your content.

Another advantage is site uptime. Imagine again having one server that holds your WordPress site. When that server crashes, your entire site is out of order. If you make money with your site, this problem can be devastating to your bottom line. With a CDN, your site is cached at multiple data centers. If a server goes down at one location, your content can be served from the other data centers. You might lose a bit of performance, but at least your site isn’t out of commission totally.

Overall, with better performance you will see better user engagement. Ultimately, load times affect your bottom line. After four seconds of load time, you lose 25% of your readership. This means that 25% of people abandon your site or choose a competitor for product. That’s a high percentage for site owners that rely on user engagement to attract sales or ad revenue.

More and more users are browsing the Internet on mobile. Mobile devices are inherently slower than desktops, so your page performance is imperative to attract these users. Major search engines such as Google even incorporate page speed and mobile friendliness into their algorithms.

Some more facts about user engagement and performance:

  • After 3 seconds, your customer satisfaction decreases by 16%
  • 47% of consumers expect a page to load in 2 seconds or less
  • 40% of consumers completely abandon a site after 3 seconds
  • If your site is making $100,000 per day, a one-second load delay will cost you $2.5 million every year

Finally, Google announced in 2010 that site speed would be a search ranking. If you are out of ideas for SEO, site speed can give you just that little boost to compete against higher ranking competitors. Google has hundreds of ranking factors, but you can ensure that your performance factor is a good quality signal with a CDN.

CDN setup isn’t difficult. Even if you’re not technical, it’s a simple process using CDN’s intuitive control panel. Even a small site can benefit from a CDN as traffic grows and your content becomes more popular.