Website PerformanceJanuary 8, 2019 Peter A. Liefer II
Make Your Website Work for You!
Everyone has visited and fled from a website that took too long to load. Do you know if your website is working for you? Your business reputation depends on it.
Poor performing websites can hurt your website’s overall ranking. A bad user experience can drive away as much as 88% of your visitors and have negative effects on your retention and conversion rates.
Users today expect websites to offer a lot of information, media, and interactivity – all with page load times of two seconds or less. By not loading correctly or loading slowly, visitors are not inclined to stay.
When surfing the web, there are many technical gears turning behind the scenes that impact web performance. The average business owner will run away if you try to explain this to them.
However, marketers need to have a general understanding of what these factors are as it affects performance. If you aren’t getting results from your site, these technical elements may be the problem.
Factors that affect performance
Web performance falls into three categories:
- Frontend User Experience – how the user’s browser executes your page’s content.
- When your site’s title appears in the browser tab
- When your site’s first visuals are displayed in the frame
- When the visitor can interact with your site
- Backend Performance – how your site gets to the visitor’s browser.
- Hosting provider
- DNS provider
- Content delivery network
- Content Complexity – the breakdown of the building blocks of your website.
- Media and programming languages used on your site
- How many assets each one has
- How byte-heavy those assets are
UX – User Experience
Website performance doesn’t have anything to do with the content; it has to do with the experience that is being presented to the consumer. A website can have the latest technology or the coolest graphics and movement, but if the page is not tuned to performance, then you could be driving traffic away from your business.
Remember what they say about first impressions!
Whatever kind of site you have, there are certain factors that are non-starters. There are sites out there that we think are cutting edge and others that we come across that look as if they were built in the 19 nineties.
There can be different approaches to design and implementation and everyone has been to a site that doesn’t load very quickly and have certain elements that don’t load at all.
If your customers are really interested, they may hit refresh, however, most times they just close that tab and move on to another site – never to return again.
What are the primary reasons website performance matters?
Poorly performing websites can really hurt your sites overall ranking, just by not loading correctly or loading slowly.
Slow websites drive away customers
Users will often click away from the site or do a “rage quit” and they just close the browser. In web analytic terms, this is called an increased bounce rate, they go to the first page of the site and then they close it.
Furthermore, this will also decrease the click-through rate metrics – the overall time spent on your site. If people land on your first page and then want to click through and see other elements on that page, and have a poor experience right from the beginning, and they go away – the click-through rate drops also.
Therefore, if part of your site has better speed and load performance, it’s more likely that those pages are doing better in the SEO engagement metrics as well.
Users remember when they had a poor experience
Visitors to poor performing sites have a lower rate of return to that site. This is called a reduction in return visitor traffic and is not a great way of building your marketing reach online.
In addition, poor performing sites that are crawled by Google and other search engines are lowered in the search ranking, which will then greatly reduce your traffic overall. This has a snowball effect as the lower search rankings will have lower views in search results, equaling lower page hits.
This is why web performance matters!
Reduce the size of your pages
Websites have had multiple faces over the years. In the early days, all content was being served over an 18-baud modem. Great importance was put into what was sent over that very small pipe.
As speeds to the homes and businesses have increased, web developers have spent more time stretching the limits of what they could build. Scripting in graphics and performance mostly went by the wayside.
Now with the capabilities of producing high-resolution 4K video and 12 plus megapixel pictures that are readily available for all, it’s very easy to ruin a very well performing site. Simply uploading a couple of images from the new DSLR camera that you’re gifted over the holidays can wreak havoc on your website’s performance.
One of the easiest ways to improve page performance is to reduce the overall size of each page. This doesn’t mean to remove or reduce content from the site, but to be smart about how you’re providing what comes to your end user.
8-megapixel images can be anywhere from 5 megabytes to 7 megabytes per image. The supported pixel sizes for 8-megapixel images are 3,456 by 2,304 pixels. The majority of desktop monitors are sized at 1980 by 1080 pixels. Therefore, 8-megabit high-resolution images are too big for any screen on which your website would be displayed.
Most likely, the images are being shrunk at the server level and are being compressed at the image level, but still, the file size that is being sent across the pipe is much larger than needed and will slow your site load time.
Right-sizing the images on your web platform will reduce the size of each image by approximately 60 percent for every image. Multiply that by 4 to 5 images per page and you can see the savings add up.
Building pages that serve one or two purposes with navigation links on other pages rather than one big page that has 10 to 12 purposes, is also a great way of having a well-performing site. Most of that information on a big page will be wasted on the end user and the page will load slower.
Smaller pages will load faster engaging your users to click through to other pages and increasing their overall time on the site and increasing other SEO based metrics.
Make sure your site has proper expiration dates on caching elements such as images, content and external files. These settings establish how long the browser will store that element locally – without causing additional calls to the web server.
If certain images are not changed that often, put a larger expiration date on them like 8 weeks. While for the content that does change often, you can have a shorter retention rate to make sure it’s not being cached as much.
If there’s a need for larger content to be served like video or other large files utilizing a CDN, (Content Distribution Network) can greatly increase the performance and uptime of your website. Some content will be from your server and other content will be delivered by the CDN.
Proper page load order
Next, you want to find and update page elements that are causing other parts of your page to be slow. You need to make sure that the elements of your page are loaded in the proper order. Elements that are at the top of the page should be loaded first, and elements that may be off-screen or at the bottom of the page are some of the last ones that should be loaded.
Then there are also things that slow your load speed down called blocking elements.
For example, say that you have a site where you’re showing the customer location and your site ask for a zip code and then shows a map of a location near that zip.
The first step is to look up the location in the database and the next step is to send those findings to the mapping API (application programming interface) and see if the database search is blocking the maps API.
While both parts are required to show the map, the one thing you can do is make sure that the database search is working properly and not further delaying the time it would perform the map API.
There are other elements along those lines. This is just a simple way of explaining how one element is required to be completed before another one and making sure that those are loading in the proper order.
Last on the list of best practices for web performance is SSL Certificates.
Everyone should be familiar with HTTP – HyperText Transfer Protocol, the basis of data communication for the internet. The addition of the “S” for “Secure” shows that three extra layers of protection have been added that protects the integrity and confidentiality of your users’ data.
When you see a site with HTTPS in front of it rather than HTTP, that site has an SSL certificate.
One of the most popular features in mapping utilities is a find my location service. If you’re planning on using a find my location service on your site, Google maps have recently changed their security settings to require an SSL certificate to access any of those advanced browser functions from the user.
It might seem like overkill if you’re just providing a marketing site with some mapping and information about your location to have the added expense of an SSL certificate. If you’re not doing ecommerce or if you’re not doing authentication on your site, why have the extra cost?
Increasing numbers of internal browser functions that are pulling information from your users are requiring sites to have an SSL.
Make sure that you’re working with a hosting provider that is aware of these recent security changes and providing the proper security settings for your site. It’s not the only reason for having an SSL, but it is one more way to make your website perform better. Learn more about SSL Certificates.
Moving into 2019, Google is continuing to put a higher emphasis on mobile responsiveness for search rankings. It’s just not how well your desktop site performs – it’s also how well your mobile site performs.
Sites that have both a desktop version and a mobile version will get a better ranking from Google and show better up on their search results. Making sure your website is mobile responsive is more vital than ever. According to INC magazine, nearly 60 percent of all SMB sites do not have a mobile responsive website.
What exactly does it mean to be mobile responsive?
First. Make sure that your site is not just supported by mobile; you want a site that is displayed in the best manner for that medium. Make your mobile view very similar in look and feel to your desktop view.
Often people will go home and then they’ll bring it up on their desktop computer and if it doesn’t look like the mobile site they will wonder if they are on the right site.
When mobile started, designers would split off the code, build a desktop version and build a mobile version. The information on the site would have to be updated on both versions and so there were inconsistencies between the content on the mobile site and the desktop site.
Mobile responsiveness is one set of code that displays properly for desktops and for mobile.
Mobile has a different set of objectives such as click to call phone numbers. There’s also a greater need for maps, especially when using GPS functionality for the use my location feature.
Mobile also has a greater impact on social sharing. Customers can easily market your site by sharing with their friends and family.
The user experience on mobile is different from the experience of desktop consumers.
Mobile 3G and 4G are much slower than the cable modem that you have at home or work. Being successful on mobile devices is about ensuring all those functions that are available on your desktop are served to mobile but served quickly. Removing some of the elements that are not necessarily targeted for mobile can help.
There are also certain elements that are very popular on desktops that are not ideal for mobile view. To improve mobile responsiveness and web performance you can remove those elements.
One such example is IFrames. An IFrame (Inline Frame) is an HTML document embedded inside another HTML document on a website. It is a common way of displaying third-party information within your site. However, what happens on mobile is because you have a smaller screen, you’re going to have a scroll. The IFrame itself will also have a scroll and this calls a double scrolling menu, which is bad for mobile.
Another element that doesn’t work well is a “modal screen.” You might know it as a pop-up or an overlay such as a form requesting information. Modal screens won’t let users work with the main window once they are opened. Modal screens do not provide the right performance on mobile. There are different ways of being able to do forms that are designed better for mobile.
Remove byte-hungry media
Considering bytes over the pipe is very important. You want to remove any auto-playing of videos or high-end graphics from your mobile view. You might have them on your desktop you but you want to restrict them on mobile. That would make a much better performing mobile website.
A well performing mobile responsive website takes all of these factors into consideration and provides a slightly different mobile experience. They may be major changes behind the scenes, but will only be seen as minor changes to the front-end user.
Fixing your website performance
Most websites can use some improvement in performance. Using the tools available, you may find all kinds of issues that you never would have thought of or realized were slowing down your site. The thing is you don’t need to fix everything all at once.
Use all the online tools you can to identify issues. Work on one element at a time, then test your site again and see if there is an improvement. Sometimes you may find that a change decreases your performance, so just roll back that change and go on to the next possible issue
- Don’t overload your site. Fewer items being served tends to lead to a better performing site, especially on mobile.
- Right size your media – make sure you’re using proper dimensions and resolution for web display to help load the site faster.
- Make sure your site is mobile responsive. Your website must be usable across multiple media and screen sizes.
- Use all the online tools you can to identify issues that you may be able to fix.
You might not be able to fix all the beginning but you may be able to identify one or two to improve your rankings.
When you’re reviewing your site, don’t just ask – do I like the look and feel of the site, you should be asking – Will the site help the customer acquisition and customer retention? Making sure your site high performing will do just that.
Want to optimize your website’s performance? Contact PrimeView now!