Question

How to reduce Page Load 19s


Hello everyone

 

I am creating my website with Elementor; I really enjoy the software and I have created pages that I consider very nice, However, unfortunately, I am facing the problem of page-load. According to GTMetrix my site loads in 12s and sometimes in 19s which is too high

 

Among the Optimization tips provided by GT Metrix and my hosting provider are: 

  • Reduce initial server response time, Make fewer HTTP requests and Avoid chaining critical requests.
  • Streamlining the codebase, making functions more efficient
  • Reducing complex operations or bundling up code to be only executed when needed
  • Making database queries more efficient, removing unnecessary queries
  • Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

    HTML usually has the highest priority, followed by CSS, images, and JavaScript. When these critical requests form long chains, they increase latency and extend your page load times. It is advisable to consult the web developer in your area and ask them to work on the website's CSS and Javascript to reduce HTTP requests and critical requests so that performance of the website is improved. 

SERVER SIDE CATCHING

I already implemented server-side catching. I have my website hosted in CloudFlare

I have also eliminated plugins and  images that I do not use. I optmized pictures that I do use. Some are as light as 80kg. and in .webP format. However, none of this seem to make crucial changes:  the site continues to load very slowly

 

USE CODE COVERAGE: to find unused JavaScript and CSS that  should be removed. I DON´T KNOW HOW TO USE THIS. 

 

PLEASE NOTICE: 

i am completely inexperienced, I am no techie at all, and I know nothing about coding. So because I will have to deal with code CustomCSS  my question is weather Elementor Community or Elementor Pro Support can provide help to fix these issues. 

 

I don´t know if I have to ask the community, or in case i should have to buy Elementor Pro , or Hello everyone

 

I am creating my website with Elementor; I really enjoy the software and I have created the pages that I consider very nice, and without issues. Now, unfortunately, I am facing the problem of page-load. According to GTMetrix my site loads in 12s and sometimes in 19s which is too high

 

GT Metrix and my hosting provider say: 

  • Reduce initial server response time, Make fewer HTTP requests and Avoid chaining critical requests.
  • Streamlining the codebase, making functions more efficient
  • Reducing complex operations or bundling up code to be only executed when needed
  • Making database queries more efficient, removing unnecessary queries
  • Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

    HTML usually has the highest priority, followed by CSS, images, and JavaScript. When these critical requests form long chains, they increase latency and extend your page load times. It is advisable to consult the web developer in your area and ask them to work on the website's CSS and Javascript to reduce HTTP requests and critical requests so that performance of the website is improved. 

SERVER SIDE CATCHING

I already implemented server-side catching. I have my website hosted in CloudFlare

I have also eliminated plugins and  images that I do not use. I optmized pictures that I do use. Some are as light as 80kg. and in .webP format. However, none of this seem to make crucial changes:  the site continues to load very slowly

 

USE CODE COVERAGE: to find unused JavaScript and CSS that  should be removed. I DON´T KNOW HOW TO USE THIS. 

 

PLEASE NOTICE: 

i am completely inexperienced, I am no techie at all, and I know nothing about coding. So because apparently I will have to deal with code Custom CSS  my question is weather Elementor Community or Elementor Pro Support can provide help to fix these issues. 

 

In case there is an Addon to buy, I don´t know which one it should be. Please clarify

 

I am lost here; Your advice will be so much appreciated!!! 

 

Thank you very much in advance

 

Liliana

 


13 replies

Userlevel 3
Badge

You might want to post the link to your website to get some more feedback.

You could try running some options with the free version of this plugin https://wordpress.org/plugins/wp-optimize/(make sure you back up first!). This will optimise your database and you can defer and minify your scripts which should help.

Userlevel 1
Badge +2

Why not you prove your URL, so we can give you suggestion.

Cloudflare DO NOT hosts your website. In some case, the FREE CloudFlare actually slow down your website.

By looking at the page loads, do you optimise your images? Do you use slider? Do you use video background?

U may check up my blog on how to speed up your site https://bit.ly/vroomwp

Userlevel 6
Badge +2
  1. Image 0ptimization
  2. Preloading Assests
  3. Use CDN
  4. Use Cloudflare
  5.  Use lazyload
  6. Minify your css and js
Userlevel 1

Before everything
use a caching plugin.
WP Rocket preferred but even a free plugin like WP Fastest Cache or Breeze.
don’t enable everything right away, enable settings one by one, as some of them can break your site.

This will turn your very slow response site to a normal site that can load under 3sec,

and from there, you need to implement a lot more optimizations, like JS, CSS, images, fonts, icons, …

 

Shay Toder

Userlevel 6
Badge +3

@Aflorarte You are not alone and we can help!  It is now “Elementor Optimization week” where you have access to a number of optimzation experts to help you.

In the first instance, please share a URL for your site and I will perform a FREE GT Metrix test and report the findings along with recommendations for improvements.  In the mean time, please do not go buying extra plugins etc. until such time as we have performed an analysis for you.

 

https://elemn.to/grassmedia

Userlevel 6
Badge +3

@Aflorarte You are not alone and we can help!  It is now “Elementor Optimization week” where you have access to a number of optimzation experts to help you.

In the first instance, please share a URL for your site and I will perform a FREE GT Metrix test and report the findings along with recommendations for improvements.  In the mean time, please do not go buying extra plugins etc. until such time as we have performed an analysis for you.

 

https://elemn.to/grassmedia

Exactly what Nigel said.
Take up his offer and don’t resort to purchasing any premium plugins.

Can we get a High Page Score after a Makeover with Elementor Pro? - YouTube

Userlevel 4
Badge +2

Hi Liliana,

I can give you insights, what I found from testing, monitoring my website

Correct me If I am wrong-

#1. 

Reduce initial server response time (Time to First Byte TTFB): 

Time to First Byte (TTFB) refers to the time between the browser requesting a page and when it receives the first byte of information from the server.  This time includes DNS lookup and establishing the connection using a TCP handshake and SSL handshake if the request is made over https.

 

Recommendation:

  1. Get your server near to your audience (my English is incorrect).
  2. To get consistent results on your test, choose locations properly while testing and start using webpagetest instead of GTMetrix.
  3. Get a Content Delivery Network(CDN), this will not improve your performance but also reduce server load, attacks, etc 
  4. Set up page/ Application level caching solution like Swift performance pro/lite, WP Rocket, FlyingPress etc

#2.

Reducing complex operations or bundling up code to be only executed when needed: Elementor has already done this and you can enable the Experiments feature in Elementor > Settings > Experiments,  this features will reduce the page weights, load JS conditionally and remove HTML wrappers from entire pages.

Caution: This feature can break your site layout and functionalities, so set up staging site and mess around the feature and see if it break and you can take decision accordingly.

 #3.

 

 

Decreasing the number of components on a page reduces the number of HTTP requests required to render the page, resulting in faster page loads. Some ways to reduce the number of components include: combine files, combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

HTML usually has the highest priority, followed by CSS, images, and JavaScript. When these critical requests form long chains, they increase latency and extend your page load times. It is advisable to consult the web developer in your area and ask them to work on the website's CSS and Javascript to reduce HTTP requests and critical requests so that performance of the website is improved.

Solution: You can ignore it because Cloudflare support HTTP/2 protocol by default. 

Combine multiple scripts into one script, combine multiple CSS files into one style sheet, and use CSS Sprites and image maps.

This method is for old server that do not support HTTP/2 protocol.

 

#4. 

I already implemented server-side catching. I have my website hosted in CloudFlare

I have also eliminated plugins and  images that I do not use. I optmized pictures that I do use. Some are as light as 80kg. and in .webP format. However, none of this seem to make crucial changes:  the site continues to load very slowly

  1. I already implemented server-side catching. I have my website hosted in Cloudflare: Consider using Cloudflare APO service, this will reduce TTFB by caching HTML( not for woocommerce) in theory but if your visitors are using crappy network, you can’t do anything.
Cloudflare APO - KeyCDN performance test

 

  1. I have also eliminated plugins and  images that I do not use. I optimized pictures that I do use. Some are as light as 80kb. and in serve .webP format. However, none of this seem to make crucial changes:  the site continues to load very slowly: You need to learn how to give priorities to these images by lazy loading below the fold images and preload images in viewport (above the fold) so that they load earlier as possible.

#5.

USE CODE COVERAGE: to find unused JavaScript and CSS that should be removed. I DON´T KNOW HOW TO USE THIS:  This is chrome Dev tools - Coverage report which allows which CSS and JS are used and unused. You can extract used CSS & JS and load it to your page asynchronously so it doesn’t block rendering.

  • You can follow my in-depth tutorials on how to remove unused CSS without breaking your site design.
  • You can also enabled Improved CSS Loading experiments, this will reduce half of the  frontend unused CSS.   

#6.

PLEASE NOTICE: 

I am completely inexperienced, I am no techie at all, and I know nothing about coding. So because I will have to deal with code CustomCSS  my question is weather Elementor Community or Elementor Pro Support can provide help to fix these issues. 

 

I don´t know if I have to ask the community, or in case i should have to buy Elementor Pro , or Hello everyone

 

I can recommend 3rd parties caching solution that will help you improve site performance. All the 3rd parties premium plugin have 30days refund policy, so test it in your staging site and implement on your live website-

  1. WP Rocket
  2. Swift Performance pro
  3. FlyingPress
  4. Nitropack
  5. (not caching) Autoptimize + Critical CSS + RapidLoad etc &
  6. Hire professional

Please don’t repeat the answer.

Cheers

Userlevel 6
Badge +3

Another Plugin that can be useful is Asset CleanUp if you want to remove some bloat from some Plugins that are not present on some pages.

Hello everyone

I appreciate your reply very much. I got a little bit confused because after all efforts in installing my website in CloudFlare, I now learn that it is not the best solution. 

Also, I learnt that having CloudFlare, I should not use a different cache plugin because they may conflict.

I did optimize my images with https://www.birme.net/ and also with https://imagen.online-convert.com/es/convertir-a-webp  

 

I will try the following:

Asset CleanUp

 

https://wordpress.org/plugins/wp-optimize (I did try it in the past but found no progress)

  • following in-depth tutorials on how to remove unused CSS without breaking your site design.
  • You can also enabled Improved CSS Loading experiments, this will reduce half of the  frontend unused CSS. 

Actually, most of the replies  in this ticket I don´t understand what exactly should be done, and while I dare to experiment with some plugins, I really do not dare to experiment wtih those that could break the site.  However, I am most grateful to you all and I gladly share  my sites with you so that you can have a close understanding of the issues

 

https://recorreba.com/

https://recorreba.com/arquitecto-fernando-yosovitch/

https://recorreba.com/recorridos-presenciales/

 

Thanks a lot again!

 

Hello everyone and thank you very much for all your suggestions

 

In reply to Nigel Hancock ´s comment, I am sharing example sites of my website in case they all render the same problem

 

https://recorreba.com/

https://recorreba.com/arquitecto-fernando-yosovitch/

https://recorreba.com/recorridos-presenciales/

https://recorreba.com/arquitectura-en-argentina/

https://recorreba.com/producto/argentina-del-progreso/

 

Again, thank you very much in advance

 

Liliana

 

 

Userlevel 4
Badge +2

@Aflorarte 

All the links you provided has same issue and you need to fix it

  1. Server response time ( Upgrade your hosting)
  2. Render Blocking Resources (Generate critical CSS and rest load all the stylesheet asynchronously so it doesn’t block rendering and defer all the JS)
  3. Serve your image in Next-gen format (webp or Avif)

Thank you so much!!! 

 

I have been testing your advices.  However, what I see is I am getting problems with Elementor and WordFence.

These two plugins have been working together very nicely but now something crashed and I can only Edit with Elementor UNLESS I have WordFence deactivated. 

 

I honestly don´t know what could have caused it. I placed this query in WordFence and Elementor forums that I can share with you for your reference.

 

WordFence does not let me edit with Elementor | WordPress.org

 

Unable to edit with Elementor | WordPress.org  

 

Hope this information helps.

 

Again, thank you very much in advance!!

 

LIliana

 

 

 

Reducing TTFB is critical to your visitors' page experience as it affects every resource referenced in your HTML, and directly influences how long it takes for your page to load. A slow TTFB may negatively affect your front-end resources as your visitors may only see a blank page while the browser is waiting for a response from the server.

 

If you want to be sure your site is up to standard, you can use GTmetrix.  It is a tool that allows you to analyze your web server response times, monitor your webpages, and test your speed on mobile. There are free and pro versions available. GTMetrix has both free and paid versions. Simply enter your URL, and you’ll see an overall score for page load time, which also includes SRT data. 

 

Also, there are many other methods  to check your server’s speed and performance. Here are the top ones I recommend.

  • Use Reliable and Fast Web Hosting
  • Use a CDN
  • Optimize Databases
  • Performance Analysis. 
  • Compressing Images.
  • Configure Caching
  • Minify Scripts
  • Minimize Redirects and Broken Links.


 

Reply