Today’s topic once again has nothing to do with Live streaming, but instead the platform that I use to create my content about it. For those who don’t know, I utilize WordPress to create and manage my posts here on Streamer’s Haven. It is a platform I am thoroughly familiar with from my time working under a Web Marketing startup back in 2016, so it was a natural choice for me as I joined the world of blogging. However, there are some WordPress Features that I feel are lacking.
My main gripe, which has been partially addressed in the WordPress 5.8 update, was the complete lack of support for .webp images. I say partially addressed because it now allows you to upload them, but I’ve had the ability to do this myself by adding a small bit of code in my functions.php since way before. I don’t consider this feature as it is within WordPress complete yet. More on that in a bit.
Another feature I’d like to see integrated into core WordPress is a Table of Contents list that is automatically populated with your header tags within the post. Additional options would then be added to the heading block in the Gutenberg editor to allow or block appearance in the table of contents. There are many plugins that already do this, but I really feel that it is something so fundamental to blog post UX that I find it almost comical that it isn’t a standard feature. You’ll see how this relates to speed later on.
The final feature I’d like to see implemented is a Video facade toggle for embeds, either by getting the thumbnail from YouTube(or whatever platform) or by choosing an image you’ve uploaded to your media library. This is important specifically because the weight of the YouTube embed is absurdly high. This feature would substantially Improve page load times, putting WordPress higher on the list for Core Web Vitals qualification when videos have been added to a post.
Table of Contents
WordPress Feature 1: Full WebP Support & Serve Webp if Supported
Going into detail on the .webp feature as I envision it, is like what many speed-based plugins like SiteGround Optimizer, WPRocket, and a few others already do –
- Create a .webp variant of an uploaded image on upload
- Serve the .webp image only to browsers that support it
- Bonus points to auto deleting webp variant if the resulting size is larger than the original image.
It is beyond mind-boggling that this wasn’t included in the 5.8 update, and this is why I consider .webp support as it is to be incomplete. If such a system was implemented, then other, more efficient formats like .avif could be created and served to browsers that support them in the future.
WordPress Feature 2: Table of Contents
| Advantages of Table of Contents | Disadvantages of Table of Contents |
|---|---|
| Great for User Experience | Tedious and Time Consuming to Create Without a Plugin |
| On-Page Navigation SEO Boost (?) | Significant speed impact with a Plugin |
| Unnecessary files loaded with a Plugin |
A table of contents is an important reference for the user to be able to find the information they are looking for while skipping anything that they deem to be unimportant or things they already knew. According to many SEO tools like RankMath, they also improve the SEO value of a page by a fair amount, so it helps pages rank better; if they are to be believed anyway.
However, the UX improvement alone is worth consideration of a native solution. Many novice bloggers would simply dismiss the idea of using a plugin to utilize a table of contents, or simply not know to think about adding it. In my opinion, the value is often understated.
Bonus points if it appears in the mobile menu so people can navigate the post itself from the navigation menu. (or at least the option to do so)
Modification of Headings Block in Gutenberg
Yes, I am aware that you can create a list manually for each post, but that takes up a fair amount of time and requires that you set ids for each header you make manually. Instead, what I am proposing is an automatic ID assignment to headings that don’t have a manual ID assigned, and for a table of contents to be populated automatically simply by adding heading blocks to the post.
As stated above, additional options would then be added to the heading block in the Gutenberg editor to allow or block appearance in the table of contents as a toggle switch. I’ve created a little mockup image of what I’m envisioning, which I’ve included above. This is important as some posts can exceed 10,000 words, and that would result in an unwieldy table of contents. Those posts could then prioritize the most important headings for the table of contents population.
Addition of a Performance Friendly Table of Contents Block
If a Table of Contents block is added, then the possibility that it can be inserted into the post at any point, even multiples for easy navigation on longer articles, can be highly beneficial. This is a feature that I have yet to see in any plugins that I have tried, and one that would help the navigation on a mobile device for longer articles.
Yes, there are many plugins that exist that do just as I described, like the Easy Table of Contents Plugin that I use myself. However, I think that this is such a fundamentally important aspect to a web page’s content that I would like to propose that it gets added as a core feature of WordPress.
This can result in an optimized design that isn’t so performance-heavy, as the plugin options tend to add an excessive amount of unnecessary code. According to Ezoic, at least, Easy Table of Contents is an extremely slow plugin, more so than any other plugin on my site. If this is correct, it is likely the reason my site comes just shy of the 2.5-second threshold for LCP, at 2.7 to qualify for the full Core Web Vitals SEO Boost. I can’t knowingly remove one of the best user experience plugins to qualify for maximum speed though, so it will have to stay.
Other options don’t fare much better either when speed is concerned.
WordPress Feature 3: Video Facade for Embeds
The final feature on my wishlist is the inclusion of native support for video facades when embedding video content. If you look at the speed metrics of any page with an embedded YouTube video, you’ll note that it includes a 500+kb script and a secondary embed script. This is a monumentally huge script, bigger even than Jquery, and it drastically slows down page load time. The secondary script involved with the embed player is also absurdly large.
While this feature won’t change the size of these files that are necessary for playback of youtube video embeds, only loading the full video script if the user WANTS it to load is a far better solution for the initial loading page speed.
In fact, the implementation of video facades is also one of the recommendations that Google’s Page Speed Insights tool recommends as a solution. It makes perfect sense too – why load more than you need to for a page to display properly?
The less time spent on script evaluation, the more time that can be spent rendering out the page, thus improving the perceived speed of a website, and subsequently improves user trust in the site. At the same time, video is quickly growing into the most consumed form of content on the internet, so the exclusion of it on a website is almost committing career suicide.
I have tried the various video facade plugins out there, but every single one that I tried consistently bugged out, except perfmatters. Too bad it isn’t compatible with Ezoic.
That is beside the point though – a video facade should be the default implementation of video embeds going forward. There are a ton of open-source projects that can be implemented, but for the technically unsavvy, implementing them into WordPress is a literal nightmare. I daresay this is the biggest improvement that WordPress could introduce in terms of overall page speed when it comes to serving both video and text content on our websites.
But that’s enough about WordPress – Time to get back to stuff about live streaming and content creation, though technically blogging itself counts as a form of content creation…
What do you think, should I write more about blogging itself? Let me know in the comments!
Here Are Some Popular Choices for Streamer Gear
Hey, thanks for reading the article! So I’ve compiled this small resource for you guys in case you may be on the lookout for some handy or helpful things to add to your streaming setup. Some of you may be new to streaming and may not know about this stuff, so I wanted to bring this stuff to your attention.
There are a large number of cool products designed to make the lives of streamers and content creators easier or to improve the quality of their setup. Before I do list them though, I strongly recommend that you do your research and check reviews from multiple sources, even beyond those I’ve included here. It is never bad to get a second, third, or even fourth opinion before you make an investment.
Microphones: One of the most popular microphones for live streaming is the Elgato Wave 3 or Wave 1. This microphone is great for streamers because it gives you a ton of control over your audio chain, mimicking some of the features of the venerable GoXLR virtually without all the wires and complexity.
Here are some reviews that you can reference so you can decide whether or not you’d like to get one for yourself:
EposVox Wave 3 Review / Harris Heller(Alpha Gaming) Wave 3 Review / Podcastage Wave 3 Review
Audio Interfaces: For those of you who’d like to not be limited to a single microphone option, then you’re in luck because Elgato now makes the Wave XLR Audio Interface. This device allows you to use any XLR microphone, including the ever-popular, but gain hungry SM7B without a cloud lifter, and retain the features of the Wave microphones mentioned above.
Here are some reviews of this audio interface:
EposVox Wave XLR Review / Podcastage Wave XLR Review / Harris Heller Wave XLR Review
Green Screens: A green screen is a common tool used by content creators to give them unparalleled control over their backgrounds for content. Many opt to use a green screen to remove their background entirely and overlay themselves onto the gameplay itself. As for What green screen I recommend, you’ll have to read my article about green screens, because it explains it better than what I can fit here.
Lights: Lighting is super important if you care about the quality of your camera feed from your webcam or any camera for that matter. For one, those of you who rely on your monitor for your main source of light will have inconsistent lighting that changes based on what your screen is displaying. The best part is that almost any light will do, as any light is better than no light.
With that said, there are better lights that are designed for production purposes that have better color accuracy, are brighter, and have more control. You can check out some of them in my top 5 lights article. Also, having a dim light in your background on a camera scene will look better.