State of Web:

Making the Web AFIRE.

Toni-Jan Keith Monserrat

Google Developer Group Philippines Community Manager
Google Developer Expert on the Web
Assistant Professor
University of the Philippines Los Baños

10 (10)
http://bit.ly/tjmonsi-state-of-web-ioextended

20 (5)
Web
21 (5)
 Web
We need it to be Accessible, Fast, Integrated, Reliable, and
Engaging

30 (5)
 AFIRE
Accessible, Fast, Integrated, Reliable, and Engaging

40 (5)
Reasons

45 (3)
Mobile Usage

47 (2)
 34.44%
Expected number of smartphone users in the Philippines as
of 2018

https://www.statista.com/statistics/467186/forecast-of-smartphone-users-in-the-philippines/

1:00 (5)
 8 in 10
People would stop engaging if site doesn’t show well on
their device

https://www.ironpaper.com/webintel/articles/web-design-statistics-2017/

1:05 (5)
1:15 (3)
Internet Speed

1:20 (5)
https://twitter.com/tjmonsi/status/930969251007029248?ref_src=twsrc%5Etfw&ref_url=https%3A%2F%2Fcodeburst.io%2Fmedia
%2Fce14f308c51cc08a7bda8ffa1273ae66%3FpostId%3Dbcc1452a8c6a
1:45 (10)
1:50 (5)
1:55 (5)
 80%
Percentage of Philippine mobile users that subscribed to
lower tiered speed (about 1 - 3 Mbps)

https://www.rappler.com/brandrap/profile-internet-users-ph

2:10 (5)
 3.4 sec
Transmit a 170 KB gzipped JS file through a 3G network

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization

2:15 (5)
 20%
Bounce rate on 3.3 seconds wait time

https://www.ironpaper.com/webintel/articles/web-design-statistics-2017/

2:20 (5)
Mobile Phone Speed

2:37 (2)
82.47%
Android users in Philippines

http://gs.statcounter.com/os-market-share/mobile/philippines/2016

2:50 (5)
https://www.appbrain.com/stats/top-android-phones-tablets-by-country?country=ph

3:00 (10)
 2 GB
Max RAM space of top 3 Android phones used in the
Philippines

https://www.gsmarena.com/vivo_y53-8775.php, https://www.gsmarena.com/oppo_a37-8162.php, https://www.gsmarena.com/samsung_galaxy_j7-

7185.php

3:05 (5)
 2 sec
To parse a 170KB gzipped JS file based on the processor
used by the top 3 used phones in the Philippines

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization

3:10 (5)
 1.5 sec
To execute a 170KB gzipped JS file after parsing based on
the processor used by the top 3 used phones in the
Philippines

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization

3:15 (5)
 7 sec
To load, parse, execute a 170KB gzipped JS file after
parsing based on the processor used by the top 3 used
phones in the Philippines on a normal 3G internet
connection speed in the Philippines

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/javascript-startup-optimization

3:25 (5)
Site complexity

3:30 (3)
https://www.soasta.com/blog/page-bloat-average-web-page-2-mb/
3:40 (10)
 351 KB
Average Javascript size transferred over the wire from all
websites in 1 year

https://httparchive.org/reports/page-weight#bytesJs
 19
Average number of requests per site visit from all websites
for 1 year

https://httparchive.org/reports/page-weight#bytesJs
Security

3:55 (3)
 32%
Of all website visits using Chrome and in Windows are still
in HTTP

https://security.googleblog.com/2018/02/a-secure-web-is-here-to-stay.html

4:00 (5)
 76.6%
Uses at least one vulnerable Javascript library

https://snyk.io/blog/77-percent-of-sites-use-vulnerable-js-libraries/

4:05 (5)
 79.4%
Of the 77% of sites uses jQuery 1.x, a vulnerable library to
Cross Site Scripting Attacks

https://snyk.io/blog/77-percent-of-sites-use-vulnerable-js-libraries/

4:10 (5)
Accessibility

4:15 (3)
 70%
Increase of Mobile screen reader usage worldwide from
2009 to 2014

https://webaim.org/projects/screenreadersurvey5/

4:20 (5)
Meeting the user needs

4:30 (5)
4:55 (15)
5:00 (5)
But...
5:02 (2)
 But...
We actually only need to know these...

5:05 (3)
5:07 (2)
5:09 (2)
5:11 (2)
5:13 (2)
5:20 (7)
 UX
Delivering the best user experience to your clients...

5:30 (10)
Best Practices in
Developing a Website

5:35 (5)
Making it Accessible

5:40 (5)
Accessible

Proper HTML Usage

5:45 (5)
 Accessible

Proper HTML Usage

<header></header>
<main role=”main”></main>
<aside></aside>
<footer></footer>

5:47 (2)
 Accessible

Proper HTML Usage

<blockquote></blockquote>
<q></q>
<em></em>
<strong></strong>
<figure></figure>
<figcaption></figcaption>
<picture></picture>

5:49 (2)
 Accessible

Proper HTML Usage

<table></table>
<caption></caption>
<thead></thead>
<tbody></tbody>
<tfoot></tfoot>
<tr></tr>
<th></th>
<td></td>

5:57 (2)
 Accessible

Proper HTML Usage

<form></form>
<input>
<label>
<button></select>
<select></select>
<option></option>
<optgroup></optgroup>

6:00 (3)
 Accessible

Proper HTML Usage

Rule of thumb:
- If it means a certain tag, use it
- Use div only when you want to group a
set of items without meaning
- Use span sparingly…
- Don’t misuse the tags

https://developers.google.com/web/fundamentals/accessibility/semantics-builtin/

6:05 (5)
Accessible

Think Design Responsive

6:10 (3)
 Accessible

Think Design Responsive

<meta
name="viewport"
content="
width = device-width,
minimum-scale = 1.0,
initial-scale = 1.0,
maximum-scale = 5.0,
user-scalable = yes,
shrink-to-fit = no
">

6:12 (2)
 Accessible

Think Design Responsive

@media screen and (max-width: xxxx) {

...
}

6:15 (3)
 Accessible

Think Design Responsive

6:17 (2)
 Accessible

Think Design Responsive

http://bit.ly/tjmonsi-html-back-to-basics

6:20 (3)
Making it Fast

6:22 (2)
Fast

Only Load What You Need

6:25 (3)
 Fast

Only Load What You Need

6:30 (5)
 Fast

Only Load What You Need

6:35 (5)
 Fast

Only Load What You Need

Rule of thumb:
- Do an inventory of critical assets
- Don’t use CSS frameworks out of the box (like
Bootstrap, or Foundation) on Production
- Understand Frameworks you use so that you
only load what you need
- Code split of the win

6:40 (5)
Fast

Limit Requests, Think Small

6:47 (2)
 Fast

Limit Requests, Think Small

Bundling is still recommended for needed

JS to run the site

6:52 (5)
 Fast

Limit Requests, Think Small

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/eliminate-downloads

6:50 (3)
 Fast

Limit Requests, Think Small

Rule of thumb:
- HTML
- 1 Core JS (and if SPA, page JS)
- Worker JS (optional)
- Render content

https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/eliminate-downloads

6:55 (5)
 Fast

Limit Requests, Think Small

Rule of thumb
- Minify HTML, CSS, JS
- For rasterized images
- Use Webp with fallback to JPG
- Use JPG with JPG2000 compression
- For layered images
- Use SVG
- Minimize use of GIFs and PNG
- Gzip all assets when transfering

7:07 (10)
Fast

Don’t Block the Rendering

7:12 (2)
 Fast

Don’t Block the Rendering

7:15 (3)
 Fast

Don’t Block the Rendering

Rule of thumb:
- Show the Damn Content Quickly!!!

7:45 (5)
Fast

Make It React Quickly

7:47 (2)
 Fast

Make It React Quickly

https://medium.com/dev-channel/the-cost-of-javascript-84009f51e99e

7:52 (5)
 Fast

Make It React Quickly

https://infrequently.org/2017/10/can-you-afford-it-real-world-web-performance-budgets/

8:00 (8)
 Fast

Make It React Quickly

Rule of thumb:
- Allow the system to interact with the
user ASAP!!!

8:05 (5)
Fast

Keep the Main Thread Free

8:07 (2)
 Fast

Keep the Main Thread Free

JS engine is a single-threaded engine...

8:10 (3)
 Fast

Keep the Main Thread Free

8:12 (2)
 Fast

Keep the Main Thread Free

8:25 (2)
 Fast

Keep the Main Thread Free

8:30 (3)
 Fast

Keep the Main Thread Free

Rule of thumb:
- Function calls should be less than 6 ms
(for the win)
- If not less than 12ms

8:35 (5)
Fast

Use Web Workers

8:37 (2)
 Fast

Use Web Workers

Web workers allow “multi-threaded”

computations on browser

8:40 (3)
 Fast

Use Web Workers

Rule of thumb
- Use main thread for DOM
manipulation and UI executions
- Use web worker for other things

8:45 (5)
Fast

Use CSS Animations

8:47 (2)
 Fast

Use CSS Animations

8:50 (3)
 Fast

Use CSS Animations

You can get a lot more examples from:

https://daneden.github.io/animate.css/

8:55 (3)
 Fast

Use CSS Animations

You can get to learn more:

http://rachelnabors.com/css-animations-cou
rse/

8:57 (2)
Fast

PRPL Pattern

9:15 (3)
 Fast

PRPL Pattern

9:25 (10)
 Fast

PRPL Pattern

9:30 (3)
Making it
Integrated

9:32 (2)
 Integrated

Integrated

Create a Manifest

9:35 (3)
 Integrated

Create a Manifest
{
"name":"Name of Site",
"short_name":"Short name",
"start_url":"/",
"background_color":"#5b73fd",
"display":"standalone",
"orientation":"any",
"scope":"/",
"theme_color":"#5b73fd",
"icons": [...]
}

9:40 (5)
 Integrated

Create a Manifest

9:42 (2)
Making it Reliable

9:45 (3)
 Reliable

Reliable

Use HTTPS

9:47 (2)
 Reliable

Use HTTPS

Seriously… encrypt what you send and

receive. Even if it is a brochure site...

9:52 (5)
 Reliable

Use HTTPS

9:57 (5)
 Reliable

Use HTTPS

10:02 (5)
 Reliable

Use HTTPS

Let’s encrypt:

https://letsencrypt.org/

10:07 (5)
 Reliable

Use HTTPS

Rule of Thumb
- Use hosting sites that already give
HTTPS by default
- Use Let’s encrypt and open port 443

10:12 (5)
 Reliable

Reliable

Allow Offline Experience

10:15 (3)
 Reliable

Allow Offline Experience

10:17 (2)
 Reliable

Allow Offline Experience

Learn how to create a proxy network server

using service-worker

10:20 (3)
 Reliable

Allow Offline Experience

You can also use out of the box packagers

like:

https://workboxjs.org

10:25 (5)
 Reliable

Allow Offline Experience

Read the offline cookbook for great tutorial

on how to use:

https://jakearchibald.com/2014/offline-coo
kbook/

10:30 (5)
 Reliable

Allow Offline Experience

Rule of thumb:
- Static assets: precache
- Assets from other sites: networkFirst

10:35 (5)
 Reliable

Reliable

Progressively Enhance Site

10:37 (2)
 Reliable

Progressively Enhance Site

Not all browsers are equal

10:30 (3)
 Reliable

Progressively Enhance Site

10:35 (5)
 Reliable

Progressively Enhance Site

Make a beautiful experience already

available for the user (hopefully even
without JS)

10:40 (5)
 Reliable

Progressively Enhance Site

Use Modernizr to detect browser

capabilities…

https://modernizr.com/

10:42 (2)
 Reliable

Progressively Enhance Site

Use polyfills to enable older sites

http://bit.ly/polyfill-list

10:45 (3)
Making it Engaging

10:47 (2)
Engaging

AMP it up

10:50 (3)
 Engaging

AMP it up

10:55 (5)
 Engaging

AMP it up

11:00 (5)
 Engaging

AMP it up

Rule of thumb
- Use AMP if you are dynamically
creating and serving static content
- Don’t use AMP if you need JS to run to
show content (like Single Page
Applications)

11:15 (5)
 Engaging

Engaging

Web Components

11:17 (2)
 Engaging

Web Components

Create Lightweight reusable components

with customizable tags
 Integrated

Web Components

<image-carousel>
<img>
<img>
<img>
</image-carousel>

9:40 (5)
 Integrated

Web Components

9:40 (5)
 Engaging

Web Components
 Engaging

Web Components

Join us at the codelabs in the

afternoon at the Introduction to
Polymer to know more….
 Engaging

Engaging

Web Standard API

11:45 (3)
 Engaging

Web Standard API

Geolocation API
 Engaging

Web Standard API

Payment API
 Engaging

Web Standard API

Media Capture and Streaming API
 Engaging

Web Standard API

Web Push Notifications API
Tools of the Trade:
Making sure your site
is in tip-top shape

12:27 (2)
Chrome Dev Tools

12:30 (3)
12:35 (5)
Network Tab

12:37 (2)
Performance Tab
Coverage Tab
Source Tab
Element Tab
Security Tab
Application Tab
Audits Tab
Webpagetest.org
Saucelabs
Test My Site

https://testmysite.thinkwithgoogle.com/
In Practice
http://bit.ly/ioextended-ph-73
http://bit.ly/ioextended-100
http://bit.ly/ioextended-ph-w
ebpage-test
Inspiration

http://bit.ly/devfest-ph-201
7-medium
Inspiration

http://bit.ly/element-lite
Element-lite
SPA-lite
Recap
Web
 Web
We need it to be Accessible, Fast, Integrated, Reliable, and
Engaging
State of Web:
Making the Web AFIRE.

Toni-Jan Keith Monserrat

Google Developer Group Philippines Community Manager
Google Developer Expert on the Web
Assistant Professor
University of the Philippines Los Baños
Update Subscription:
http://bit.ly/tjmonsi-subscribe-form

@tjmonsi tjkpmonserrat tjmonsi @tjmonsi tjmonsi

Toni-Jan Keith Monserrat

Google Developer Group Philippines Community Manager
Google Developer Expert on the Web
Assistant Professor
University of the Philippines Los Baños