Expand my Community achievements bar.

Tips to make sites load quicker (improve Core Web Vitals)

Avatar

Employee

7/15/22

webspeed.jpg

I have been spending time with customers to help them get their sites to load quicker.. 

 

Here are my top recommendations that I have been giving customers:

  1. Load Adobe Launch Tag Management (today called Data Collection) JavaScript file asynchronous - learn more: https://twitter.com/keepthebyte/status/1546737147452854274 
  2. Use good cache-control headers for /content/dam - learn more: https://twitter.com/keepthebyte/status/1547102275151179776.
  3. Generally - for your cache-control headers.. if you are not using stale-while-revalidate on your CDN - you are having some of your visitors getting slow responses - when they hit the requests where the max-age TTL is up. I haven't found any downside while using stale-while-revalidate. 
  4. Check your HTTP headers - make sure the field vary doesn't contain User-Agent. This is severely impacting your cache efficiently on the CDN. If the vary header contains it - this most likely is coming from a line within your httpd/dispatcher config - remove this exact line from the vhost files: Header append Vary User-Agent env=!dont-vary
  5. Some sites are loading the ContextHub - but are not configuring it - which results in slowing your page rendering in the browser quite a bit. If your site is making a request like /etc/cloudsettings.kernel.js/libs/settings/cloudsettings/legacy/contexthub you are impacted. Please remove the ContextHub from your page template - or configure it correctly with a config in /conf/..
  6. Make sure your sites is delivered with HTTP/2 at least - and not HTTP/1.1 - some folks are running WAF like Incapsula that with default config are making AEM downgrade traffic to HTTP/1.1. Check the WAF settings to end-to-end use HTTP/2.
  7. For folks on Cloud Service - we are shipping WebP image support soon for Core Components. You can start enabling it already when you enable your environments to enable the  prerelease features: https://twitter.com/keepthebyte/status/1547466466043146241
  8. If you are using Core Components - update your proxy components to use Page component V3. This gives you better control of which JS should block rendering of the page (which is the default - and bad for performance) - or async which let's the browser continue to render the page while it's loading the JS and getting it ready to run whenever it's needed. Learn more about how JavaScript loading works in browsers on https://addyosmani.com/blog/script-priorities/ 

Let me know which of these were helpful for you.. - you can check your site for more recommendations https://pagespeed.web.dev/

1 Comment