# Web : Generic good practices
Web Fundamentals : developers.google.com
Les check-lists des professionnels du Web : opquast.com
checklits qualité, référencement, accessibilité, performances, ergonomie, ...
The Cost Of JavaScript - Addy Osmani medium blog - 20171115
tl;dr: less code = less parse/compile + less transfer + less to decompress
# websites perfs KPIs
- online tools
PageSpeed Insights : developers.google.com
- speed index
Paul Irish: Day 2 Keynote - Delivering The Goods In Under 1000ms - 2014
- Time To First Byte
Delay between the first HTTP request from the web browser and the reception of the first byte of the web page by the browser.
- Total Weight
Measures the total weigth of the page, with all resources loaded.
This will be measured for a first access, without cache, and without scrolling down to the bottom of the page (images below the fold using lazy loading will thus not be downloaded and taken into account in the page weight).
- Start Render
Delay between the first request from the web browser and the first diplay on the user's screen (the web page is not totally white anymore).
The Start Render indicates the moment when the first element is painted in the user viewport. It is computed thanks to filmstrip video analysis.
This metric is really interesting in terms of UX, since it represents the moment when the user is not facing a white page anymore.
This does not mean the user is seeing something meaningfull though (the first rendered element can be a backgroud color or a decorative visual element).
- DOM Interactive
The browser has finished to parse the HTML code. The DOM construction is complete.
- DOM Content Loaded
The DOMContentLoaded event is fired when the DOM and CSSOM trees have been built, without waiting for images and subframes to load.
Synchronous scripts – and those with a defer attribute – have been executed.
- Visually complete
Delay between the first request from the web browser and the complete and final render of the above the fold part of the page (the part of the page visible without the user needing to scroll is loaded and displayed).
The final visual state of the page is captured after the end of network trafic.
The video analysis allows then to determine the moment this final visual state has been reached (most of the time it is way before the end of the network trafic).
- Fully loaded
The web page is fully loaded, all the resources are fetched, parsed and executed.
All the metrics above are time related metrics and refer to a specific moment on the filmstrip.
Google even promotes more time based metrics, rather UX oriented, to measure when and how the page is loaded.
# websites payload size
- 2011 : 900 kb
- 2017 : 3 mo
Images are more then 50% of the payload size. Text assets that can compress well represent around 10% of the payload size.
1995 : 14 kb
nov 2011 : 0.9 mo
may 2012 : 1.1 mo
nov 2012 : 1.2 mo
may 2013 : 1.45 mo
nov 2013 : 1.6 mo
may 2014 : 1.7 mo
nov 2014 : 1.8 mo
may 2015 : 2 mo
What is the recommended JS kb limit for a web app? - stackoverflow.com - 2011
500 kb (in 2011 ...)
Sizes of JS frameworks, just minified + minified and gzipped
# dealing with assets
Recommended size of JavaScript assets on a web page - stackoverflow.com - 20150504
Two Quick Ways To Reduce React App’s Size In Production - medium.com/@rajaraodv - 20161130
# compression
N.B. : Google Chrome Tools shows compressed values in network panel.
Enable gzip compression - varvy.com - 2016
# accessibility (a11y)
What is Accessibility (a11y) - www.techopedia.com
The word accessibility is abbreviated to "a11y," with the number eleven in the middle referring to the number of letters that the word contains between the first and last letter. It follows an Information and Communications Technology (ICT)-oriented convention, just like internationalization (i18n) and localization (l10n), which are used mostly in the software community.
Accessible Rich Internet Applications (WAI-ARIA) 1.1 - www.w3.org - 20171214
landmarks example - www.w3.org - 20171214
How to Use ARIA Effectively with HTML5 - www.sitepoint.com - 20160211
The A11Y Project A community-driven effort to make web accessibility easier.
# Progressives webapps
Progressive Web Apps : developers.google.com
Progressive Web Apps are user experiences that have the reach of the web, and are:
- Reliable - Load instantly and never show the downasaur, even in uncertain network conditions.
- Fast - Respond quickly to user interactions with silky smooth animations and no janky scrolling.
- Engaging - Feel like a natural app on the device, with an immersive user experience.
This new level of quality allows Progressive Web Apps to earn a place on the user's home screen.
Bien comprendre les Progressive Web Apps : makina-corpus.com
workbox - JavaScript Libraries for Progressive Web Apps
Auditing, performance metrics, and best practices for Progressive Web Apps
Hacker News readers as Progressive Web Apps
HNPWA - Hacker News readers as Progressive Web Apps
TodoMVC has helped thousands of developers select an MV* framework for their JavaScript applications. However, the web ecosystem has evolved in the past few years allowing us to build powerful applications using modern browser capabilities.
To provide developers with examples, we collected a list of Hacker News clients built with a number of popular JavaScript frameworks and libraries. Each implementation is a complete Progressive Web App that utilizes different progressive technologies to provide a fast, reliable and engaging experience.
# articles
Progressive Web Apps: Escaping Tabs Without Losing Our Soul : Alex Russell
Article fondateur, pose les bases des PWA
Que sont les Progressive Web Apps ? : frank.taillandier.me
L’argumentaire commercial pour les Progressive Web Apps : frank.taillandier.me
# vidéos
BDX I/O 2016 : Progressive Web Apps - Le futur du Web arrive... : Hubert Sablonnière
# PWA - 10 caractéristiques
- linkable (ne dépend pas d'un store, monde ouvert (web) vs monde fermé (stores))
- responsive (content is like water)
- safe (https, impossible à savoir sur une app native)
- connectivity independant (mode déconnecté) (penser offline first) (service workers)
- fresh (toujours up to date)
- App-like interactions (ergo app natives) (application shell qui comporte les bases du layout d'un app native)
- Notifications (même navigateur fermé)
- Discoverable (fichier de manifeste référencé dans le html pour référencement via moteur de recherche)
- "Installable" (ajout du lien sur l'écran d'accueil)
- Progressive (adapté aux capacités du navigateur)
# service workers
- proxy côté client codé en JavaScript, intercepte toutes les requêtes, dispose de son propre cache.
- ne fonctionne qu'en https
- commun à une origine (domaine + port)
- nouvelle API navigateur, est exécuté dans un thread indépendant, n'a pas accès à
window - utilise cache (nouvelle API navigateur), c'est une map qui fait correspondre des req et res (!= cache http)
- nouvelle API de requête (fetch)
Support des navigateurs actuels presque 100%. Microsoft & Apple à la bourre (en dev). Pas de polyfills possibles.