Just the homepage is 103 requests and 5,7mb - that’s very big and optimising that is going to go a long way.
If MODX is slow to generate the pages (“TTFB”), you can inspect your templates to make sure all your snippet calls that can be cached, are cached. Especially things like Wayfinder, getResources, or pdoTools snippets.
Hi, you need to start checking your page elements, the first thing I’ll get into would be your images, seems like you have lots of almost uncompressed images and also jpg, try to keep everything with png, and improve your compersion, for example, your image weighs 759K, but after processing it with https://tinypng.com/ its just 154k, and multiplying those saving in all the big files you have, it will probably give you a good performance boost.
Hi @camicase82, @markh, @bobray
Actually, I am using phpthumbof package but automatically stopped working. So it’s unable to create a thumbnail image and we facing a high resol. and loading issue.
Could you suggest to me that how to fix it?
Thanks!
Sajid Sayeedi
Hi there, next step would be to go to the logs and check if something is wrong with your instance and diagnose why phpthumbof stopped doing itjob, then try reinstalling the extra from the source
If phpthumbOf stopped working, try using pThumb with Resizer (it’s a drop in replacement for phpThumbOf). I’d also try to check the MODX Error Log to see what kinds of errors you’re seeing in there that could potentially shed some light on environment issues.
Further to that I’d install debugParser and run it in cache=1 mode to see what isn’t cached on the pages. I almost wonder if your thumbnails that are working are not being cached properly.
You also have nearly 2MB of JS on the site. The average weight of an entire page should be ideally under 2MB. It might be beneficial to reconsider things like AddThis that are bogging down your page delivery. Add this and it’s corresponding JS/CSS is 1MB of the page. I’d guess only a small % of visitors even use that. Most news and magazine sites have dropped them for the lack of engagement.
… loads it asynchronously in the background. Since it has a media="print" attribute, the browser downloads it in the background to have ready just in case it is needed.
There are articles out there that go into more details about network waterfalls and when to use rel="preload" if you are interested, but this should cover most use cases.
Also consider adding in a small image lazyloading library like lazysizes, and including the loading="lazy" attribute on images that will be off screen on load, here’s a plugin for lazysizes to increase cross browser compatibility.