Performance hack seen on a customer site; fix the bad LCP (due to an animation in revslider) by loading an inline (base64’ed) png image which according to FF is broken and later in the rendering process hiding & removing it.
Even though that image is not *really* used, tools such as Google Pagespeed Insights pick it up as the LCP image and the score is “in the green”.
Not sure this is really helping performance (spoiler: it’s not), but Pagespeed is happy and so is the customer. Crazy!
Dear WordPress friends in the USA: I hope you vote and when you do, I hope you vote for respect. The world worriedly awaits your collective verdict, as do I. Peace!
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:
loading="lazy" attribute;loading="eager" is set (which means load asap)loading="lazy" is setloading="lazy" is setConclusion; 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).
Lyte was just listed as a top video player on WP Glob 🙂
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; Нет войне!
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!
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 …
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.
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;
And in case you’re wonder, this how a LYTE video looks like;
(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.)
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).
