Website very slow loading issue

Hi Dear,
Thanks in advance! Could you anyone help me to fix it?
My website (https://www.theasianbanker.com/) (https://live.theasianbanker.com/video/?tag=interview) (https://www.wealthandsociety.com/) etc is loading very slow as we can check in online tools like https://tools.pingdom.com/#5de56baddb800000 , etc.

As I have resized the high resol. images and also align the js and CSS files but still the issue same.

Thnaks!
Sajid Sayeedi

The pingdom report you link to gives good advice on things to fix:

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.

Check also https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fwww.theasianbanker.com%2F it can give your more ideas on the elements to improve

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.

You can also use this article by the Filament Group. This is a browser compatible version of rel="preload".

Loading your CSS as…

<link rel="stylesheet" href="./../your-stylesheet-here.css"
    media="print" onload="this.onload=null;this.media='all';" />

… 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.

Also check out this checklist for Front-End performance, it’s what I use as a final go to: https://github.com/thedaviddias/Front-End-Performance-Checklist.