Performance

January 28, 2019

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

1. Simple Image
2 Picture element with Responsive Images

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

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

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

https://codeshare.io/Gk3DWV

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 only

Keep 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