Website Optimization

Website optimization is the process of using tools, advanced strategies, and experiments to improve the performance of your website, further drive more traffic, increase conversions, and grow revenue.

Client Optimization

• WordPress frontend optimization constitutes the performance of the website when the website loads in the browser.

• We use GTMetrix to analyse and investigate our problem. Other tools used are:

  • Google Page Speed Insight
  • Pingdom
  • Chrome LightHouse

Basics of Website Optimization

The main aim of Website Optimization is to get good scores in all the key metrics. A sample report is below:

For every report you get GTMerix grade, consisting of 2 parts:

Performance Score

The Performance Score tells you how well your page performs from a user perspective.

Your Performance Score is essentially your Lighthouse Performance Score, as captured by GTmetrix, with their custom audits, Analysis Options, browser and hardware specifications.

Know more about the Performance score here.

Performance Metrics

The Performance score is made up of 6 key metrics:

The 6 key metrics hold the following weightage:

1. First Contentful Paint (15%) - How quickly content like text or images are painted onto your page.
2. Speed Index (15%) - How quickly the contents of your page are visibly populated.
3. Largest Contentful Paint (25%) - How long it takes for the largest element of content (e.g. a hero image) to be painted on your page.
4. Time to Interactive (15%) - How long it takes for your page to become fully interactive.
5. Total Blocking Time (25%) - How much time is blocked by scripts during your page loading process.
6. Cumulative Layout Shift (5%) - How much your page's layout shifts as it loads.

Structure Score

The Structure Score tells you how well your page is built for optimal performance.

Everything you need to know about the Structure Score

Note:

The sample test was done for Desktop from Chennai, India. These settings also matter. You can change the location to where your customers are to get more relevant report and change your device to Mobile in order to get your mobile score.

Optimizing your Website

Once your report is ready you can follow the below steps to increase the performance of your website.

You can scroll down to Page Details to understand what is the request size and how is it distributed amongst assets.

Structure Tab

1. Visit the Structure tab.

2. You will be able to see multiple impact type issues.

   

3. Open each issue to learn what it says - there can be links to other articles which tells better about the issue.

   

4. Figure out the issue after reading it. Solve it. Push it. Retest to see if it gets fixed or not.

5. You should start from High Impact Issue and then go down to Lower once and try to fix as many as possible.

Waterfall Tab

1. Visit the Waterfall tab

2. You can see exact resources being loaded.

   

3. Select only CSS to check all CSS files. Remove the unnecessary files and retest.

   

4. Repeat step 3 for JS, Fonts and Images.

5. Keep a check that no unnecessary files are being loaded.

Common Practices

Some common practices to follow during development to make sure the website performance is well optimized:

1. Use optimized images:

   • Use add_image_size hook to predefine image sizes so that when someone uploads the image, it gets cropped and resized to the required size.
   • Read on how to use add_image_size
   • Eg: add_image_size ('soi-card', 561, 786, true);

2. Optimize Font:

   • When adding font in your theme make sure you load the font with display the font as swap - This solves the Flash of Unstyled Text (FOUT) problem.
   • Use woff/woff2 format as it compresses the files and is supported by all modern browsers.

3. CSS & JS:

   • Keep your CSS and JS in modules so that when the production theme is built, only the concerned CSS and JS are loaded for a particular page.
   • Avoid @import rule for adding any external js/css file. Instead use wp_enqueue_script()/wp_enqueue_style() functions.

   Script Reference

   Style Reference

Server Size Optimization

When you do a GTMetrix test for a particular website, you get an initial server response time which basically “is the time it takes for the browser to receive the first byte in response to the browser request.”

This can greatly affect your website performance, as it is responsible for fetching the code from the server before the CSS and JS is compiled in the browser. There are multiple reasons for this to be slow. A score of more than 300ms is considered not good for a website.

You can do the following to optimize the Server Response Time:

1. Optimizing your application code
2. Implementing server-side caching
3. upgrading server hardware for more CPU or memory resources

There are APM's (application performance management tools) which can be used to monitor and debug, to optimize performance. We use one such APM called - Newrelic.

Installing Newrelic on a Server

Step1 :

Install the Newrelic application on a particular server. Follow the below steps to install:

1. Ensure your system meets the agent's requirements, including appropriate system permissions.

2. If you do not already have a New Relic account, create one.

3. From your Account settings, copy your license key information.

4. Install the agent package or tar archive on your system.

   • Ubuntu or Debian:
     • Install the package either with apt-get or with dpkg commands. Typically, running the newrelic-install script is not required.

5. Change the default application name to a meaningful name.

6. Optional: Change other agent configuration settings to further customize your installation.

7. Restart your web server (Apache, Nginx, PHP-FPM, etc.).

8. Recommendation: To help ensure the PHP agent is initiated, especially if your application has infrequent activity, generate some data by using the app for a few seconds.

9. Wait a few minutes for your application to send data to New Relic.

Newrelic Installation Guide

The above process will install PHP Newrelic on your server.

Step 2:

Install WordPress specific functionalities for better data and reporting.

If you install New Relic for WordPress websites, the PHP agent receives additional metrics. A WordPress page appears in the New Relic user interface: Go to -> one.newrelic.com -> APM -> (select a WordPress app).

Once the above is set and data starts to come in, you can start analysing the report and fixing them.

Newrelic Application Decoded

Below, we will learn how to use the Newrelic functionalities to optimize the server performance. For the purpose of example, we will use the Shades of India (SOI) account details.

1. Login to your Newrelic account.

2. This is the Dashboard that is visible

   

3. Select the Shades of India Live application - it will take you to the explorer view

   

4. In order to start analysing the requests -> change the view from Explorer to APM. Follow below steps:

   • Click on explorer

   • Select APM

     

   • Select the application name -> Shades of India Live:

     

   • You will reach the below screen:

     

Transactions

• The best place to start your optimization is Transactions tab, see below:

  

  

• When you scroll to the bottom of the page, you will see -> Transaction Traces - these are the recent requests which are probably taking long durations.

  

  

For example: you can see ‘/product/fulva-kurta/’ taking 1s of backend response time. You can click on the Transaction to know more about it.

This propup has 3 tabs to analyse the request:

• Summary
• Trace Details
• Database

Summary

• Once you have analysed the summary you can understand which are the most slow and time taking process for that particular request.

• This graph tells you in an overview:

  

Trace Details

• This is the most important part of this task and it will give you the most important insights into your request.

• Click on expand all button to expand every request

  

• You will get a Waterfall graph - gives you an idea of time taken by every function in that particular request

  

• Now the bottom most blue-bar gives you a relative idea of the time utilized by that particular function and its children. You can scroll down and take a quick look at every bar to find the longest one. This is the view you will get:

• Once you spot the time consuming function, for example : "getRecentlyViewedSingleProduct" function seems to be taking 97ms.

  

  In this case:

  • Optimize your code for that function
  • Again visit this particular page to get a transaction function.

• You can now check the time of this function again to see if it got better scores now. This way you can basically identify the functions which are creating bottlenecks and then you can:

  • Optimize the function
  • Or, replace the function.

The above activity has to be done until you reach a response time near to 300ms.

Note

Once you have fully optimized your application, it is recommended that you uninstall the Newrelic agent. Follow the instructions.

---

Last update: June 1, 2021