Sooo… in a random moment of surfing a few months ago I encountered an article of the webp format and how it was faster, and how it was a Google thing, and they therefore wanted you to use it. I knew I had a server move coming up (long story) so delayed worrying about it until now…
Basically webp is like a super-amazing improved replacement for PNG that is MUCH more efficient. Full details here, but for example one of the files I converted to webp went from 942k to 189k which is not to be sneezed at. I still cannot tell ANY difference when I look at both images. Sadly wordpress is too useless to upload webp, but here is one embedded:
…and here is the png:
…exactly.
So with this in mind, I replaced some of the larger images on the Production Line webpage with webp equivalents to speed up the loading. This IS WORTH DOING, but its also worth remembering that some Luddites may be using stupidly old browsers that cannot cope with webp, and you need to also have the option of a png for these people. You can do this with some magic modern html like so:
<picture>
<source type="image/webp" srcset="images/thumb.webp">
<img src="images/thumb.png" width = "1000" height="563" >
</picture>
That basically says ‘show this webp image, unless you don’t have any idea WTF that is, in which case here is an old fashioned png. All of the attributes for your image still go in the src bit.
That got me a nice speed bump, but some test done both with googles site checker and also the popular web speed test showed I was mainly slowed down by third party stuff, specifically humble bundle widget and youtube embeds. (I embed 2 large youtube videos on that page). This is annoying, but after a lot of fiddling I found a reliable way to get around the slow youtube stuff.
What I did was have 2 identical sized elements on the page for each video. One a ‘panel’ and the other a ‘vid preview’, which was basically a big thumbnail made by me (webp obviously) with a fake play button to simulate youtube. The code in the actual page body looks like this:
<div id="panel">
<table width="100%" align="center" cellpadding="0"cellspacing="0">
<tr>
<td align="center" width="1000" height="563">
<iframe id="trailer_youtube" width="1000" height="563" src="" frameborder="0" allowfullscreen></iframe>
</td>
<tr>
</table>
</div>
<div id="vidprev">
<table width="100%" align="center" cellpadding="0" cellspacing="0" onclick="myFunction()">
<tr>
<td align="center" width="1000" height="563">
<picture>
<source type="image/webp" srcset="images/thumb.webp">
<img src="images/thumb.png" width = "1000" height="563" >
</picture>
</td>
<tr>
</table>
</div>
In practice what this does is say ‘here is an embedded iframe called ‘trailer_youtube’ with NO source. And here in the same place is a big phat image. BTW if we get clicked call myFunction()’.
Then at the top of the page in the header we add some code:
<style>
#panel, .flip {
font-size: 16px;
text-align: center;
color: white;
margin: auto;
z-index:1;
}
.vidprev
{
z-index:2;
}
#panel {
display: none;
}
</style>
…which sets the z index (bottom to top stacking) of the two panels, and then we need some actual code for when the thumbnail is clicked on, also in the header:
<script>
function myFunction() {
document.getElementById("trailer_youtube").src = "https://www.youtube.com/embed/IhGTKBAC94c";
document.getElementById("panel").style.display = "block";
document.getElementById("vidprev").style.display = "none";
}
</script>
…that code basically grabs the youtube panel, sets it visible, and assigns it a proper valid youtube link, handily deferring any connecting to youtube.com until we need to. it also hides the thumbnail. The result is a MUCH faster page load (roughly half the time).
In addition, I used some javascript called ‘lazy sizes’, to make the loading of some items lower down the page asynchronous, so they wont even get loaded until the visitor scrolls down. source:
<picture>
<source type="image/webp" data-srcset="images/resources.webp" class="lazyload">
<img data-src="images/resources.png" class="lazyload">
</picture>
and that requires an extra include:
<script src="./js/lazysizes.min.js" async></script>
The result is pretty good, and raises Google’s estimation of my site speed quite a chunk. That will be good for SEO with Google, and they are basically the only search engine that counts so…yay :D. here is the full waterfall chart: