The internet is our primary source of day to day information. We have schedules, stores, books, messages, nearly everything is online. This gives businesses an incredible opportunity to connect with potential customers and customers expect the ability to interact with a business online seamlessly from anywhere at any time. This means product information, customer service, and buying their goods and services all from the convenience of their home, or anywhere their device is connected to the internet.
This is great news for businesses as long as they can keep their customers happy and provide an exceptional experience, or at least a better experience than their competitors. But this may be easier said than done, and the biggest challenge is page responsiveness. You can imagine page responsiveness is like you waiting in a shop for an employee. Waiting for a web page to load is like waiting for someone working at a shoe store to bring you a size that may fit you. The more customers have to wait the worse the experience will feel.
See here’s the challenge. If customers require a web page to load then their phones require code, this code requires resources and data which needs to travel from one place to another, which requires time. The more data a webpage requires, the longer it will take for the customer’s experience to begin or continue from where they left off.
How speed influences bounce rate
If you want more people to find and use your website then speed matters. Bounce Rate is a metric which shows how many visitors stay on a site after initially visiting the site (as opposed to leaving the site, generally by going back to the search engine for other results). We’ve all done this, probably several times today.
Bounce rate is directly proportional to (slower) page speed. The longer a page takes to load, the higher the bounce rate meaning less people seeing the web page.
Multimedia and page speed
It should come as no surprise that web pages which include images and videos will take longer to load than web pages that are text only. So you may ask why not abolish images and video completely and focus only on page speed. This would be a mistake as the web page would become very dry and miss the potential to captivate visitors visually.
This trade off between page speed and inclusion of multimedia files in web pages should be thought of more as a balance. Too many images may slow down the experience too much, but there should always be at least a few images included on the page to keep it interesting.
How to test your page speed
This is very easy to do thanks to our friends at “Google PageSpeed Insights”. Use their app (https://pagespeed.web.dev) to reveal anything that may be affecting your page speed. Here I’m analyzing the page google.com, which we’d expect great results from.
Notice that the Core Web Vitals Assessment has “Passed” in this case. This is what we aim for. If for some reason this fails you will likely see one or multiple metrics listed below that appear red. You’ll be able to find out more information about any specific problems that PageSpeed insights has discovered by following the links that they provide and reading the documentation PageSpeed provides.
How to increase Page Speed
- Optimize Images:
This will give you the biggest bang for your buck. Images generally account for the majority of your website's data. The key is image compression for a high enough quality feel, at a lower file size. Use WebP and AVIF file types over PNG and JPEG if possible. It’s also possible to use responsive images that load based on device type (ie load smaller images on mobile devices). Here’s a great tool to help automate image optimization: https://imagemagick.org
- Lazy Load Images:
In addition to minimizing image data through file compression, images can be “Lazy Loaded” meaning the site will load everything else first while loading the images asynchronously. This gives the web site a responsive feel because users can interact with the site before all the content is loaded. Lazy loading is supported by default in modern browsers (see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/)
- Optimize Videos:
The same tips listed above apply to videos on your web page. However video streaming is a slightly more complicated system to optimize as you can imagine. If your site relies heavily on videos then it may be time to read up on Adaptive Bitrate Streaming and Video Transcoding. Here’s a great resource.
- Use CDNs:
CDNs (Content Delivery Networks) are the solution for your webpages to be delivered all over the world within a reasonable time. We already know that data traveling from one computer to another takes time. CDNs are essentially computers that exist in different parts of the world with your website's data. This way the server that is closest to the user requesting the data can respond to that user quickly. CloudFlare offers great CDN services (see: < ahref="https://www.cloudflare.com">https://www.cloudflare.com)
Speed it Up and Keep it Fast
Assuring responsiveness to your website’s users will affect your website’s bounce rate. There are pretty remarkable effects on bounce rate based solely on page speed as seen here. Therefore page speed should be a metric to check while developing a website and should be optimized after initial product launch if possible.
Google’s PageSpeed Insights is a simple (yet informative) tool which allows developers to quickly see how a site is performing in various aspects contributing to page speed. If page speed is an issue there are always ways to improve it, just remember that serving less data is generally the most effective way to improve page speed.
Making a proper website and keeping it running fast can be a large task. Thankfully, here at Konverge we have years of experience buidling functional fast websites. Contact Us Today, and see how we can help Speed it up!