- This topic has 3 replies, 3 voices, and was last updated 5 years, 9 months ago by
.
-
Posts
-
-
Everytime I open a gallery and click on an image, a black background appears. I have to go back and do the operation again, to avoid this problem.
Is it possible to fix this problem?
Thank you
You can visit : https://www.petruvoichescu.com/gravure/
Denise
ATTACHED FILES:
Capture d’écran 2017-12-05 à 22.20.05.jpg -
Hi Denise, what I noticed is that this happens when clicking an image link as soon as possible, before the full page has loaded. The light box effect works fine if the page has fully loaded first.
The problem is that it takes a really long time before all script files have been loaded and treated before, at the very last moment, the light box script is treated. All the while, the light box will not be available even though the browser has started rendering the gallery.
So how to fix this?
1. Reduce page load time and size
With an empty browser cache (as a new visitor) I see a load time of about 35 seconds. And even though the largest file (the theme style sheet) is only 622 KB, the total size of the page is 3.6 MB !
Half a minute waiting for a page to load (even if the light box would work right from the start) and having to download 3.5 MB of data even before seeing one large image is too much to ask from visitors. A two second wait time is already considered to be a bit long (don’t panic: I assure you, many WordPress sites are quite happy to even approach the 2 second limit) and anything over 1 MB for a full page (unless it already includes full size images) considered too heavy, specially for mobile visitors or from slow connections.
There are about 60 script library files that seem to be loaded by the theme. Is that correct? Are you sure all these libraries are needed?
If you see any way to (radically!) reduce this number, then your page load times will hugely benefit. And the light box should start working more quickly after (or before) the first images appear.
There are other tips that you can use to further optimize page load times, like use an image compression plugin like Jetpack Photon or WP Smush, and activate gzip on your hosting (in .htaccess for example) and maybe add a caching plugin. You could start with following the instructions by the Hummingbird plugin.
On Google Pagespeed you can find a general speed score and advice about what should be improved https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fpetruvoichescu.com%2Fgravure%2F&tab=desktop
Even though Google Pagespeed is not the best tool out there, it’s a good indicator about how sites perform in general. You can use it to easily measure / compare after you changed stuff on your site.
2. Fix script errors
Final thing I noticed is that the ajax.min.js script file (included with the theme) seems to expect $j to reference jQuery. This is not the case on WordPress sites where jQuery can only be referenced with “jQuery”. This causes a fatal TypeError when ajax.min.js is parsed.
This will need to be fixed in ajax.min.js, or the script needs to be excluded if you have not done that already after the first two suggestions 🙂
Hope these tips help!
-
-
-
- You must be logged in to reply to this topic.