forked from FriendsOfEpub/eBookPerfChecklist
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
640 lines (519 loc) · 35 KB
/
index.html
File metadata and controls
640 lines (519 loc) · 35 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
<!DOCTYPE html>
<html lang="en">
<head>
<title>Blitz Optim — The eBook Performance Checklist</title>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<style type="text/css">
.details-para {display: block;}
</style>
<!-- Favicon -->
<link rel="shortcut icon" href="assets/favicon.ico" type="image/x-icon">
<link rel="icon" href="assets/favicon.ico" type="image/x-icon">
<!-- Google -->
<link rel="manifest" href="manifest.json">
<!-- Apple -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="BlitzOptim">
<link rel="apple-touch-icon" href="assets/icons/icon-152x152.png">
<!-- MS -->
<meta name="msapplication-TileImage" content="assets/icons/icon-144x144.png">
<meta name="msapplication-TileColor" content="#222222">
<meta name="application-name" content="BlitzOptim">
</head>
<body>
<header>
<img class="header-icon" alt="Blitz" src="assets/blitz-16.svg"/>
<h1>The eBook Performance Checklist</h1>
<p class="lead"><a href="https://medium.com/@jiminypan/lets-talk-about-ebook-performance-801b83745ea4#.wn5rj89l3">Achieving good perceived performance in eBooks can be tough.</a> Reading Systems constrain your performance budget and if you’re not careful enough, your users will suffer. We’re glad to help with this checklist!</p>
</header>
<main>
<form id="checklist" name="checklist">
<section id="html-list">
<div class="wrapper">
<h2 id="html-heading"><abbr title="HyperText Markup Language">HTML</abbr></h2>
<label>
<input type="checkbox" name="html" value="tags"/>
<span class="checker"></span>
<span class="summary">Get rid of useless tags</span>
<span class="details">
<span class="details-para">Each tag will create a new element node (with the corresponding text and attributes nodes).</span>
<span class="details-para">While this shouldn’t be a problem in theory, it may cripple performance once bottlenecks are piling up, especially when <a href="http://epubsecrets.com/what-ibooks-does-behind-the-scenes.php">Reading Systems are manipulating those nodes before you do.</a></span>
</span>
</label>
<label>
<input type="checkbox" name="html" value="markup"/>
<span class="checker"></span>
<span class="summary">Ensure semantic markup</span>
<span class="details">
<span class="details-para">More and more, Reading Systems tend to rely on <abbr title="HyperText Markup Language">HTML</abbr> 5 suggested rendering, which means you can benefit from it. It’s just about building on top of it.</span>
<span class="details-para">And it will be easier for <abbr title="Reading Systems">RS</abbr> to apply user settings too.</span>
<span class="details-para">Besides, proper <a href="http://html5doctor.com">semantic markup</a> helps with accessibility since you don’t have to rely on aria roles.</span>
</span>
</label>
<label>
<input type="checkbox" name="html" value="limit"/>
<span class="checker"></span>
<span class="summary">Ensure each <abbr title="HyperText Markup Language">HTML</abbr> file is less than 250 <abbr title="Kilobytes">KB</abbr></span>
<span class="details">
<span class="details-para">It is known older Reading Systems can’t cope with content above 300 <abbr title="Kilobytes">KB</abbr>. But that can already be too much in case you’ve got a lot of images in one single <abbr title="HyperText Markup Language">HTML</abbr> file.</span>
<span class="details-para">In other words, you should divide and conquer.</span>
</span>
</label>
<label>
<input type="checkbox" name="html" value="lang"/>
<span class="checker"></span>
<span class="summary">Declare language on the <code>html</code> and <code>body</code> tags</span>
<span class="details">
<span class="details-para">If it is not declared, that will impact hyphenation and text-to-speech.</span>
<span class="details-para">Some Reading Systems will try to add it by themselves, which requires some resources since it is usually achieved through scripts when injecting contents.</span>
<span class="details-para">You’d better declare it on <code>body</code> too so that the proper language is used—it depends on how <abbr title="Reading Systems">RS</abbr> inject contents in their <abbr title="User Interface">UI</abbr>.</span>
</span>
</label>
</div>
</section>
<section id="css-list">
<div class="wrapper">
<h2 id="css-heading"><abbr title="Cascading Style Sheets">CSS</abbr></h2>
<label>
<input type="checkbox" name="css" value="cascade"/>
<span class="checker"></span>
<span class="summary">Leverage inheritance and the cascade</span>
<span class="details">
<span class="details-para">This is all about the <abbr title="Don’t Repeat Yourself">DRY</abbr> concept.</span>
<span class="details-para">By leveraging the cascade, you avoid cruft and end up with a lighter stylesheet.</span>
<span class="details-para"><abbr title="Cascading Style Sheets">CSS</abbr> was designed for documents, eBooks are documents. It’s a match made in heaven.</span>
</span>
</label>
<label>
<input type="checkbox" name="css" value="selectors"/>
<span class="checker"></span>
<span class="summary">Simplify overqualified selectors</span>
<span class="details">
<span class="details-para">It should <a href="http://csswizardry.com/2012/11/code-smells-in-css/">not have a huge performance impact</a> but once again, Reading Systems are a strange beast.</span>
</span>
</label>
<label>
<input type="checkbox" name="css" value="attribute"/>
<span class="checker"></span>
<span class="summary">Avoid [attribute] selectors whenever possible</span>
<span class="details">
<span class="details-para">Compared to tags, classes and ids, attribute selectors might be <a href="http://scope.bitbucket.org/tests/selector-matching-performance/">5 times less performant on desktop and 10 times less performant on mobile</a>.</span>
<span class="details-para">When your performance budget is constrained, that can make a huge difference.</span>
</span>
</label>
<label>
<input type="checkbox" name="css" value="float"/>
<span class="checker"></span>
<span class="summary">Ensure each <abbr title="HyperText Markup Language">HTML</abbr> file doesn’t contain too many elements with <code>float</code></span>
<span class="details">
<span class="details-para"><code>float</code> can become an issue in older Reading Systems, especially on eInk Readers: too much floats in one <abbr title="HyperText Markup Language">HTML</abbr> file and turning a page might take up to 5 seconds.</span>
</span>
</label>
<label>
<input type="checkbox" name="css" value="opacity"/>
<span class="checker"></span>
<span class="summary">Ensure each <abbr title="HyperText Markup Language">HTML</abbr> file doesn’t contain too many elements with <code>opacity</code></span>
<span class="details">
<span class="details-para"><code>opacity</code> can become an issue in older Reading Systems. That may even <a href="https://github.com/dvschultz/99problems/issues/37">crash some apps or devices.</a></span>
</span>
</label>
<label>
<input type="checkbox" name="css" value="stylesheets"/>
<span class="checker"></span>
<span class="summary">Try to limit the number of <abbr title="Cascading Style Sheets">CSS</abbr> files you’re linking (1-2 max)</span>
<span class="details">
<span class="details-para">Multiple stylesheets are known to be <a href="https://github.com/dvschultz/99problems/issues/31">problematic in older Reading Systems as they affect anchor links.</a></span>
<span class="details-para">Moreover, your single stylesheet will be cached and users won’t need to request a new stylesheet for each section.</span>
<span class="details-para">Chances are the weight of your eBook stylesheet won’t be an issue—as long as you are taking advantage of the cascade—while multiple stylesheets could.</span>
<span class="details-para">Please also note the performance of <code>@import</code> is really bad.</span>
</span>
</label>
<label>
<input type="checkbox" name="css" value="rules"/>
<span class="checker"></span>
<span class="summary">Get rid of unused rules</span>
<span class="details">
<span class="details-para">Reading Systems will have less matching to do. That may <a href="http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/">affect rendering time dramatically.</a></span>
</span>
</label>
<label>
<input type="checkbox" name="css" value="validation"/>
<span class="checker"></span>
<span class="summary">Validate your stylesheets</span>
<span class="details">
<span class="details-para">Some older <abbr title="Reading Systems">RS</abbr> will drop your entire stylesheet if they encounter an error, which implies one file will be requested for nothing.</span>
<span class="details-para">As for other <abbr title="Reading Systems">RS</abbr>, don’t let them pause and throw an error in the console while parsing your stylesheet.</span>
</span>
</label>
<label>
<input type="checkbox" name="css" value="minifyCSS"/>
<span class="checker"></span>
<span class="summary">Minify your <abbr title="Cascading Style Sheets">CSS</abbr> files</span>
<span class="details">
<span class="details-para">Reading Systems don’t need spaces, tabs and comments for readability.</span>
<span class="details-para"><a href="https://cssminifier.com">Minify your <abbr title="Cascading Style Sheets">CSS</abbr></a> so that its impact is the smallest possible.</span>
</span>
</label>
</div>
</section>
<section id="fonts-list">
<div class="wrapper">
<h2 id="fonts-heading">Fonts</h2>
<label>
<input type="checkbox" name="fonts" value="drop"/>
<span class="checker"></span>
<span class="summary">Consider dropping fonts which are not necessary</span>
<span class="details">
<span class="details-para">Chances are users will pick the typeface they prefer in the settings. Is it really necessary to embed fonts for body copy then?</span>
</span>
</label>
<label>
<input type="checkbox" name="fonts" value="subset"/>
<span class="checker"></span>
<span class="summary">Subset embedded fonts</span>
<span class="details">
<span class="details-para">You probably don’t need all glyphs and characters so you could save some weight—for instance, <abbr title="Chinese, Japanese and Korean">CJK</abbr> fonts can be 10 <abbr title="Megabytes">MB</abbr>!</span>
</span>
</label>
<label>
<input type="checkbox" name="fonts" value="stacks"/>
<span class="checker"></span>
<span class="summary">Provide sensible font-stacks for your custom fonts</span>
<span class="details">
<span class="details-para">This is all about preparing for the future.</span>
<span class="details-para">Custom fonts slow down pages because they are additional resources.</span>
<span class="details-para">Should <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display"><code>font-display</code> become the new standard</a> and Reading Systems be impacted, you’ll be covered.</span>
</span>
</label>
</div>
</section>
<section id="images-list">
<div class="wrapper">
<h2 id="images-heading">Images</h2>
<label>
<input type="checkbox" name="images" value="format"/>
<span class="checker"></span>
<span class="summary">Ensure the best format is used for each image</span>
<span class="details">
<span class="details-para"><abbr title="Joint Photographic Experts Group">JPEG</abbr>, <abbr title="Portable Network Graphics">PNG</abbr> and <abbr title="Graphics Interchange Format">GIF</abbr> all have their pros and cons.</span>
<span class="details-para">If you don’t need transparency or gorgeous text rendering, why should you use <abbr title="Portable Network Graphics">PNG</abbr>, which is usually bigger than <abbr title="Joint Photographic Experts Group">JPEG</abbr>?</span>
<span class="details-para">And maybe you don’t need more than 256 colors, which means <abbr title="Graphics Interchange Format">GIF</abbr> could be the best option?</span>
<span class="details-para">By carefully picking the best format for each image, you can save megabytes!</span>
</span>
</label>
<label>
<input type="checkbox" name="images" value="dimensions"/>
<span class="checker"></span>
<span class="summary">Optimize dimensions</span>
<span class="details">
<span class="details-para">Should a small decoration be 5 million pixels?</span>
</span>
</label>
<label>
<input type="checkbox" name="images" value="web"/>
<span class="checker"></span>
<span class="summary">Save images for the web</span>
<span class="details">
<span class="details-para">Photo editor apps usually ship with custom exports for the web; image’s loading and rendering is quite expensive so take advantage of those ones.</span>
</span>
</label>
<label>
<input type="checkbox" name="images" value="weight"/>
<span class="checker"></span>
<span class="summary">Try to export images which are less than 300 <abbr title="Kilobytes">KB</abbr></span>
<span class="details">
<span class="details-para">The lighter, the better… especially as older reading systems can’t cope with more than 300 <abbr title="Kilobytes">KB</abbr> and may crash.</span>
</span>
</label>
<label>
<input type="checkbox" name="images" value="optimizeImg"/>
<span class="checker"></span>
<span class="summary">Optimize your images</span>
<span class="details">
<span class="details-para">Export for the web is good but it’s not good enough. And that’s why utilities like <a href="https://imageoptim.com/mac">ImageOptim</a>, <a href="https://github.com/mozilla/mozjpeg">MozJPEG</a> or <a href="https://pngquant.org">pngquant</a> are available.</span>
<span class="details-para">Those utilities rely on powerful algorithms which can save a few more kilobytes.</span>
</span>
</label>
<label>
<input type="checkbox" name="images" value="nightMode"/>
<span class="checker"></span>
<span class="summary">Consider the rendering of your images in night mode</span>
<span class="details">
<span class="details-para">Once again, prepare for the future.</span>
<span class="details-para">Let’s imagine you don’t care about night mode and your images are unreadable. Then, Reading System developers will use <abbr title="Cascading Style Sheets">CSS</abbr> filters…</span>
<span class="details-para">Unfortunately, you can expect a <a href="https://davidwalsh.name/css-filters">performance hit with heavy <abbr title="Cascading Style Sheets">CSS</abbr> filter usage.</a></span>
</span>
</label>
</div>
</section>
<section id="svg-list">
<div class="wrapper">
<h2 id="svg-heading"><abbr title="Scalable Vector Graphics">SVG</abbr></h2>
<label>
<input type="checkbox" name="svg" value="SVG"/>
<span class="checker"></span>
<span class="summary">Try to use <abbr title="Scalable Vector Graphics">SVG</abbr> instead of images whenever possible</span>
<span class="details">
<span class="details-para"><abbr title="Scalable Vector Graphics">SVG</abbr> can scale and look great at any resolution. It doesn’t need 5 million pixels for outstanding rendering in fullscreen.</span>
<span class="details-para">Also, they can be applied directly on the page, which means you don’t need an additional request, unlike images.</span>
</span>
</label>
<label>
<input type="checkbox" name="svg" value="layers"/>
<span class="checker"></span>
<span class="summary">Get rid of useless layers in your vector drawing app</span>
<span class="details">
<span class="details-para">Dedicated apps tend to export stuff you don’t really need.</span>
<span class="details-para">For instance, if you save as <abbr title="Scalable Vector Graphics">SVG</abbr>, some apps will embed all artboards while you only need one.</span>
<span class="details-para">Take that into account since there is no need for <abbr title="Extensible Markup Language">XML</abbr> that won’t be visible in the <code>viewBox</code>.</span>
</span>
</label>
<label>
<input type="checkbox" name="svg" value="paths"/>
<span class="checker"></span>
<span class="summary">Simplify paths</span>
<span class="details">
<span class="details-para">The simpler your paths, the lighter your <abbr title="Extensible Markup Language">XML</abbr>.</span>
<span class="details-para">Let’s make it easier for the rendering engine!</span>
</span>
</label>
<label>
<input type="checkbox" name="svg" value="styling"/>
<span class="checker"></span>
<span class="summary">Take advantage of <abbr title="Cascading Style Sheets">CSS</abbr></span>
<span class="details">
<span class="details-para">Some vector drawing apps will output basic shapes (<code>rect</code>, <code>circle</code>, <code>ellipse</code>, <code>polygon</code>, etc.) as paths, especially when borders are applied.</span>
<span class="details-para">Now, you can style <abbr title="Scalable Vector Graphics">SVG</abbr> with good old <abbr title="Cascading Style Sheets">CSS</abbr>!</span>
<span class="details-para">If you want to apply a border, you can just use <code>stroke</code> and <code>stroke-width</code>. As a result, your <abbr title="Scalable Vector Graphics">SVG</abbr> will be a hell of a lot lighter and more readable.</span>
</span>
</label>
<label>
<input type="checkbox" name="svg" value="tspan"/>
<span class="checker"></span>
<span class="summary">Consider text instead of vectors</span>
<span class="details">
<span class="details-para">Want some text to follow a path?</span>
<span class="details-para">You don’t need to vectorize that, which will result in a huge <abbr title="Scalable Vector Graphics">SVG</abbr> file (one path for each letter).</span>
<span class="details-para">You can declare <code>font-family</code> for this text using <abbr title="Cascading Style Sheets">CSS</abbr>.</span>
</span>
</label>
<label>
<input type="checkbox" name="svg" value="optimizeSVG"/>
<span class="checker"></span>
<span class="summary">Optimize <abbr title="Scalable Vector Graphics">SVG</abbr></span>
<span class="details">
<span class="details-para">Chances are your vector drawing app output extraneous data you don’t really need.</span>
<span class="details-para">Utilites like <a href="https://jakearchibald.github.io/svgomg/">SVGO</a> can help reduce your <abbr title="Scalable Vector Graphics">SVG</abbr> by half.</span>
</span>
</label>
</div>
</section>
<section id="javascript-list">
<div class="wrapper">
<h2 id="javascript-heading">JavaScript</h2>
<label>
<input type="checkbox" name="javascript" value="budget"/>
<span class="checker"></span>
<span class="summary">Create and follow a performance budget</span>
<span class="details">
<span class="details-para">Quite often, Reading Systems are partly built using JavaScript, which means your <a href="https://timkadlec.com/2013/01/setting-a-performance-budget/">performance budget</a> is pretty tight.</span>
<span class="details-para">You’d better create a performance budget as low end devices will undoubtedly suffer.</span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="frameworks"/>
<span class="checker"></span>
<span class="summary">Try to avoid frameworks and plugins</span>
<span class="details">
<span class="details-para">Since Reading Systems are often built using frameworks (Prototype, jQuery, etc.), the performance hit is quite significant before you even throw your own scripts in.</span>
<span class="details-para"><a href="http://youmightnotneedjquery.com">You might not need jQuery</a> and plugins are often used as mere shortcuts… You probably won’t use more than 10% of their features but you’ll impose their burden (weight) on users.</span>
<span class="details-para">If you really need a framework to achieve something, consider a <a href="http://projects.jga.me/jquery-builder/">custom subset.</a></span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="perf"/>
<span class="checker"></span>
<span class="summary">Design your scripts with performance in mind</span>
<span class="details">
<span class="details-para">Scripting is hard.</span>
<span class="details-para">While browsers’ developers are doing their utmost to achieve good performance, providing hints to JavaScript engines can speed up the execution dramatically.</span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="docReady"/>
<span class="checker"></span>
<span class="summary">Favor document ready</span>
<span class="details">
<span class="details-para">The sooner, the better… (even if you’ll probably need a timeout because Reading Systems can be funky).</span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="impact"/>
<span class="checker"></span>
<span class="summary">Check the performance impact of your scripts (debug)</span>
<span class="details">
<span class="details-para">You don’t want your scripts to screw everything up.</span>
<span class="details-para">By profiling JavaScript in the browser, <a href="http://www.html5rocks.com/en/tutorials/speed/rendering/">you’ll spot what creates jank.</a></span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="leaks"/>
<span class="checker"></span>
<span class="summary">Ensure your scripts don’t create memory leaks</span>
<span class="details">
<span class="details-para"><a href="https://auth0.com/blog/four-types-of-leaks-in-your-javascript-code-and-how-to-get-rid-of-them/">Managing memory is mandatory</a>, especially as some mobile devices might be short on RAM.</span>
<span class="details-para">Avoid creating accidental global variables, running unnecessary timers or keeping references that are not in the DOM anymore.</span>
<span class="details-para">Garbage collection <abbr title="For The Win">FTW</abbr>!</span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="clickTouch"/>
<span class="checker"></span>
<span class="summary">Ensure you add event listeners for both mouse and touch</span>
<span class="details">
<span class="details-para">Don’t rely on false assumptions.</span>
<span class="details-para">Touch support doesn’t necessarily mean touch is the only input available on a device (e.g. stylus, laptops with a touchscreen, etc.). In other words, you’d better design input-agnostic scripts.</span>
<span class="details-para">Of course you might fear the <code>click</code> event fires twice or your eBook is not responsive enough but there are <a href="https://hacks.mozilla.org/2013/04/detecting-touch-its-the-why-not-the-how/" title="Detecting touch: it's the 'why', not the 'how'">several ways to get around those issues.</a></span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="events"/>
<span class="checker"></span>
<span class="summary">Avoid overriding Reading System’s default events</span>
<span class="details">
<span class="details-para">You could accidentally fire a ton of events, which might have a performance impact (e.g. interactive eBooks for which rendering is an intensive task).</span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="enhancement"/>
<span class="checker"></span>
<span class="summary">Ensure your eBook works well if JavaScript is not supported</span>
<span class="details">
<span class="details-para">What if a script is running in the background while the Reading System doesn’t even support the feature you’re relying upon? That would waste quite a lot of ressources, right?</span>
<span class="details-para">Your scripts should be built around features, which means you <a href="http://www.html5rocks.com/en/tutorials/detection/">detect those features first</a> and run the script accordingly.</span>
<span class="details-para">And since “no JavaScript” is quite the standard in practice, you should consider scripting as a <a href="https://www.smashingmagazine.com/2009/04/progressive-enhancement-what-it-is-and-how-to-use-it/">progressive enhancement.</a></span>
<span class="details-para">Don’t let users down because they can’t access the most advanced Reading Systems.</span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="externalJS"/>
<span class="checker"></span>
<span class="summary">Use an external javascript file</span>
<span class="details">
<span class="details-para">An external file will be cached, inline scripts won’t.</span>
</span>
</label>
<label>
<input type="checkbox" name="javascript" value="minifyJS"/>
<span class="checker"></span>
<span class="summary">Minify your <abbr title="JavaScript">JS</abbr> files</span>
<span class="details">
<span class="details-para">Reading Systems don’t need verbose functions, spaces and tabs for the sake of readability.</span>
<span class="details-para"><a href="https://jscompress.com">By using a compression tool</a>, you can probably reduce the size of your js files by half.</span>
</span>
</label>
</div>
</section>
<section id="animations-list">
<div class="wrapper">
<h2 id="animations-heading">Animations</h2>
<label>
<input type="checkbox" name="animations" value="ux"/>
<span class="checker"></span>
<span class="summary">Ensure animations are meaningful and improve <abbr title="User Experience">UX</abbr></span>
<span class="details">
<span class="details-para">There’s nothing worse than useless animations impacting your performance budget because YOLO.</span>
</span>
</label>
<label>
<input type="checkbox" name="animations" value="cssAnims"/>
<span class="checker"></span>
<span class="summary">Use <abbr title="Cascading Style Sheets">CSS</abbr> instead of <abbr title="JavaScript">JS</abbr> whenever possible</span>
<span class="details">
<span class="details-para">This myth might have been busted for the web but… Reading Systems are a lot more constrained than web browsers.</span>
<span class="details-para">It should be repeated for the benefit of everyone, Reading Systems are often built using JavaScript, which means it’s a good idea to use anything else than <abbr title="JavaScript">JS</abbr> whenever possible.</span>
</span>
</label>
<label>
<input type="checkbox" name="animations" value="transforms"/>
<span class="checker"></span>
<span class="summary">Avoid animating properties which affect layout and paint</span>
<span class="details">
<span class="details-para">Browsers can animate transforms and <code>opacity</code> cheaply, this is not the case for properties like <code>width</code>, <code>top</code> or <code>background-image</code>.</span>
<span class="details-para">Avoid properties affecting paint at any cost. Learn more at <a href="http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/">HTML5rocks</a>.</span>
</span>
</label>
<label>
<input type="checkbox" name="animations" value="controls"/>
<span class="checker"></span>
<span class="summary">Try to provide users with controls (disabling, pausing, etc.)</span>
<span class="details">
<span class="details-para">What if the user doesn’t even want to experience animations? You could save a lot of resources!</span>
<span class="details-para">If you think about it for a second, controls might turn an unpleasing experience into a readable book, especially on low end devices.</span>
<span class="details-para">And don’t forget <a href="http://a11yproject.com/posts/understanding-vestibular-disorders/">this is an accessibility issue as well.</a></span>
</span>
</label>
</div>
</section>
<section id="qa-list">
<div class="wrapper">
<h2 id="qa-heading">Quality Assurance</h2>
<label>
<input type="checkbox" name="qa" value="devices"/>
<span class="checker"></span>
<span class="summary">Check your eBook on various devices, from low to high end</span>
<span class="details">
<span class="details-para">Let’s be honest, you just can’t <abbr title="Quality Assurance">QA</abbr> your eBook file on a brand new iPhone/iPad and call it a day… A lot of people are using less capable devices in real life.</span>
<span class="details-para">You should at least test your eBook on a $200 Android device and a good old eInk Reader if you want to provide users with the best possible experience.</span>
</span>
</label>
<label>
<input type="checkbox" name="qa" value="rendering"/>
<span class="checker"></span>
<span class="summary">Check if there is no rendering issue with your custom fonts</span>
<span class="details">
<span class="details-para">Users wait extra seconds for contents to load only to see custom fonts are completely screwed up.</span>
<span class="details-para">How would you feel about that as a user?</span>
</span>
</label>
<label>
<input type="checkbox" name="qa" value="settings"/>
<span class="checker"></span>
<span class="summary">Change user settings to make sure everything is OK</span>
<span class="details">
<span class="details-para">Reading Systems sometimes reload the whole document to change <code>font-family</code>, <code>font-size</code>, etc.</span>
<span class="details-para">Check if your eBook file doesn’t contain bottlenecks slowing user settings down.</span>
</span>
</label>
<label>
<input type="checkbox" name="qa" value="bloat"/>
<span class="checker"></span>
<span class="summary">Consider the size of your EPUB file</span>
<span class="details">
<span class="details-para">Sure, eBookStores set an upper limit but does it mean you should publish a 650 MB or 2 GB file?</span>
<span class="details-para">The bigger your EPUB file, the harder some Reading Systems may fall.</span>
<span class="details-para">And it’s a User eXperience issue as well: this will probably take forever to download then bloat the user’s device, etc. Don’t forget a lot of Android devices out there currently ship with just 8–16 GB of storage.</span>
</span>
</label>
</div>
</section>
<div id="controls">
<input type="reset" value="Reset" />
</div>
</form>
</main>
<footer>
<p class="secondary">Version 0.41 (codename “<abbr title="Minimum Viable Product">MVP</abbr>”)<br/><a href="https://github.com/FriendsOfEpub/eBookPerfChecklist/blob/master/LICENSE">LGPLv3 Licence</a> | <a href="https://github.com/FriendsOfEpub/eBookPerfChecklist">Source</a></p>
<p class="secondary">This tool is part of the <a href="https://github.com/FriendsOfEpub/Blitz">Blitz eBook Framework</a></p>
</footer>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript">
if (navigator.serviceWorker) {
navigator.serviceWorker.register('/eBookPerfChecklist/sw.js', {scope: '/eBookPerfChecklist/'})
}
</script>
</body>
</html>