Lazy Loading and `srcset` images in the Grid

We make screenshots of all Pens and serve them in a variety of ways, most notably in any “grid” of Pens on CodePen. All Pens will show an image in the grid at first, and then if the Pen is animated (and you don’t have the user setting to only show images) it will fade into an <iframe> preview. So… we load a ton of image screenshots on CodePen.

We used to use CSS background-image for all those images, so we linked up just a single image there, and we chose something pretty large so it would look good on large and high resolution monitors. Now we’ve swapped the images out for an <img loading="lazy" srcset="" /> integration, which has many advantages.

Now, we’ll serve you more-correctly sized images depending on the browser and screen you are on. Saved bandwidth for both you and us in that you aren’t downloading (much) more image data than you need. Plus, the lazy loading means you won’t download the image at all if the image isn’t visible to you yet (like you haven’t scrolled it into view yet).

Definitely the way to go! This, combined with the fact that we’re now serving them from a global CDN, optimized, and in the best possible format per your browser, it’s been a big upgrade. We’re probably serving half or less image data on average.

We’re still poking at our whole system for generating the screenshots, which should be much better than it has been in the past, but is close to being better yet again. For example, soon all screenshots will be generated on cloud servers with GPUs, which we know to give us the best results.

The post Lazy Loading and `srcset` images in the Grid appeared first on CodePen Blog.

Lazy Loaded Prefill Embeds

CodePen’s Prefill Embeds are the perfect way to enhance documentation with live examples. With them, you keep all the code in your repo or blog post so you can easily update demos and track changes. To get started you can set everything up in a real Pen then copy out a Prefill Embed from the Embed Builder, or use the syntax to build your own!

Turning code samples into an interactive demo is cool enough, but you may not want that to happen right away. Let’s explore a way to turn code blocks into a CodePen Embed on click!

Here’s a sample copied directly from the Embed Builder.

<div class="codepen" data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="codepen" data-slug-hash="fd63b769e68be117bc6dbc2d259d002c" data-prefill='{"tags":[],"scripts":[],"stylesheets":[]}'>
  <pre data-lang="html">&lt;h1>Hello from HTML&lt;/h1></pre>
  <pre data-lang="css">html {
  background: black;
  color: white;
  text-align: center;
}

h1::after {
  content: " / CSS!";
}
</pre>
  <pre data-lang="js">document.querySelector("h1").innerHTML += " / JavaScript";
</pre></div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

Adding Click to Run

The CodePen Embed script (ei.js) automatically turns elements with the codepen class into Embeds on page load. If we take off that codepen class so we can do a trick like this to make a Click to Run button:

<div data-height="265" data-theme-id="light" data-default-tab="html,result" data-user="codepen" data-slug-hash="fd63b769e68be117bc6dbc2d259d002c" data-prefill='{"tags":[],"scripts":[],"stylesheets":[]}'>
  ...
</div>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>
<script>
// Loop over all elements with the `data-prefill` attribute
Array.from(document.querySelectorAll('[data-prefill]'), ( el ) => {
  // Create a Click to Run button
  const button = document.createElement("button");
  button.innerHTML = "Click to Run";
  button.setAttribute("class", "prefill-click-to-run");
  el.appendChild(button);

  // On click, the element will become the embed!
  button.addEventListener("click", () => {
    el.classList.add("codepen"); // Add the codepen class back.
    window.__CPEmbed(); // Trigger the CodePen embed script to run again.
  });
});
</script>

Add a few styles and you can get some nice code blocks that turn into a Embed on click:

Syntax Highlighting, Lazy Loading, and More!

We can improve the setup even more with syntax highlighting through Prism.js, hidden code blocks, and a lazy load of the CodePen Embed script to keep your pages as light as possible!

All of these techniques put together gives you a lightweight, performant way to make on-demand Prefill Embeds for your docs or blog posts! Give it a whirl and share with us how you’re using Embeds.

The post Lazy Loaded Prefill Embeds appeared first on CodePen Blog.

How To Ace Google’s Image Page Speed Recommendations With Smush

Smush has everything you need to optimize your images, as well as a handy repertoire of tools ready to help you smash PageSpeed Insights image-related recommendations.

It’s a simple way to speed up your site, without sacrificing your image quality.

With Smush you can:

  • Compress images in bulk and with one click
  • Automatically resize and rescale your images
  • Enable lazy loading so your server can concentrate on displaying content above the fold
  • Convert your image files to formats that are drastically smaller and much quicker to display.

Over a million installs and more than 50 billion images smushed.

There are four main recommendations when it comes to images, and Smush can answer all of them.

“I had no idea that my page load time was being dragged down by the images. The plugin nearly halved the time it took.” – karlcw

This guide will show you how Smush can help you get your PageSpeed Insights score into the green.

Defer Offscreen Images

You don‘t want to be wasting server resources and sacrificing page speed to load images that are halfway down your page, so deferring offscreen images makes sense for many sites.

When you install Smush, Lazy Load is one of the first features you should check out. Simply enabling it can fix the ‘defer offscreen images’ PageSpeed recommendation.

Smush’s Lazy Load feature comes with more than just an on and off button.

You can choose which image formats you want to include.

Screenshot of the media types, whocing jpeg, png, gif, svg and iframe which can all be excluded.
Maybe you want your JPEGs to Lazy Load, but not your PNGs?

As well as any post types you want to exclude.

Screenshot of the different pages you can exclude from lazy load including the front page, blog and posts.
There’s also the option to add the URL of any specific pages.

Lazy Loading is something that can easily be undone so turn it on, check your new PageSpeed Insights score, and most importantly, check the impact it has on your site.

Efficiently Encode Images

If you want a full and comprehensive guide to optimizing your images, I would recommend checking out this blog, as here, we’re purely focusing on how Smush can help you meet PageSpeed Insights audit requirements. In this section, specifically the ‘efficiently encode images’ recommendation.

Smushing your images prevents your server being clogged up with extra MBs that don’t need to be there.

You can Smush in a variety of ways, with virtually no difference in quality.

Smush on Upload

Automatic compression is on by default and is used to efficiently encode images. It’s a high impact, low-risk feature, which should be used on most sites.

Screenshot of automatic compression showing it enabled and ready to automatically compress images on upload.
You can select whether you want it to apply to all images, or exclude certain sizes.

If you don’t want Smush to automatically compress your photos, there are a few other ways you can manage this:

Bulk Smush

You can use the Bulk Smush feature to scan your site for photos which are in need of attention and smush them all at once.

 

Screenshot of bulk smush showing that there are three images in need of smushing.
Click the button and let the plugin do all the work for you.

Smush Through the Media Library

You can also head to the media library to check whether you have images available for smushing.

Screenshot of an image of a moon in the media library ready to be smushed.
You can smush individually through the media library or select images to be ignored from autosmush.

Smush Other Directories

You’re not confined to just your media uploads – you can also smush non-WordPress images outside of your uploads directory.

Screenshot of the directory smush option showing the navigati9on to the wp-content folder to search for more images.
You can easily navigate through your folders to find the images you want to Smush.

Super Smush

Super Smush is your next port of call if you want to bring your file sizes down even further.

It offers 2X the smushing power compared to the standard method, so it’s handy if you have a lot of images that are soaking up valuable resources.

Even if ensuring your images were properly encoded wasn’t one of PageSpeed Insights audit opportunities, it still makes sense to get rid of any excess bloating, as long as there is no noticeable difference to your images.

Utilize the CDN

Smush also offers a blazing-fast 45 point CDN  (Pro version only) which allows you to serve your images in next-gen formats as well as ensuring they’re delivered to your browser at breakneck speed.

Make your Images Next Gen

Next-gen image formats such as WebP and JPEG 2000/XR can bring your file size down drastically.

Serving your images in one of these formats will save you server resources, as well as meet one of PageSpeed Insights requirements.

With Smush’s CDN enabled, you can serve your images in the next-gen WebP format.

As not all browsers support WebP images, Smush does a super-quick check of the browser, and if WebP images are supported, then great – that’s what’s served to your visitor. If not, Smush can simply serve up a PNG or JPEG to make sure that no one misses out.

Properly-sized Images

Forcing the browser to resize an image before it can be displayed to the user slows down your site and lowers your PageSpeed Insight score. Part of the recommendation is to refrain from serving images that are larger than the version that will be displayed on the visitor’s screen.

Screenshot of the automatic resizing feature showing it currently turned on.
With Smush’s CDN, this is one of the easiest PageSpeed Insight recommendations to solve.

If you want to ensure you’re being completely thorough in the correct sizing of your images, read this blog to find out a few alternative tricks.

Smash PageSpeed Insights with Smush

While many users struggle to improve their web site optimization, Smush lets you boost your page loading speeds by making images easier and faster to load…and it does this all in just a few clicks!

Follow the above recommendations and put Smush to work for your site today. Also, keep an eye on our roadmap for all the exciting new features coming soon to Smush.