lazysizes

I recently did some optimizations on my personal website to make the images load “lazily.” In other words it only loads stuff once it hits the viewport. I think that’s what you’re looking for. I tried two techniques: 1. There is an HTML attribute to do just this and it seems to work for iframes too: https://developer.mozilla.org/en-US/docs/Web/Performance/Laz... 2. There is a simple library called “lazy sizes” (https://github.com/aFarkas/lazysizes) I tried to avoid the lib and use the native HTML… but for whatever reason the lib worked more reliably/effectively in manual tests as well as in my benchmarking via PageSpeed / Lighthouse. YMMV!

I've seen these these two user-agents from FB IPs, maybe others: Mozilla/5.0 (iPhone; CPU iPhone OS 7_1_2 like Mac OS X) AppleWebKit/537.51.2 (KHTML, like Gecko) Version/7.0 Mobile/11D257 Safari/9537.53 Mozilla/5.0 (iPhone; CPU iPhone OS 13_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/13.1.1 Mobile/15E148 Safari/604.1 Which also execute javascript in some modified sandbox or something, causing errors, and executing error handlers. Interesting attempt to analyze the crawler here: https://github.com/aFarkas/lazysizes/issues/520#issuecomment...

Ironic indeed, but then the blog itself doesn't use React, the slowdown most likely comes from some utility library[1]. The advice in the article may not be discredited, but this shows that learning basic profiling should come before obsessing over framework-specific optimizations. [1]: https://github.com/aFarkas/lazysizes

All links in above txt: 1. The repo for the boilerplate is: https://github.com/MozaikAgency/wp-theme-bootstrap 2. The helper mentioned: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/mast... 3. Code demoing how the helper would be used: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/ccdf... 4. Resp images polyfill - PictureFill: https://github.com/scottjehl/picturefill 5. lazy-loading content js lib - lazySizes: https://github.com/aFarkas/lazysizes 6. object-fit polyfill - Object-fit: https://github.com/anselmh/object-fit 7. Vote for object-fit to be included in IE: https://wpdev.uservoice.com/forums/257854-microsoft-edge-dev...

The repo for the boilerplate is: https://github.com/MozaikAgency/wp-theme-bootstrap The helper mentioned below: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/master/theme/library/class… Code demoing how the helper would be used: https://github.com/MozaikAgency/wp-theme-bootstrap/blob/ccdfb983676a94b5ff74e9ad43… Apart from the core feature of the theme starter, which is the robust build process, the theme boilerplate also comes with a small but growing library of helper classes for developing modern themes with WordPress. The latest addition to this library is a small responsive images/background-images class which leverages the responsive images spec (polyfilled via picturefill (https://github.com/scottjehl/picturefill)) and the WordPress custom media sizes to make it a little easier to implemen