wp-youtube-lyte

When lazyloading iframes does (not) work (automatically)

by

WordPress has made some good progress to speed up site rendering the last couple of years and part of this is thanks to images and iframes having the “loading” attribute with value “lazy”, telling browsers these can be loaded later allowing other (more important) assets to take priority. Especially iframes can consume a lot of bandwidth (think embedded Google Maps or one or more YouTube videos), so the performance impact of lazyloading those can be very significant.

Unfortunately one cannot always rely on WordPress core to automatically make sure there is no performance penalty from stuffing your site with iframes. Here is a non-exhaustive list of when iframes will still delay your site:

  1. WordPress core does not always add the loading="lazy" attribute;
    1. if loading="eager" is set (which means load asap)
    2. if no width & height are set (as lazyloading iframes without those could cause layout shifts)
  2. Firefox (and some less important browsers) does not support lazyloading iframes even if loading="lazy" is set
  3. iframes in or near the “above the fold” part of a page are loaded immediately, even if loading="lazy" is set

Conclusion; show restraint when adding iframes; adding an image of Google Maps which links to (a separate page with) Google Maps is almost always as informative and the performance benefit of using an image instead of an GMaps iframe is huge. And when using iframes then consider using alternative solutions to avoid the performance impact (for YouTube you might want to give WP YouTube Lyte a try).

Нет войне!

by

My work as a developer of free and open source software is an expression of my firm belief in humanity, communication and collaboration. War is the opposite of those beliefs and I strongly support any action that opposes Vladimir Putin’s invasion of Ukraine. As such the protests in Russian cities against the war need to be heard loud and clear and repeated by anyone who believes in dialogue; Нет войне!

Fix for Elementor 3.1 YouTube not LYTE anymore

by

Elementor 3.1 came with “refactored YouTube source to use YouTube API in Video widget” which resulted in WP YouTube Lyte not being able to lyten up the YouTubes any more. Below code snippet (consider it beta) hooks into Elementor to fix this regression;

add_filter( 'elementor/frontend/widget/should_render', function( $should_render, $elementor_element ) {
	if ( function_exists( 'lyte_preparse' ) && 'Elementor\Widget_Video' === get_class( $elementor_element ) ) {
		$pas = get_private_property( $elementor_element , 'parsed_active_settings');
		if ( ! empty( $pas['youtube_url'] ) ) {
			echo lyte_preparse( $pas['youtube_url'] );
			return false;
		}
	}
	return $should_render;
}, 10, 2 );
// from https://www.lambda-out-loud.com/posts/accessing-private-properties-php/
function get_private_property( object $object, string $property ) {
    $array = (array) $object;
    $propertyLength = strlen( $property );
    foreach ( $array as $key => $value ) {
        if ( substr( $key, -$propertyLength ) === $property ) {
            return $value;
        }
    }
}

Hat tip to Koen for his assistance in digging into Elementor, much appreciated!

LYTE: change in YouTube API caching behavior

by

As mentioned earlier here, Google checks YouTube API usage and can cancel a project/ API key if there are no API requests for 90 days. Based on the fact that earlier post received more hits the last week and people asking on the WordPress support forum, I went back to the drawing board code editor and added logic for LYTE’s cached YouTube API responses to expire after 2 months, causing somewhat regular requests to YouTube which should keep Google happier with the API usage.
Obviously if you have page caching (which you should) this can have an impact as well, as a cached page will not result in LYTE “seeing” the request, so the cached YouTube data would not get refreshed even if older then 2 months. Then again having such aggressive page caching would likely cause other issues (nonces in forms becoming invalid and such), so I *think* the one month margin (results cached for 2 months whereas Google wants activity in 90 days) should suffice.
For those who don’t like the cache to expiry of if you want more or less then 2 months; I added  2 filters allowing you to tweak with a bit of code. Returning false to lyte_ytapi_check_cache will make LYTE function as before (no cache expiry) and the cache expiry threshold can be changed using the lyte_ytapi_cache_gracetime filter.
And like blogposts concerning LYTE, here’s a video to show it action: Yves Tumor with “Gospel for a New Century”. Weird stuff I admit (you have been warned), but good weird really …

Yves Tumor - Gospel For A New Century (Official Video)

Watch this video on YouTube.

Don’t take free & open source for granted; donate to Mozilla!

by

Do you ❤️ the free and open web and do you want to ensure a non-profit can continue to play an important role? Do you use Firefox or use MDN (Mozilla Developer Network) to check up on JS or CSS or HTML syntax?
We do too and as from today Optimizing Matters will donate $20 monthly. If you use Autoptimize or Async JavaScript or WP YouTube Lyte then please, pretty please, consider donating at https://donate.mozilla.org too.

WP YouTube Lyte: 20K active installs and a new release

by

It took a lot of time for WP YouTube Lyte to get there, but we finally got to 20 000 active installs, and to celebrate that occasion I release a long overdue update (1.7.6), with the following improvements;

  • extra parameters for shortcode (start, showinfo, stepsize and hqthumb).
  • also turn youtube-nocookie.com iframes into LYTE’s as proposed by Maxim.
  • also remove cached thumbnails when clearing cache.
  • also set image in noscript tag to local hosted thumbnail if that option is active.

And in case you’re wonder, this how a LYTE video looks like;

Thom Yorke - Unmade (Live from Electric Lady Studios)

Watch this video on YouTube.

(Thom Yorke, Unmade from his Susperia soundtrack, live. I have been looking for something more upbeat in my YouTube favorites playlist, but this ultimately is what I want to share now. Sorry if.)

(When) Should you update to WordPress 5.0?

by

Concerning the very short-notice release-announcement of WordPress 5.0 with Gutenberg for Dec 6th: I’m with Yoast;He has a great “should I update”-checklist and conclusion in this blogpost;

  • Is now the right time to update?
  • Can your site work with Gutenberg?
  • Do you need it?

So our advice boils down to: if you can wait, wait. 

So if you have a busy end-of-year, if you’re not 100% sure your site will work with Gutenburg or if you don’t really need Gutenberg in the first place; wait (while WordPress 5.0 stabilizes with some minor releases).

LYTE YouTube API use warning mail

by

WP YouTube Lyte users might have received the following mail from Google/ YouTube:

This is to inform you that we noticed your project(s) has not accessed or used the YouTube Data API Service in the past 60 days.
Please note, if your project(s) remains inactive for another 30 days from the date of this email (November 9, 2018), we will disable your project’s access to, or use of, the YouTube API Data Service. As per Section III(D)(4) of the YouTube API Services Developer Policies (link), YouTube has the right to disable your access to, and use of, the YouTube Data API Service if your project has been inactive for 90 consecutive days.

The reason for this is that LYTE caches the responses from YouTube to ensure optimal performance. You can check your API usage at  https://console.developers.google.com/apis/dashboard. In my case it actually was not inactive although not very active either;

To make sure my API access would not get disabled I ticked the “Empty WP YouTube Lyte’s cache” checkbox in LYTE’s settings, saved changes to force LYTE to re-request the data from the YT API when pages/ posts with LYTE’s being requested again. The result:

I do have a non-neglectable number of videos on this little blog already, but here’s one more for a rainy Saturday-afternoon;

Damien Jurado - Allocate (Live and acoustic on 2 Meter Sessions)

Watch this video on YouTube.

 

How to LYTE-n up your WooCommerce video’s

by

So you have a WooCommerce shop which uses YouTube video’s to showcase your products but those same video’s are slowing your site down as YouTube embeds typically do? WP YouTube Lyte can go a long way to fix that issue, replacing the “fat embedded YouTube player” with a LYTE alternative.
LYTE will automatically detect and replace YouTube links (oEmbeds) and iFrames in your content (blogposts, pages, product descriptions) but is not active on content that does not hook into WordPress’ the_content filter (e.g. category descriptions or short product descriptions). To have LYTE active on those as well, just hook the respective filters up with the lyte_parse-function and you’re good to go;

if (function_exists('lyte_parse')) {
add_filter('woocommerce_short_description','lyte_parse');
add_filter('category_description','lyte_parse');
}

And a LYTE video, in case you’re wondering, looks like this (in this case beautiful harmonies by David Crosby & Venice, filmed way back in 1999 on Dutch TV);

Venice & David Crosby - Guinnevere (Live on 2 Meter Sessions)

Watch this video on YouTube.