2 parts of talking at Google Developer Summit 2016 Seoul - How to optimize loading performance your web app - Introducing to Service Worker & Offline 101

1. Instant and Offline Apps
with Service Worker

2. Proprietary + Confidential
Changwook Doh
@cwdoh
SKPlanet

3. Instant Loading

4. Done.

5. Proprietary + Confidential
End

6. Instant Loading*

7. Asset delivery
…fast

8. “Every step you
make a user
perform before they
get value out of
your app will cost
you 20% of users”
http://blog.gaborcselle.com/2012/10/every-step-costs-you-20-of-users.html

9. Performance
= Money

10. Goals

11. Goals
1. Don’t be big

12. Goals
1. Don’t be big
2. Only download
what you need

13. Goals
1. Don’t be big
2. Only download
what you need
3. Only download
what changed

14. Best
Practices

15. ! Compression
! Smaller images
○ Multi-sized images
○ Multi-format images
! Reduce Round Trips
○ Redirects
○ Preconnect/Prefetch
! Be interactive
○ async/defer scripts
○ Lazy-load CSS
○ Regioning CSS
○ Defer iFrames
! Good caching
○ Cache forever or not at all
○ Hash in names
! CDNs
! HTTP/2

16. Compression

17. goo.gl/hPLUqB
Library Size Compressed size Compression ratio
jquery-1.11.0.js 276 KB 82 KB 70%
jquery-1.11.0.min.js 94 KB 33 KB 65%
angular-1.2.15.js 729 KB 182 KB 75%
angular-1.2.15.min.js 101 KB 37 KB 63%
bootstrap-3.1.1.css 118 KB 18 KB 85%
bootstrap-3.1.1.min.css 98 KB 17 KB 83%
minification & gzip

18. goo.gl/631F31
30% over JPEG
25% over PNG

20. <picture>
<source srcset="washing.webp">
<source srcset="washing.jpg">
<img src="washing.jpg">
</picture>

21. <img sizes="(max-width: 30em) 100vw,
(max-width: 50em) 50vw,
calc(33vw - 100px)"
srcset="swing-200.jpg 200w,
swing-400.jpg 400w,
swing-800.jpg 800w,
swing-1600.jpg 1600w"
src="swing-400.jpg" alt="Kettlebell Swing">
goo.gl/Aev18k

22. Round Trips
+50ms @WiFi
+75ms @LTE
+500ms @3G
+2500ms @2G

23. Round Trips
100 reqs/site
6 connections
> 833 ms spent in RTT @WiFi

24. <link rel="dns-prefetch"
href="https://example.com/">
<link rel="preconnect"
href="https://example.com/">
<link rel="preload"
href="https://example.com/footer.jpg"
as="image">
<link rel="prefetch"
href="https://example.com/next-page.html"
as="html">
goo.gl/Aev18k

25. Be interactive

27. <script async defer …>

28. CSS?

29. CSS?
github.com/filamentgroup/
loadCSS

30. Regioning/Critical
…then Rest

31. https://aerotwist.com/blog/guitar-tuner/

32. Defer iFrames
<iframe data-src="https://example.com"></iframe>
<iframe data-src="https://another.example.com"></iframe>
<script>
document.addEventListener('load', () => {
Array.from(document.querySelectorAll('iframe'))
.forEach(iframe => iframe.src = iframe.dataset.src);
});
</script>

40. github.com/GoogleChrome/simplehttp2server

41. Offline

42. Web is a thing like a magic carpet

43. Your Page
You CAN’T FLY without your page.

45. Lie-Fi

47. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Service Worker

48. Service Worker fundamentally changes how browser works
! Run a script separate from the page itself
! Run the script even without the page open
! Capture network requests from the page

49. Service Worker Lifecycle

50. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Browser Network

51. Registering a Service Worker
navigator.serviceWorker.register('/sw.js');

52. Registering a Service Worker
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/sw.js');
}

53. console.log('Hello');
sw.js

54. DevTools for Service Worker
DevTools > Resources > Service Workers
Check "Update on reload"
Proprietary + Confidential

55. self.addEventListener('fetch', event => {
debugger;
});
sw.js

56. sw.js
self.addEventListener('fetch', event => {
event.respondWith(
new Response('Hello Seoul')
);
});

57. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
No network requests
Browser Service Worker Network

58. fetch()
fetch('/', {
method: 'POST',
body: data
}).then(res => {
return res.json();
}).then(result => {
return result;
}, err => {
console.error(err);
});

59. sw.js
self.addEventListener('fetch', event => {
event.respondWith(
fetch(event.request)
);
});

60. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Delegating network requests
Browser Service Worker Network

61. Use cases
! Custom 404 page if not found
! Responsive resource loader
! Cache response and respond without network request

62. Proprietary + ConfidentialProprietary + Confidential
Proprietary + Confidential
Caching resources

63. CACHE MANIFEST
# 2010-06-18:v2
# Explicitly cached 'master entries'.
CACHE:
/favicon.ico
index.html
stylesheet.css
images/logo.png
scripts/main.js
# Resources that require the user to be online.
NETWORK:
login.php
Application Cache

64. cache
self.addEventListener('install', event => {
event.waitUntil(
caches.open('precache-v1')
.then(cache => cache.addAll([
'index.html',
'style.css'
]))
);
});

65. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Caching resources
Browser Service Worker Network

66. Respond with cache
self.addEventListener('fetch', event => {
event.respondWith(
caches.match(event.request)
.then(response => response || fetch(event.request))
);
});

67. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
sw-precache

68. ! Declaratively write list of resources you want to pre-cache (like AppCache).
! Build with gulp or Grunt to generate a SW file.
! Versioning is automatically taken care of.
sw-precache

69. sw-precache in gulp
gulp.task('generate-service-worker', function(callback) {
var path = require('path');
var swPrecache = require('sw-precache');
var rootDir = 'app';
swPrecache.write(path.join(rootDir, 'service-worker.js'), {
staticFileGlobs: [rootDir + '/**/*.{js,html,css,png,jpg,gif}'],
stripPrefix: rootDir
}, callback);
});

70. Proprietary + ConfidentialProprietary + Confidential
Proprietary + Confidential
Dynamic caching

71. Loading dynamic data
Changes frequently
Structured data
Unpredictably many query variations

72. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Cache first
Browser Service Worker Network
1
4
3
2

73. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Network first
Browser Service Worker Network
1
4
2
3

74. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
sw-toolbox

75. sw-toolbox
toolbox.router.get('/api', toolbox.networkFirst);

76. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Indexed Database

77. Proprietary + ConfidentialProprietary + Confidential
Proprietary + Confidential
Putting together

78. Page Shell
Precache required resources at initial load.
You will at least see app shell on page launch.

79. Contents
Precache required resources at initial load.
You will at least see app shell on page launch.
Load content using dynamic cache approach.
If the content is not available, use cache.

80. Source: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis non erat sem
Application Shell

82. THANK YOU