How to Handle External Resources and Improving Google PageSpeed Insights Score

 

Whenever a URL is entered on the web browser it fetches data and serves from the server.  The web browser fetches the resources used on the page. The resources are HTML, CSS, and Javascript. It locates the resources and parses the HTML file, fetches linked resources and the browser builds the document and renders the visible page and puts it in the window for the user. It publishes the DOM and runs the javascript using the DOM. In the end, it all comes together with a smooth, fast, and interactive user experience. 

Some of the resources we used on our website may be internal resources that are fetched from their own (internal)server and external resources which are fetched from the third party (external) server.  It takes longer loading time whenever fetching resources from the external server. So, the more external resources the longer, the loading time of the website. 

I’m going to focus on how using external resources kills your website performance and how to resolve them.

Google Fonts:

Google Fonts API serves the font from the Google Font Directory(fonts.gstatic.com or fonts.googleapi.com).  It would take several HTTP requests to google’s server to fetch the font. You could have no control over adding a header expire tag for external resources. So, it probably slows down your site. 

The following is the solution to overcome this,

• Host the Google Fonts locally: You can download the google font and host it locally from your server. And combine many webfonts into a single request. The plugin Google WebFont Optimizer combines many webfonts into a single request. The plugin Optimize My Google Font(OMGF) helps to host the Google Fonts locally.
• Preload Fonts: Preloading the fonts helps to improve the page speed but don’t preload all the fonts unless you use it commonly on the page you are requesting.  

Google Recaptcha: 

It is free Google API help to protect from spam/bots. It is a heavy script that runs and slows down the website performance unknowingly. It would take nearly 11 to 20 HTTP requests depending upon the variables. It just not only slows down the page but you can see its impact all over the website.

 To overcome this problem consider the following options:

• Loading Google Recaptcha dynamically: You can load only when the user interacts with the contact form by manual loading on a custom trigger event.
• Antispam Service: You can also opt for cloud-based anti-spam services like ClearTalk.

Google Map:

It is so tempting to use Google interactive maps, especially when your website is about motor, bike, or restaurant. But it makes your website heavier and makes about 70 HTTP request. 

It is a very simple problem to fix.

• Add a static map and image link:  Build the map the way you want and capture the screen, static image, and make it an image link to open a new tab with Google Maps.

Remove Unused Tracking Code:  

There are several marketing mechanisms to inject tracking Id(Google Analytics, Hotjar, Facebook Pixel, Google Ads, etc.,) into your site to track and measure the website traffic. Every tag you add makes more requests and takes longer to load your website. 

 You can resolve by:

•  Google Tag Manager: It becomes handy to manage all tags in one place and where you can take full control of the tag when to fire, pause, and even set scroll delay. 

But remember to remove tracking Id from the website that is already present in the header section which was added on the site before adding to the Google Tag Manager. So now all the tracking Ids are integrated with one id Google Tag Manager.

Remove Unwanted Plugin: 

The number one plugin which I would suggest to look back is JetPack.  It is a multi-function plugin and when used incorrectly, it will slow down your site. By default, 20 modules are activated on the site. Again, all are fetched from the external server and put your site terribly slow.  WordPress Site Stats, deliver CDN, Gravatar, Beautiful Maths, these are redundant features in JetPack plugin if you already use alternate for this.

• Deactivate unwanted features in JetPack plugin: Be careful and look at the options which are redundant features and disable them.

BONUS:  

Be wise on selecting Plugins: Each plugin comes with their own PHP, CSS, JavaScript, Images, etc., and once you installed,  it potentially slows down your website.  There is no single reason for slow WordPress sites so, before choosing the plugin, think once again whether it is mandatory for the website.  Additionally, there is a page booster plugin such as Asset Clean up which is very helpful in filtering unnecessary CSS and Js while rendering the page.

The Bottom Line:

Make fewer HTTP requests from external domain and reduce the third-party resources on your website.