photoswipe.css loaded onto every page

I don’t understand the problem. Do you want to disable the plugin on the front page? Because otherwise the CSS file will only be loaded, if the plugin is not disabled for that page in the backend settings. The code for this in the plugin will always either load everying – CSS and JS – or nothing. But so far there is no setting to disable the plugin on the front page, since nobody asked for this yet.

As an example for a page without phtoswipe.css see this page: https://wordpress-demo.arnowelzel.de/lightbox-with-photoswipe-disabled/

• This reply was modified 4 years, 10 months ago by Arno Welzel.

i prevent the lightbox stuff from being loaded on archives pages like this:

function my_lbwps_enabled($enabled, $id) {
	if ( is_singular() ) {
		return $enabled;
	}
	return false;
}
add_filter('lbwps_enabled', 'my_lbwps_enabled', 10, 2);

you could further control this with is_page() or is_single().
then there’s the option to exclude specific posts and pages by id in the plugins settings.

from what i understand, you’d like to control it more the other way round. like… the plugin files aren’t loaded by default but only if you tell them to.
i imagine this could be archieved by adding a custom field radio button “use lightbox y/n” for posts or pages to your theme.
so something like this would go to your themes functions.php then:

function my_lbwps_enabled($enabled, $id) {
	if ( <em>custom field radio button has value</em> ) {
		return $enabled;
	}
	return false;
}
add_filter('lbwps_enabled', 'my_lbwps_enabled', 10, 2);

Yes, I’m asking for a new setting if that is okay.

I want to remove the render blocking script and CSS from any page that do not need the plugin on them.

A switch per page is okay or if possible just code that checks if the plugin is being used on a page, then loading the code only if needed.

I wanna slim down my site and save users money on downloads by not having such a bloated website.

Google Audit shows this plugin as render blocking. It slows down the page load which reduces our Google Audit score and potentially gives us a worse ranking as the pages are slow.

• This reply was modified 4 years, 10 months ago by a4jp.
• This reply was modified 4 years, 10 months ago by a4jp.

This reply is a bit longer – but please take your time to read it, it may give you additional information not only about Photoswipe.

First of all: an audit by Google or anyone else is not a “law” which has to be followed in every case. It’s just a list of recommendations, what you could improve. But in the end, real world experience is important as well and you must take care not to make things worse – speed is not everything, a correct function is also important, but I will explain this later.

For example:

If I check my own website https://arnowelzel.de Google PageSpeed Insights tells me, that my page has 15 rendering blocking scripts (Photoswipe is only one of those) and I could save about 10 seconds by moving the scripts out from the header.

However, when I test the real loading time in https://tools.pingdom.com I see that even from Asia it will only take about 3 seconds to load and in Europe (Germany) where the server is located it is less than 1 second.

This matches my real world experience: when I load my website on a smartphone with a 4G connection, it will take about 2-3 seconds to load with an empty cache. However, the second load will already be faster since all the scripts and CSS files are in the browser cache and don’t have to get loaded again.

When I do the same audit for your website, there are more than 30(!) blocking scripts and https://tools.pingdom.com determines a loading time of 4 seconds from Europe (Germany) and about 1.5 seconds from Asia. So even with 30 blocking scripts your site will be loading quite fast for users in Asia. If you want to improve the speed for European visitors as well you would need a CDN – just removing the 3 scripts from PhotoSwipe won’t make a big difference.

As I see, you also already have proper expire headers to cache static content for about 30 days – which is good. But: you also removed the version parameters from all scripts and styles – this is not good! Don’t do this! Because if you update a plugin or WordPress itself, visitors will not get the new styles or scripts since the old ones are still in the browser cache! I think you did some audit and got the recommendation to remove the version parameters for better caching. This is not neccessary! Browsers will cache content, even if the URL contains parameters and even proxy servers are nowadays smart enough to cope with parameters in the URL. The recommendation to avoid parameters in URLs comes from the early days of the web and should be considered obsolete – it makes no difference today.

If you really want to get rid of warnings “remove version parameters” you should better create a custom htaccess redirect and add the version number as part of the URL, also see here:

https://arnowelzel.de/en/versioning-of-static-resources-in-wordpress

Then about what you can gain by removing Photoswipe on a single page: The whole code for PhotoSwipe – all scripts, CSS and frontend HTML – take about 120 KB. 3G and 4G networks usually provide at least 10 MBit/s. So this means, removing PhotoSwipe will give you about 0.1 seconds improvement in loading time. Since your server supports HTTP/2 all resouces will loaded parallel, so the real performance gain is minimal.

An option to globally disable the plugin just to gain very little performance makes no sense, since you then would have to manually enable it then on every single page where you want to use it. And checking a page specific option for every single request also adds load to the server and could increase loading time again.

An automatic inclusion “if needed” is not possible as well, since the plugin has to enqueue scripts and styles during intialization before the page content is rendered.

So after knowing all this if you really want having Photoswipe only on specific pages, you should create a custom filter as suggested above. For example – if you name your custom field to enable Photoswipe “enable-photoswipe” then the code in functions.php of your theme could be like this:

function my_lbwps_enabled($enabled, $id) {
    global $post;
    if (get_post_meta($post->ID, 'enable-photoswipe', true)) {
        return $enabled;
    }
    return false;
}
add_filter('lbwps_enabled', 'my_lbwps_enabled', 10, 2);

With this code you have to add a custom field named “enable-photoswipe” to your posts or pages and fill in the value 1 to enable Photoswipe for the specific post or page. Otherwise Photoswipe won’t be used at all.

If you use Gutenberg, you can enable the custom fields block in the Gutenberg options. Also see here: https://www.namehero.com/startup/how-to-use-custom-fields-in-gutenberg-screenshots-example/