THE PENDING DRAFT

Lazy Load XT

February 16, 2015

If you work with a lot of images, performance issues can quickly add up and become pretty complicated to tackle. Lazy Loading is one popular technique how we can approach this and with Lazy Load XT there seems to be a new solution which also supports things like srcset, horizontal scrolling or video elements.

Images make up over 60% of an average page’s size, according to HTTP Archive. Images on a web page would be rendered once they are available. Without lazy loading, this could lead to a lot of data traffic that is not immediately necessary (such as images outside of the viewport) and longer waiting times.

Just recently i implemented jQuery Lazy Loading on a portfolio page and we were able to bring the pagesize down to some kilobytes (until first render) from what was around 4MB and even over 16MB on retina screens. The site was built some years ago, so srcset or <picture> elements weren’t an option and we used retina.js which was quite fast, but loads the small version and then the retina version on top. Not ideal, i know.

So, lazy loading was a great help in reducing all that, but when implementing it i struggled not only with some possible negative SEO implications (which i’m still trying to fully understand) but also it was very hard to combine retina.js with the jQuery Lazy Loading.

Lazy Load XT is a new script which uses jQuery, Zepto.js or DomTastic to deliver lazy loading functionality and it includes srcset support as well as many other of the things i missed. Also, i like the modular way it is built which let’s you choose which plugins or extensions you need and thus let you save some more kb’s from your bottom line.

Redefining Lazy Loading With Lazy Load XT

An article you should read about WP-API

February 13, 2015

Brian Krogsgard wrote this great post on Post Status about the upcoming WordPress JSON REST API. He did a great job covering all different aspects and the current state of the project as well as what we can expect from it when it finally lands in core.

If you’re going to read one post about WP-API, make it this one.

Post Status – The WordPress REST API

Measuring Responsive Breakpoint Usage

February 10, 2015

Designing websites for a modern web means dealing with a whole lot of different setups, devices and resolutions and the best way to handle this is to build things as device agnostic as possible when planning our breakpoints. Wouldn’t it be nice, if tools like Google Analytics would let us track not only devices, but also the usage of our actual breakpoints? Well, turns out that’s possible with a clever use of matchMedia(), as Philip Walton from Google explains in his article.

If your site is built on device-less principles, but its usage is measured against device-only metrics, you’re going to get a mismatch—potentially a big one.

I’m looking forward to implement and play around with this somewhere.

Measuring Your Site’s Responsive Breakpoint Usage

An Introduction to wp.media by Eric Andrew Lewis

January 14, 2015

Eric Andrew Lewis, one of the core developers behind the “new” (v3.5+) WP Media Workflow gave a talk at the WordCamp Philly about wp.media. While the video has terrible Audio quality which makes it a bit hard to understand, he gives some solid insights into how things work behind the scenes and how we can (at least somewhat) customize a Media Frame or create custom ones.

During the talk he shares a graphical representation of all the Backbone Views and Models that wp.media utilizes, which can be found here:

If you want to understand how wp.media works, you should check out Eric’s Plugin WordPress Media Javascript Guide and he also started the WordPress Media Core Developer Documentation, which i really hope he finds some time to carry on.

An Introduction to Backbone.js

January 2, 2015

After several not so successful attempts to understand Backbone.js by just staring at the code in WordPress Core that makes up the Media Uploader, i decided it is time to jump in and learn some more about it from scratch. It’s pretty overwhelming at first, especially if your JavaScript knowledge is only basic, which is one thing i’d like to change this year.

I might share some of the best tutorials and introductions i found useful along my way in a later post, but for now here’s a good short video introduction to the basics of Backbone.js by Sidney Maestre that i just found: