When the web was first born things were so simple, the web only displayed text, hence the HTTP (Hypertext Transfer Protocol). The technicians of the web were called webmasters. Eventually, an ‘image’ tag was suggested to be included in the HTML (HyperText MarkUp) language. This opened up new doors for creativity and design on the web, and the technicians of the web came to be master web designers and developers. As the web grew up and improved new practices around its design and experience began to emerge. What is website development? And how will it continue to evolve? Today as we examine the way websites are used – we dedicate a new focus to user experience. Whole Careers are now dedicated to mastering the finer details of how people use the websites we create. As well as, how we can improve their experience to deliver mutually beneficial results for both companies and customers.
The Computer in Your Pocket
When the iPhone was introduced by Steve Jobs in 2007, soon after followed new practice in web design called mobile responsive design. Companies and developers scrambled to make their websites function on smaller screen sizes, and mobile devices were introduced as a new type of hardware that would consume web content. Phones are naturally smaller devices which means they are able to fit fewer technologies that make surfing the web, like internet speed, a more efficient process, into a slower one.
Today mobile phones have now surpassed desktop devices as the primary consumers of the web. This means that the next phase of the world wide web is site speed and performance.
What is Site Speed, Page Speed Performance?
To understand site speed we need to introduce some new terms into our vocabulary. Speed measures the moment when content starts to load on the screen. Site speed is the speed of all pages that make up your site. Page Speed is the speed of an individual page within your site.
You may have already heard on-line chatter about site speed as developers begin to pay more attention to the subject. One of the main drivers of the speed effort is Google. To this effort, they have created new tools to measure the speed of a website load, and new metrics and vocabulary to describe the different aspects of the loading process.
How can I measure the loading speed of my website?
There are a number of tools available to generate reports on website speed, Google Page Speed Insights, Chromes Lighthouse Report, Googles Mobile Speed Test, and GT Metrix. In addition, Google has created a reference for all things web development on the website web.dev, intended to educate the public on the minute specifics of performance optimisation.
“There is no one single metric that measures a fast user experience.” – Google
The creation of site speed measurement tools was just the starting point. Now, we are seeing the results being integrated into Google products like Google Analytics and Search Console. This is putting site speed as a prominent factor in how slow performance may affect user experience and ultimately negatively impacting your brand or business.
The creation of site speed measurement tools was just the starting point. Now, we are seeing the results being integrated into Google products like Google Analytics and Search Console. This is putting site speed as a prominent factor in how slow performance may affect user experience and ultimately negatively impacting your brand or business. By making this information available, analytics experts, marketing department and developers will be fully equipped to improve the performance of their website and all these efforts to take priority.
Does Site Speed Affect Search Engine Rankings on Google?
Since 2018 Google has been switching to a mobile-first indexing strategy. This means that the results products by Google’s crawl will be prioritised for the mobile results.
“A slow mobile site limits your business” – Google
If your SEO strategy is the wind in the sail of your boat, imagine that having a fast loading website provides more wind in that sail. It is one measure of user experience.
How do I Optimise my Website to Load Faster?
The good news is that you don’t need to be a web developer to understand speed and performance. We can start to break down and understand the overall concepts and environments that are needed for users to experience a fast web.
Websites Are Applications
Start with an Analysis
Visit a few of the available testing tools and begin to generate a list of recommended fixes to make each page on your site faster.
Once you have compiled a comprehensive report, you will be able to share your findings and make recommendations that factor into website loading speed.
According to GT Matrix report the most important metrics to pay attention to are:
Fully loaded time – The average Fully Loaded Time is 7.0s
Total Page Size – The average Total Page Size is 3.22MB
Requests – The average number of Requests is 87
Review Code Standards and Delivery
After the first analysis, you may notice factors resulting in code specific action items. These will be bucketed into four major categories related to the way the HTML markup is rendered to display the page. These code related action items will include, performance, best practices, accessibility and SEO. The implementation of these items will likely need to be performed by a team of developers knowledgeable in these areas.
Choose Fast, Reliable Hosting
Websites need to be hosted on a server that is easily accessible. When choosing a hosting server for your project or site, it can be tempting to select the most affordable option. Instead, consider a hosting environment that has sufficient resources like RAM, CPU and bandwidth to deliver assets quickly and reliably to the users of your application.
When choosing a hosting platform for speed, keep in mind, the response of the server is measured in Time to First Byte (TTFB), the number of milliseconds it takes the server to respond to a request and serve the first byte of your application. There are many factors that might affect TTFB, but the general rule of thumb is the lower this number the better it is for speed. Additionally hosting static assets on a Content Delivery Network (CDN) can greatly speed up the delivery of assets when requested.
What is a Content Delivery Network?
Review your Content Management System
In addition, the WordPress core software team is constantly rolling out security and performance updates. Performing these updates are recommended to keep your site running smoothly. The same goes for WordPress plugin updates.
Lastly, WordPress has a secure server environment fit for keeping sites fast. For example, regular updates need to be installed and permissions are to be set correctly for security. The WordPress Site Health page has a list of recommendations and solutions to keep your site running smoothly.
Automate the Optimisation of Assets & Images
Assets or images needed for your application will be downloaded to your browser to be displayed as a web page. For example, any images uploaded to the website have the ability for automation, ensuring they are compressed and sized correctly. That way it takes the guesswork out of the process, you’ll know that each time an image is added to your web page, it is already compressed a perfectly precise amount to look great and download quickly.
Prioritise the Visible Parts of Your Page
A more advanced concept in web page optimisation is prioritising content that is visible to the user when the page first loads. This means that any content the user has to scroll to see should be deferred until the user has actually scrolled down the page. This concept is referred to as “lazy loading”, and is especially effective when used with images. While it can still be difficult to split up code to be delivered in this fashion, browsers like Chrome are now implementing API’s to allow for easier access to these practices by developers.
It is also important to consider the type of device that is accessing your website and offer a graceful degradation of content for slower devices and Internet connections. This means it isn’t necessary to serve images that are the same size as a desktop user would receive, and perhaps you may choose to not serve up certain assets at all in some situations.
Understand Analytics Insights, Cookies & Off-Page Trackers
Tools that provide us with analytical data about the usage of our application are wonderful to give us key insight into how people are using our application. However, tracking codes inherently have some costs associated with them. When you add a JavaSript code to your application, it then reaches out and downloads more resources to your page. You have no control over those resources which means you cannot optimise them. This slows down your application.
“Trackers follow you around on-line to collect information about your browsing habits and interests. These trackers are hidden in ads, videos, and other in-page content.” – Mozilla
Trackers can also give away valuable data about your users to third parties, which is also what allows social media sites and advertisements to follow you around the web. To combat potentially slowing down site speed with multiple trackers, it is best practice to have a tagging policy that reviews the necessity of tracking codes living on your site. In addition, it’s useful to implement Google Tag Manager to manage tags and make sure they are only being loaded on specific pages, rather than blanket tracking.
Optimisation is a Journey, Not a Destination
The steps outlined above should be enough to receive basic knowledge and understanding of website performance optimisation. Keep in mind that this is a process and to keep coming back to check your performance to find new ways to improve your site.