Codementor Events

Techniques of Website Speed Optimization: Performance Testing and Improvement Practices

Published Dec 04, 2018
Techniques of Website Speed Optimization: Performance Testing and Improvement Practices

The website speed makes the first impression about your business. It’s essential to understand that you won’t get a second chance when it comes to user experience. Low website speed is one of the most frustrating things that will turn people off about your resource.

High-performance websites results in high return visits, low bounce rates, higher conversions, engagement, higher ranks in organic search, and better user experience. Slow websites will cost you money and damaged reputation. By reducing the page load time you will positively impact marketing and sales processes. You’ll get higher traffic and attract more qualified leads that can be converted into customers. In this article, we will give you recommendations about how to improve your website performance and page load time.

Importance of website speed optimization
Page load time is a web performance metric that shows the time needed for a page to show on the user screen.

Let’s take a look at how the website speed optimization influences the key factors of website success:

conversion
visibility
usability

Conversion. Website conversion is an important factor in your business success, which means getting your visitors to do what you want them to do. For instance, they will buy your product, subscribe to newsletters campaigns, register for a webinar, or download a guide.

The faster the page loads, the higher conversion rates it’ll have. According to the Hubspot research, 1 second delay means 7 percent reduction in conversions. For instance, a page slowdown of 1 second could cost Amazon $1.6 billion in sales each year.

Visibility. The load time of your website also influences how easily users can find your website. Website speed is one of the factors that Google takes into consideration when ranking sites. A low performing website has a poor user experience and as a result gains less promotion in search results. Since December 2017, the Google search engine has started ranking also based on mobile versions of pages, even for desktop searches. The goal of this decision is to protect users from the websites that have low performance and aren’t responsive to all devices.

Usability. Website usability like website page speed, load time, and website responsiveness to user requests directly impacts customer loyalty. The better your website performs, the more satisfied a user will be. A great user experience is a way for building a large customer base and a strong brand.

Ways to assess your website speed
Before starting your website speed optimization you should determine your current loading time and define what slows your site down. Then you should set your website performance goals. The recommendation for page load time in 2018 is to be under 3 seconds. According to the Google research on the average mobile speed across industry sectors, just a fraction of websites is close to their recommended speed.

So, if you optimize your website speed to an acceptable level, you will get a significant ranking advantage over competitors.

The ways of website speed optimization listed in this article are very different and sometimes the solution to one problem can have the negative impact on another aspect of your site. That’s why we recommend analyzing the website speed after each change to determine what actions deliver the best results.

There are several performance evaluation tools that are worth trying:

Google Pagespeed Insights is a free tool from Google that runs a performance test on your site and provides recommendations on how to increase performance. It works for both desktop and mobile versions.

Pingdom is also a great tool for website speed testing with a number of useful features. It tracks your website’s performance history, makes data-driven recommendations on how to improve the website speed, and generates easy to understand reports. Pingdom also provides the apps for website speed testing for Android and iOS. It has both free and professional paid monitoring plans.

YSlow also provides recommendations on how to improve the performance of the page, draws statistics, and summarizes all components.

Performance Budget Calculator is a free tool that helps figure out what type of content you can use to keep your site running optimally.

Guidelines to speed up your website
Once you have tested the speed of your website, you can start optimizing it. There are a lot of different ways to make your website work faster and we created the list of the most effective ones.

1. Use a Content Delivery Network (CDN)
A content delivery network is a set of web servers distributed across various geographical locations that provide web content to end users with regard to their location. When you host the website on a single server, all users requests are sent to the same hardware. For this reason, the time needed to process each request increases. On top of that, the load time increases when users are physically far from the server. With CDN, user requests are redirected to the nearest server. As a result, the content is delivered to a user quicker and a website works faster. This is a rather expensive, but quite effective way to optimize the load time.

2. Move your website to a better host
There are three possible types of hosting:
Shared hosting
Virtual Private Servers (VPS) hosting
Dedicated server

The most popular type of hosting that is used all over the world is sharing hosting. That’s the cheapest way to get your site online in a short time and for a low fee. It’s essential to choose the fast web host to ensure better optimization. With shared hosting, you share CPU, disk space, and RAM with other sites that also use this server. This is the main reason why shared hosting isn’t as fast as VPS or a dedicated server.

Virtual Private Servers and dedicated servers are much faster. VPS uses multiple servers for content distribution. Having VPS you share the server with its other users and have your own part of the virtual server where your configurations don’t influence other clients. If your website has the average traffic or you have the eCommerce site with traffic spikes in some periods, VPS will be the optimal solution for you.

The most expensive hosting option is to use a dedicated server which can be your own physical server. In this case, you pay a server rent and hire a system administrator to maintain it.

Another approach is to rent dedicated cloud resource from AWS, Microsoft Azure, Google, or other public cloud provider. Both approaches can also be combined into a hybrid cloud that we discussed recently. With dedicated servers, all resources belong only to you and you get the full control of it. Cloud infrastructures can also add unlimited and on-demand scalability under a number of packages.

Serverless architecture is yet another option that removes maintenance and server set up procedures altogether. Consider reading our separate article covering serverless architecture specifics and benefits.

3. Optimize the size of images on your website
Everyone loves eye-catching images. In the case of successful eCommerce sites, images are the vital part. A lot of photos, images, graphics on your product pages improve engagement. The negative side of the image use is that they are usually large files that slow down a website.

The best way to reduce the image size without compromising its quality is to compress images using such tools as ImageOptim, JPEGmini, or Kraken. The procedure may take a bit of time but it’s worth it. Another way to reduce the image size is to use the HTML responsive images <secret> and <size> attributes that adjust image size based on user display properties.

4. Reduce the number of plugins
Plugins are common components of each website. They add specific features suggested by third parties. Unfortunately, the more plugins are installed, the more resources are needed to run them. As a result, the website works slower and also security issues can appear. As time passes, the number of plugins grows, while some of them may not be used anymore. We recommend checking out all the plugins you have installed and deleting unnecessary ones. First, run the performance tests on your page to find out which plugins are slowing down your website. Not only does the website speed depend on the number of installed plugins but also on their quality. Try to avoid plugins that load a lot of scripts and styles or generate a lot of database queries. The best solution is to keep only the necessary ones and ensure that they are kept up to date.

5. Minimize the number of JavaScript and CSS files
If your website contains a lot of JavaScript and CSS files, it leads to a large number of HTTP requests when your website visitors want to access particular files. These requests are treated individually by visitor’s browser and slow down the website work. If you reduce the number of JavaScript and CSS files this will undoubtedly speed up your website. Try to group all JavaScript into one and also do so with all CSS files. This will reduce the overall number of HTTP requests. There are a lot of tools to minify HTML, CSS, and JavaScript files quickly. For instance, you can use WillPeavy, Script Minifier, or Grunt tools.

6. Use website caching
In case there are a lot of users accessing the page at one time servers work slowly and need more time to deliver the web page to each user. Caching is the process of storing the current version of your website on the hosting and presenting this version until your website is updated. This means that the web page doesn’t render over and over again for each user.Cached web page doesn’t need to send database requests each time.

The approaches to website caching depend on the platform your website is developed on. For WordPress for instance, you can use the following plugins: W3 Total Cache or W3 Super Cache. If you use VPS or a dedicated server, you can also set up caching under your general settings. In the case of the shared server, the website caching isn’t usually available.

7. Implement Gzip Compression
Gzip Compression is an effective way to reduce the size of files. It minimizes the HTTP requests and reduces the server response time. Gzip compresses the files before sending them to the browser. On the user side, a browser unzips the files and presents the contents. This method can work with all files on your website. You can enable Gzip on your website by adding some lines of the code or via a utility called gzip.

8. Database optimization in CMS
Database optimization is the an effective way to increase performance. If you use a content management system (CMS) packed with complex plugins, the database size increases and your website works slower. For instance, the WordPress CMS stores comments, blog posts, and other information that take up a lot of data storage. Each CMS requires its own optimization measures and also has a number of specific plugins. For WordPress, for example, you may consider WP-Optimize.

9. Reduce the use of web fonts
Web fonts have become very popular in website design. Unfortunately, the use of web fonts has a negative impact on the speed of page rendering. Web fonts add extra HTTP requests to external resources. The following measures will help you reduce the size of web font traffic:

Use modern formats WOFF2 for modern browsers;
Include only those character sets that are used on the site;
Choose only the needed styles

10. Detect 404 errors
A 404 error means that a “Page isn’t found”. This message is provided by the hosting to browsers or search engines when the accessed content of a page no longer exists. In order to detect and correct a 404 error, you can use error detection tools and plugins. As we mentioned, additional plugins can negatively affect your website speed, so we advise running the resource through external tools for error detection. For instance, Xenu’s Link Sleuth, Google Webmaster Tools (GWT), and 404 Redirected Plugin For WordPress.

Once you’ve detected all 404 errors, you need to assess the traffic that they generate. If these dead links no longer bring any visits and thus never consume your server resource, then you may leave them as they are. If these pages still have some traffic coming, consider setting redirects for external links and fixing the link addresses for the internal ones.

11. Reduce redirects
Website redirects create additional HTTP requests which negatively impact performance. We advise to keep them to a minimum or eliminate them entirely. First, you should identify all redirects on you page by running a site scan. You can use Screaming Frog to quickly identify redirects. Then you must check if they serve a necessary purpose and leave only the critical ones.

12. Use prefetching techniques
Prefetching entails reading and executing instructions before a user initiates them. The technique is rather common. It works well if you can anticipate user actions and, for instance, load some content or links in advance. Usually, modern browsers allow for prefetching by default as they assume user behavior patterns. However, UX specialists and engineers are more likely to understand user behavior and make “hints” for browsers to do prefetching work.

There are three main types of prefetching:

DNS-prefetching. The practice entails resolving domains into IP addresses in advance.

Link Prefetching. If you are sure that a user will click on a specific link to navigate to some page, you can apply this type of prefetching. The method is useful for stable user journey actions, like moving to the shopping cart page after one or several items were added.

Prerendering. This approach means rendering an entire page or some elements of it in advance.

While prefetching is effective, it requires deep user behavior analysis in to make precise assumptions.

Conclusion
Currently, a typical user expects web pages to load less than after 3 seconds. If you don’t meet this expectation barrier, you lose a lot of website traffic and, as a result, your revenue.

So, I recommend applying a simple yet effective website speed optimization approach:

Check and evaluate the key factors of website success, considering conversion, visibility, and usability.
Test your current website speed and prioritize the pages and features that need the most attention in regard to these three factors.
Start your optimization with the most speed-reducing aspects and focus on the pages that define your conversion success the most.

Discover and read more posts from Ahmed Salem
get started
post commentsBe the first to share your opinion
Show more replies