Simon's Blog

Views are my own and not my employer's.

Personal Tech Blog...

Coding for fun since 1996, Learn by doing and sharing.

Buy a domain name, then create your own server (get $25 free credit)

View all of my posts.

tools

Building faster web apps with google tools and exceed user expectations

by

@jawache pointed me in the direction of twitter user @addyosmani and a talk at Chrome Dev Summit 2017 called “Fast By Default: Modern Loading Best Practices

Recently I blogged about speeding up my serves (by moving them closer to me and visitors) and Sped up WordPress by moving away from CPanel tp a  self-managed server.

Update 2018: For the best performing VM host (UpCloud) read my guide on the awesome UpCloud VM hosts (get $25 free credit by signing up here).

RAIL: Measure Performance with the RAIL Model (Fast Integrated, Reliable and Engaging)

https://developers.google.com/web/fundamentals/

  • Focus on the user
  • Initial Response under 100ms
  • Animate, produce a frame in under 10ms
  • Idle maximize idle time
  • Deliver all content in under 1000ms

Read more here: https://developers.google.com/web/fundamentals/performance/rail

Replaced with: User happiness metrics

  • First Paint
  • First content Paint
  • First Meaningful Paint
  • Time to interactive

Potential Impacts

  • Network ( See my scalability on a journey on a budget blog post)
  • CPU throttling
  • Client Heavy Frameworks (JavaScript is heavy parsing)
  • Shared hosts (Moving away from a shared host to AWS from CPanel or other shared hosts can be a good thing for performance. )
  • Network Latency
  • Size (number and file size)
  • HTTP ASync Downloads Limit (2)
  • Device Speed
  • Parsing JavaScript.
  • 3r party libraries
  • Caching (web server (NGINX caching https://www.nginx.com/blog/nginx-caching-guide/ ) or local browser cache)
  • User Limitations
  • etc

Do’s

  • Less JavaScript
  • More Caching
  • Lazy Loading ( I use the BJ Lazy Load plugin in WordPress )
  • Develop on Slow Devices/Links
  • CDN
  • DNS
  • Minify Code  ( fyi )
  • Optimize Images ( fyi )
  • Respect Visitor Data Plans/Devices (offer low data version)

Use online tools (Browser dev audit tools) to measure performance metrics.

Consider in-memory caching solutions

Use the following third-party tools while developing.

These are highly recommended tools.

Siege Command Line Benchmarking tool (Read guide here)

https://calibreapp.com/

https://speedcurve.com/

https://github.com/siddharthkp/bundlesize

http://loader.io/ – External Benchmarker

State of the Web:

Use http://beta.httparchive.org/ to see the average website stats and trends, is your site average or abusing the code type/size you push?

Sample httparchive.org Reports:

Average TCP Connection Per Page

The average percent of HTTPS requests (now over 50%)

Time in seconds to first meaningful paint

1st paint

Average time to first interactive paint

1st Interactic paint

Average time to first on load (finished)

On Load

Netcraft: October 2017 Web Server Survey:

https://news.netcraft.com/archives/2017/10/26/october-2017-web-server-survey-13.html

Web Server Technology Share

Web Server Share

(Image credit: netcraft.com)

Active Web Sites v Hostnames

Active Sites

(Image credit: netcraft.com)

State of Desktops (Gamers Survey)

Steam conducts a monthly survey to collect data about what kinds of computer hardware and software our customers are using. Participation in the survey is optional, and anonymous via the steam app.

Steam HW Scale

This gives a rough (biased) breakdown of high-end machines (gamers) but does reveal valid stats on installed memory and product share.

http://store.steampowered.com/hwsurvey

Don’t forget to track the visitors (location, time, devices, speed, gender etc.) to your site with Google Analytics https://support.google.com/sites/answer/97459?hl=en

Google Progressive Web APP LightHouse Site Audit (Chrome Dev Tools)

You can now run Audits in the Chrome DevTools. To run a report (Read More: https://developers.google.com/web/tools/lighthouse/#devtools )

Chrome Dev Tools

Click Perform and Audit (in the Chrome Developer Tools) on the site you have loaded.

Perform and Audit

Audit in Progress

Audit in Progress

My Report

FYI: Report scores will depend on the time of day and the speed of your computer, A  55 score maybe 65 or 45 the following day.

PWA Score

Read the Progressive Web App Check List to help understand how to boost your score.

https://developers.google.com/web/progressive-web-apps/checklist

Google Mobile-Friendly Check List

Also, run the mobile-friendly tesh over your site here.

https://search.google.com/test/mobile-friendly

Mobile Friendly

Google Page Speed Insights

Goto PageSpeed Insights and scan your site.

Page Speed Insights

Scanning

Page Speed Insights Report Results

page Insights Results

FYI: My site is a WordPress site and I speed up the sight by.

The next thing I want to try is (Sponsors needed).

  • Setting up self-managed Sub Domain CDN’s (https://img01cdn.fearby.com, https://img02cdn.feearby.com etc). – See Vultr and Digital Ocean Ubuntu Server setup guides.
  • Third Party CDN’s.
  • DNS optimizations.
  • Setup NGINX Caching.

Google User Experience Report (Advanced):

The Google User Experience Report (SQL like query and reporting system) is a public dataset of key user experience metrics for top origins on the web. All performance data included in the report is from real-world conditions, aggregated from Chrome users who have opted-in to syncing their browsing history and have usage statistic reporting enabled ( https://www.google.com/chrome/browser/privacy/whitepaper.html#usagestats ) .(end snip from  https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html )

Getting started with Chrome User Experience Report Tool: https://developers.google.com/web/tools/chrome-user-experience-report/getting-started
Chrome User Experience Report Tool will allow you to query datasets on page load times.

Why

Better able to compete and deliver measurable advantages to your customers.

Conclusion

  • Know data – MOM (Measure, Optimise and Monitor).
  • Improve over time or before launch.
  • Set budgets on file sizes and page times.
  • Develop on slow devices/links.
  • Consider using PageSpeed Module on your server https://developers.google.com/speed/pagespeed/module/
  • Consider using the RPRL Pattern (https://developers.google.com/web/fundamentals/performance/prpl-pattern/ ) to split and cache code to speed up the time to interactivity.
  • Scale up or out?
  • Enabling web server caching (NGINX: https://www.nginx.com/blog/nginx-caching-guide/

Still Reading?

View more Google Dev Summit 2017 talks: https://www.youtube.com/playlist?list=PLNYkxOF6rcICUD5nBfRdAR6Fveosnqa5m

Also read: Can You Afford It?: Real-world Web Performance Budgets: https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

Still Reading:

Check out Googles HTTPS Transparency Report https://transparencyreport.google.com/https/overview

Read the introduction blog at Chromium Blog https://blog.chromium.org/2017/10/introducing-chrome-user-experience-report.html

Bookmark https://blog.chromium.org/

Update Jan 2018

Google begins mobile-first indexing of sites to improve mobile search results

What Crawl Budget Means for Googlebot

More to come.

Donate and make this blog better


Ask a question or recommend an article
[contact-form-7 id=”30″ title=”Ask a Question”]

v1.2 Jan 2018 additions on Google’s mobile first approach and increasing crawl rates.

v1.1 fixed typos