Expand my Community achievements bar.

July 31st AEM Gems Webinar: Elevate your AEM development to master the integration of private GitHub repositories within AEM Cloud Manager.
SOLVED

How to improve browser caching.

Avatar

Level 5

Hi Everyone,

As Google is moving to a more mobile centric focus in algorithms determining organic search rankings. We have been advised that they look at the total time ALL files take to load, with all testing done on 3G connections. Our current load time is being measured as 10 seconds, using https://testmysite.thinkwithgoogle.com/intl/en-us. It has been recommended that we prioritize content so it loads first.

Can someone help me with what are the changes and steps to take care to improve browser caching and prioritize the content load.

Thanks,

Narayana

1 Accepted Solution

Avatar

Correct answer by
Employee Advisor

I am not a SEO expert, so I cannot tell, what google mean when they talk about "fast loading". It can be the pure download speed, but on the other hand side it can also mean that the page should not take 10 seconds to render (although all necessary files are already downloaded) due to complex Javascript and CSS.

So a few best practices based on my experience:

  • reduce the number of files you need to download to display a page. 1 HTML, 1 Javascript file, 1 CSS file plus a few assets (images), that's probably the optimal case. I know that it's hard to reach, but you avoiding loading hundreds of files (even small ones).
  • make these files cacheable in the browser and reuse them all over the site. Use the same JS file(s), use the same CSS file(s). Use the standard HTTP caching headers. Leverage Browser Caching  |  PageSpeed Insights  |  Google Developers
  • Use the dispatcher to speed up the loading of the files, which the browser has not yet cached.

That's a few improvements, which do not only improve your SEO ranking, but have a large impact on the experience of your visitors on your site as well.

Jörg

View solution in original post

6 Replies

Avatar

Administrator

Which product is in the consideration?



Kautuk Sahni

Avatar

Level 10

Dispatcher is the tool that works with AEM and caching content.

Avatar

Administrator

Please have a look at this documentation :- Dispatcher Overview

Dispatcher is Adobe Experience Manager's caching tool. Using AEM's Dispatcher also helps to protect your AEM server from attack. It also filters the incoming request from client to AEM publish instances.

Configuring:- Configuring Dispatcher

-Kautuk



Kautuk Sahni

Avatar

Correct answer by
Employee Advisor

I am not a SEO expert, so I cannot tell, what google mean when they talk about "fast loading". It can be the pure download speed, but on the other hand side it can also mean that the page should not take 10 seconds to render (although all necessary files are already downloaded) due to complex Javascript and CSS.

So a few best practices based on my experience:

  • reduce the number of files you need to download to display a page. 1 HTML, 1 Javascript file, 1 CSS file plus a few assets (images), that's probably the optimal case. I know that it's hard to reach, but you avoiding loading hundreds of files (even small ones).
  • make these files cacheable in the browser and reuse them all over the site. Use the same JS file(s), use the same CSS file(s). Use the standard HTTP caching headers. Leverage Browser Caching  |  PageSpeed Insights  |  Google Developers
  • Use the dispatcher to speed up the loading of the files, which the browser has not yet cached.

That's a few improvements, which do not only improve your SEO ranking, but have a large impact on the experience of your visitors on your site as well.

Jörg

Avatar

Level 5

Thank you Jörg, we are following the same suggestions as mentioned.