search

ryanditjia / gatsby-plugin-crisp-chat

Gatsby plugin to add Crisp Livechat to your site
MIT License
17 stars 5 forks source link

Improve SEO and Google page speed #1

Closed rturk closed 5 years ago

rturk commented 5 years ago

After we've started to use this plugin our SEO and Google page speed was significantly degraded. We've done some research and realised that loading crisp in our new gatsby website was the root cause.

Few data points to consider

  1. This plugin loads crisp js in the header, even using asyncthis is absolutely unnecessary since loading crisp chat competes with other sockets in the browser
  2. Crisp main js file will also load a buch of other js files, i18n etc.. making it even worse

We propose to:

  1. use aysnc defer in the js loading script
  2. move this to the bottom of the document, never use the header
ryanditjia commented 5 years ago

Thanks for your feedback. The plugin merely does the loading technique described in the official site. I’m down for improvements, however.

Beta branch: https://github.com/ryanditjia/gatsby-plugin-crisp-chat/tree/seo-pagespeed Beta npm version: gatsby-plugin-crisp-chat@beta

What’s in the beta:

  1. Moved script to the end of body tag, from head tag
  2. Added defer attribute

What’s not in the beta, but could possibly be improvement:

  1. Append the dynamically created script to post body too, it’s still left at head

Please test it out and report of the result.

rturk commented 5 years ago

I'll ping crisp team and recommend the official documentation to change from async to defer.

ryanditjia commented 5 years ago

Are you seeing performance improvements with the beta?

rturk commented 5 years ago

HI @ryanditjia haven't tested beta yet, will give it a try and post comments.

rturk commented 5 years ago

Briefly discussed this with the crisp team, they shared this doc https://help.crisp.chat/en/article/will-crisp-slow-down-my-website-1wfqufw/.

From the doc (bottom of the doc): Although it's not recommend , looks like defer is fine.

ryanditjia commented 5 years ago

The article shows a different technique of deferring.

I briefly checked the differences between the 2 techniques and found: https://stackoverflow.com/questions/42950574/are-deferred-scripts-executed-before-domcontentloaded-event

Please try out the beta. If using defer attribute is already showing satisfactory results, I won’t get into implementing the DOMContentLoaded technique.

rturk commented 5 years ago

IMO DOMContentLoaded is terrible for this use case, absolutely NOT recommended. For example if a image fails to load, or any asset in the html fails, even other scripts DOMContentLoaded will not be trigged. This can lead to unpleasant side effects such as the crisp chat not loading at all.

IMO defer is best, since: 1) Always will work and 2) will improve SEO and speed as discussed above

ryanditjia commented 5 years ago

Okay, so DOMContentLoaded is out of the picture.

Upon further reading https://flaviocopes.com/javascript-async-defer/ Looks like async takes precedence over defer, so I pushed another beta (3.0.0-beta.3) that removes the async attribute as well as moves the script back to <head>.

The plugin will follow the canonical loading technique set by Crisp, so defer will be an option in v3 (default will still be async).

Please give 3.0.0-beta.3 a try and let me know if you see SEO and PSI improvements.

ryanditjia commented 5 years ago

Version 3 has been released to include the option to defer the loading of the script.

Danm72 commented 4 years ago

Hey guys, still seeing pretty significant impacts in web.dev scores,

For example: https://lighthouse-dot-webdotdevsite.appspot.com//lh/html?url=https%3A%2F%2F5ef5f0587d5ef78f19997f19--view-dev.netlify.app%2F

ryanditjia commented 4 years ago

Good looking site you built there. I only see one issue related to Crisp: in “Best Practices”. And it doesn’t seem related to this plugin.

Try integrating it manually via HTML and see if it improves? There is a chance that you’ll see regression instead, due to an improvement done in this issue.

Danm72 commented 4 years ago

Thanks man appreciate that!

We've not done any js splitting or anything yet!

Yeah it was the best practises or opportunities area that brought it to our attention its coming up as one of the heaviest script: image

Sorry if its unrelated to the plugin, my bad.