@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
Advertisement:
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 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
- Nginx Caching
- OpCache if you are using PHP.
- Node-cache – In memory caching.
- Redis – In memory caching.
Use the following third-party tools while developing.
These are highly recommended tools.
Siege Command Line Benchmarking tool (Read guide here)
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
Average percent of HTTPS requests (now over 50%)
Time in seconds to first meaningful paint
Average time to first interactive paint
Average time to first on load (finished)
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
(Image credit: netcraft.com)
Active Web Sites v Hostnames
(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.
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 )
Click Perform and Audit (in the Chrome Developer Tools) on the site you have loaded.
Audit in Progress
My Report
FYI: Report scores will depend on the time of day and the speed of your computer, A 55 score may be 65 or 45 the following day.
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
Google Page Speed Insights
Goto PageSpeed Insights and scan your site.
Page Speed Insights Report Results
FYI: My site is a WordPress site and I speed up the sight by.
- Moving away from a shared CPanel server
- Optimized Images in WordPress with the EWWW plugin
- Made speed improvements in WordPress
- Wordfence Security Plugin for WordPress buy also set up a WordFence firewall (slowing things down)
- etc
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
v1.2 Jan 2018 additions on Google’s mobile first approach and increasing crawl rates.
v1.1 fixed typos