Page Speed Optimization Part 2- Advanced Techniques

In this part, we will discover advanced techniques to optimize the page speed. If you missed our first post on the best practices to enhance your page speed, you can find it here. Let’s get right to it.

Google Devtools: Improving Load Performance

Google offers a versatile and strong tool for webmasters and developers to test and improve several aspects related to their websites. This tool is Google DevTools. To access this tool, right-click on the page and choose Inspect, or Ctrl+Shift+I if you are on Windows.

Before using DevTools to improve load performance, it is important to run an audit to establish a baseline for your improvements. Later on, as you run improvements you can isolate them and use DevTools to see the impact of each improvement. Google provides a detailed documentation on how you can use DevTools to improve load performance.

Connection Throttling:

As part of testing a page speed, you can run some simulation to see how your page runs on different mobile networks. This will offer you laser-focused data on how the different mobile connections are affecting the loading time.

In essence, throttling adds a browser-level delay when the response is received. Lighthouse, an open-source auditing tool, allows you to run simulations on how the page would have been loaded o a slower connection. You can use Lighthouse for throttling simulations using different methods which are the following:

  • Google DevTools in the Auditing section
  • From the command line. You can automate your reports using shell scripts. This will require the installation of NodeJS to run the Node command lines.
  • As a Node module. This also requires NodeJS so you can run Lighthouse programmatically as a Node Module.

More information on the command lines and running guidelines are provided on the Lighthouse npm page.

If you have any difficulties installing any of the requirements or understanding how to run the code, it is highly recommended to use Lighthouse from the DevTools.

For the throttling tests, here are the different connections you can test. Using Lighthouse from the CLI or as a Node module, you can save the information in .json or .html file.

Table describing the different network types and their respective speed. This shows how page speed loading can be affected.
Table retrieved from statuscake.com

To reiterate, proceed with this for a deeper understanding of how connections types on mobile affect your page load performance. There are other tools such as GTMetrix that allow us to run similar tests. We recommend using different tools to paint a clearer picture before making any decision.

Prefetching Techniques:

In this technique, we preload resources or render them before user demand; as a result, we save time to load the resources.

For instance, when a user clicks on a link and visits the website, some content and links are already preloaded. Please note that to use this technique, you need to anticipate the user’s behavior on the site. The following are the most commonly used prefetching techniques:

  • Domain Name System (DNS) Prefetching where the domain name is resolved in advance before the user performs any action
  • Link Prefetching. We recommend using this only when the user journey is stable.
  • Reduction of the excessive size of DOM. Lighthouse is an excellent tool to know if you are facing any DOM size issues
  • Lazy loading where assets are only the requested component of the website is loaded

Page Speed Optimization: Open Source Tools:

The following represents a list of the most commonly used tools to test page speed performance.

  • GT Metrix
  • Pagespeed Insights
  • WebPage Test
  • Test My Site: Think with Google
  • Gift of Speed
  • Lighthouse

Page Speed Optimization: Accelerated Mobile Pages (AMP)

AMP is a web component framework that you can use to easily create user-first websites, stories, emails, and ads. AMP mains advantage is a really fast loading of web pages. Here are the reasons why AMP pages load fast:

  • Execute all AMP JavaScript asynchronously
  • Size all resources statically
  • Stop extension mechanisms from block rendering
  • Keep all third-party JavaScript out of the critical path
  • All CSS must be inline and size-bound
  • Font triggering must be efficient
  • Minimize style recalculations
  • Only run GPU-accelerated animations
  • Prioritize resource loading

Developing AMP pages is easy. If you have a working knowledge of HTML, CSS, and JavaScript, it should not be of any challenge. To make things more interesting, you can convert your actual HTML pages into AMP pages by introducing some changes to the source code.

AMP has detailed information on the components that you can use, and how to convert HTML pages into AMP. This is the list of the pages:

Furthermore, you can use tools to test if your AMP page is valid or not. AMP offers the following tools to test your web page or website:

  • Browser Developer Console
  • Web Interface
  • Browser Extension
  • NPM Packages for Command Interface
  • Command Line Tool

Some tools require programming knowledge while others such the browser extension will deliver you the same results way faster. You can use the tools to troubleshoot any problems with your AMP pages. You can also use the Search Console’s Enhancement section to see the coverage of your AMP pages. For more details on each validation tool, visit the following page.

Leave a Reply