Off Screen Images
Since Images Below the fold also part of initial page load we can lazy load images below the fold
Recommended Method
Using Intersection Observer with pollyfill (to support older browsers)
Please check following
Read More
Serve images in next-gen format
Webp Images
Since Images Below the fold also part of initial page load we can lazy load images below the fold
Recommended Method https://developers.google.com/web/tools/lighthouse/audits/offscreen-images
Using Intersection Observer with pollyfill (to support older browsers)
Please check following
1 Simple Image https://codeshare.io/Gk3DoM
2 Picture element with Responsive Images https://codeshare.io/5Q7rv7
Read more https://github.com/ApoorvSaxena/lozad.js
https://github.com/ApoorvSaxena/lozad.js
Serve Images in Next-Gen format
Webp Images
Ways to save / Convert images in webp
- Using XnConvert software (download link https://www.xnview.com/en/xnconvert/#downloads)
- Using online converter https://image.online-convert.com/convert-to-webp
- With photoshop using following plugin http://telegraphics.com.au/sw/product/WebPFormat#webpformat
For Images :
Using picture tag
Need to specify Nextgen Image for mat and fallback image for not supported browsers Even Though there are 2 references it wouldn’t create 2 Requests
For Backgrounds :
Using modernizr script to Detect browser support
https://codeshare.io/5RyrMV (better to inline the script in the header to avoid render blocking javascripts)
With modernizer it adds webp class to the body tag when the browser supports for webp and no-webp class when it doesn’t
Using this class we can specify alternative images
Ex: for header tag background
Header{ Background: url(header.webp); } .no-webp header{ Background: url(header.jpg); }
Properly size Images
Background Images
Using media Queries in css for various view port size can set properly sized images as background
For example
If there’s background for body with 1200px width, for devices below 768px , 480 we can define much smaller background in some cases even can go for background color for mobile instead of using background images
Using Sprites to Combine multiple background images into a one
Using picture tag to provide browser with different size images for each view port sizes
Ex:
<picture> <source media="(min-width: 650px)" srcset="img_pink_flowers.jpg"> <source media="(min-width: 465px)" srcset="img_white_flower.jpg"> <img src=img_orange_flowers.jpg alt="Flowers" style="width:auto;"> </picture>
Optimizing Images
A web service that can used
https://tinyjpg.com/Unused CSS Rules
Generally we include all the css files that comes with plugins which sometimes hardly even used in entire site
For example : we generally use treeview plugin for site map or 404 page
These kind of css and javascript files we can load depending on the need
also with bootstrap framework comes tons of css rule which hardly be used in our sites when removed all of unused css (by customizing from bootstrap site) we can reduce the bootstrap css file size to 29kb from 200 odd size
Bootstrap styles / Javascript also like external plugins can can be loaded into the site depending on the need
(I have added conditional statement into the theme to load css / js file depending on the page’s requirement ex: if there’s a carousel loading carousel for that specific page only)
Turning to Mobile First Design
As we get approved design for the desktop all this time we have been used to do desktop first design now with mobile speed having greater importance especially to deliver critical rendering above the fold css first. we need to start doing mobile first design when we convert a PSD to wordpress
Font rendering
With optimizing images, using responsive images <picture> tag and nextgen images formats we took care of the images. Same as images embedded font also take quite a while to load.
With mobile first design we can use web-safe font
https://www.w3schools.com/cssref/css_websafe_fonts.asp for mobile and with media queries we can load embedded font for desktop onlyKeep Server Response Time Low
Generally in wordpress takes about 1 – 2 seconds for the server to respond to address this issue we can simply cache all the pages with one of following plugins and server them as HTML pages
- WP Fastest Cache
- W3 Total Cache
- WP Super Cache
Progressive Web App
With “ Super Progressive Web Apps” we can add behavior of progressive web app to wordpress site
Need to specify Splash Screen Icon, theme colors, offline page etc.. from the dashboard
Accessibility
Generally we check accessibility of our sites with http://wave.webaim.org/ with google lighthouse in addition check
- If there’re title tags for iframes
- HTML elements are well structured (ex: ID attribute should be unique )
- Background foreground color if there’s sufficient contrast (we might not have control over this as we get an approved design)
Best Practices
- Using HTTP / 2 – this should come with server update
- Using rel=”noopener” attribute with external links