Performance

January 28, 2019
Featured Video Play Icon

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

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

  1. Using XnConvert  software  (download link https://www.xnview.com/en/xnconvert/#downloads)
  2. Using online converter https://image.online-convert.com/convert-to-webp
  3. 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

  • Using HTTP / 2 –  this should come with server update
  • Using rel=”noopener”     attribute with external links

Recent Posts

Newsletter File Hosting
Audio
How to request a video production for ekwa clients?
Some guides to avoid issues in projects
Enable Search Console data sharing
Standards features to be added on podcast website
Recommended Standards for ekwa marketing websites
Go Live Technical QA process