Divalnu.diva-portal.org/smash/get/diva2:1326000/FULLTEXT01.pdf · 3.2. Trace-based implementation ...................................................................... 20 3.2.1

Bachelor Degree Project

Web Font Optimization for Mobile Internet Users - A performance study of resource prioritization approaches for optimizing custom fonts on the web.

Author: Maria NygrenSupervisor: Johan Hagelbäck Semester. HT 2018/VT 2019Subject: Computer Science

2

AbstractAccording to the HTTP Archive, 75% of websites are using web fonts. Multiple conditions have to be met before modern web browsers like Chrome, Firefox and Safari decide to download the web fonts needed on a page. As a result, web fonts are late discovered resources that can delay the First Meaningful Paint (FMP). Improving the FMP is relevant for the web industry, particularly for performance-conscious web developers. This paper gives insight into how the resource prioritization approaches HTTP/2 Preload and HTTP/2 Server Push can be used to optimize the delivery of web fonts for first-time visitors. Five font loading strategies that use HTTP/2 Server Push and/or Preload were implemented on replicas of the landing pages from five real-world websites. The font loading strategies were evaluated against each other, and against the non-optimized version of each landing page. All the evaluated font loading strategies in this degree project improved the time it took to deliver the first web font content to the user’s screen, resulting in a faster FMP. It was also discovered that HTTP/2 Server Push, on its own, is not a more performance efficient resource prioritization approach than HTTP/2 Preload when it comes to delivering web font content to the client. Further, HTTP/2 Server Push and HTTP/2 Preload appears to be more efficient when used together, in the context of optimizing the delivery of web font content. However, all conclusions in this paper are based on the results gathered from testing the font loading strategies in an emulated environment and are yet to be confirmed on actual mobile devices with real network conditions.

Keywords: Web Font Optimization (WFO); Resource Prioritization; Critical FOFT; Preload; HTTP/2 Server Push; First Meaningful Paint (FMP); Flash of Invisible Text (FOIT);

3

1. Introduction 51.1. Background ..................................................................................................6

1.1.1. Preload ..............................................................................................71.1.2. HTTP/2 and Server Push ..................................................................71.1.3. Subsetting .........................................................................................81.1.4. Critical Flash of Faux Text (FOFT)..................................................8

1.1.4.1. Critical FOFT with Preload .......................................................... 81.1.4.2. Critical FOFT with Server Push ................................................... 91.1.4.3. Critical FOFT with Server Push and Preload ............................. 10

1.2. Related work .............................................................................................101.3. Problem formulation ..................................................................................101.4. Motivation .................................................................................................. 111.5. Objectives and Expected results ................................................................. 11

1.5.1. List of objectives ............................................................................ 111.5.2. Expected results .............................................................................. 11

1.6. Research questions .....................................................................................121.7. Scope/Limitation ........................................................................................121.8. Target group................................................................................................131.9. Outline ........................................................................................................13

2. Method 142.1. Scientific Approach ...................................................................................14

2.1.1. Font Loading Strategies..................................................................142.1.2. Performance Metrics ......................................................................15

2.1.2.1. Resource Metrics ........................................................................ 152.1.2.2. Visual Metrics ............................................................................ 15

2.1.3. Landing Pages ................................................................................152.1.3.1. Criteria ....................................................................................... 152.1.3.2. Characteristics ............................................................................ 16

2.1.4. Network and Specifications ...........................................................182.2. Reliability and Validity ..............................................................................18

3. Implementation 193.1. Server Push .................................................................................................19

Contents

3.2. Trace-based implementation ......................................................................203.2.1. Visual metrics for web fonts ...........................................................21

3.3. Subsetting ...................................................................................................213.4. Demo application / code example ..............................................................21

4. Results 224.1. Pages ...........................................................................................................22

4.1.1. Page 1 .............................................................................................224.1.2. Page 2 .............................................................................................254.1.3. Page 3 .............................................................................................284.1.4. Page 4 .............................................................................................314.1.5. Page 5 .............................................................................................34

4.2. Summary ...................................................................................................37

5. Analysis 415.1. Strategies ....................................................................................................41

5.1.1. Critical FOFT with Preload V1 (Strategy 1) ..................................415.1.2. Critical FOFT with Preload V2 (Strategy 2) ..................................425.1.3. Critical FOFT with HTTP/2 Server Push (Strategy 3) ...................42

5.1.4. Critical FOFT with HTTP/2 Server Push and Preload (V1) ............................................ (Strategy 4) ...................................................43

5.1.5. Critical FOFT with HTTP/2 Server Push and Preload (V2) ............................................ (Strategy 5) ....................................................44

5.2. Statistical Analysis .....................................................................................445.2.1. Post Hoc .........................................................................................445.2.2. HTTP/2 Server Push vs HTTP/2 Preload .......................................455.2.3. HTTP/2 Server Push used together with HTTP/2 Preload .............46

5.3. Visual summary (Column charts) ...............................................................47

6. Conclusion 526.1. Future Work ................................................................................................52

References 54

A. Page details and resource prioritization approaches 57

B. Statistical Analysis Results 67

C. Raw Results 118

5

1. IntroductionMobile is accounting for approximately half of all global web traffic [1], and research indicates that more than 50% of mobile users will abandon a site if it takes longer than three seconds to load [2]. The speed at which web pages are displayed and downloaded to the client, also known as web performance, correlates to business metrics like revenue [3], revisits and bounce rate [4]. When a user visits a web page, there are multiple resources, e.g., CSS, JavaScript, images, custom fonts, that need to be fetched and downloaded before the page becomes useful1. Figure 1.1 illustrates the quantity of popular web page resources, all of which can be optimized for a better web performance. Amongst these popular resources are custom fonts, also known as web fonts.

Figure 1.1: The median number of requests, per resource, for mobile internet users [5].

Modern browsers, e.g., Chrome, Firefox, Safari, must meet multiple conditions before they can initiate any requests for custom fonts [11]. The HTML and the CSS need to be fully parsed before the browser can know about which font resources that are required on the page [6]. As a result, custom fonts are late discovered resources. Loading strategies that employ resource prioritization approaches can be used to help web browsers prioritize the critical font resources, with the aim to improve their loading time [7][8]. This paper will evaluate five font loading strategies that leverage the resource prioritization methods HTTP/2 Preload and HTTP/2 Server Push, and conclude how each strategy performs when delivering web font content to the client.

1 The ‘Is it useful?’ experience can be mapped to the performance metric called First Meaningful Paint [9]

0

10

4

19

29

63

20

30

HTML CSS ImagesJavaScriptCustom Fonts

Number of requests for popular web page resources

6

1.1. BackgroundCustom fonts, also known as web fonts, are those not pre-installed by default on a user’s device. Unlike system fonts, e.g., Arial, Helvetica, custom fonts must be downloaded from a web server before the browser can use them to render text on a page in a selected typeface. Open Sans, Montserrat and Lato are a few examples of typefaces that are not locally available on a user’s device by default. Every font style, and weight, that are included in a typeface font family, e.g., regular, italic, bold, needs its own separate font file. The aspect of a custom font is described by using the CSS @font-face rule [10]. In the rest of this paper, custom fonts will be referred to as web fonts. Multiple conditions have to be met before the web browser decides to download the web fonts needed on a page [6]. Further, Chrome, Firefox, and Safari also hide any text that uses a web font while they are loading and parsing the CSS and required font file. This “invisible text problem” is called the Flash Of Invisible Text (FOIT), and it can occur for up to three seconds on slow networks [13]. Due to these browser conditions, web fonts are lazy loaded (see Figure 1.2) and may delay the First Meaningful Paint (FMP). The First Meaningful Paint is the time that it takes for the browser to display a web page’s primary content, including fonts [12].If a web font takes more than three seconds to load, modern browsers show the text in a fallback system font, also known as the Flash of Unstyled Text (FOUT) [14].

Figure 1.2: Lazy loading of web fonts, i.e., the fonts do not start loading until the HTML and CSS have been fully parsed. FP = First Paint. FMP = First Meaningful Paint.

2200ms2100ms 2300ms

FP FMP

2400ms 2500ms 2600ms 2700ms 2800ms

HTML

CSS

LATO-REGULAR.WOFF2

LATO-ITALIC.WOFF2

LATO-BOLD.WOFF2

LOGOLOGO

7

When the browser cannot find the correct style for a font family, it tries to synthesize the font style by programmatically making it look like bold or italic. Synthesized styles do not look as good as the styles they are trying to imitate and are often referred to as faux bold and faux italic (see Figure 1.3). However, font-synthesis can be leveraged to minimize the reflow of text [6].

Figure 1.3: Font synthesis example; Comparing faux bold and italics with real bold and italics.

For further reading, Grigorik gives a substantial overview of the topics discussed above in his article about Web Font Optimization [11].

1.1.1. PreloadPreload is used for indicating to the browser that a specified resource is needed for the current navigation. It makes it possible to early load late discovered resources. See Figure 1.4 for an example usage with a web font.

Figures code examples <link rel="preload" as="font" href="/lato-regular-subset.woff2"

type="font/woff2" crossorigin>

/*** CSS Font Loading API ***/

(function () {

"use strict";

if ("fonts" in document) {

document.fonts.load("1em 'LatoSubset'").then(function () {

document.documentElement.className += " subset-loaded";

Promise.all([

document.fonts.load("400 1em 'Lato'"),

document.fonts.load("italic 400 1em 'Lato'"),


document.fonts.load("italic 700 1em 'Lato'")

]).then(function () {

document.documentElement.className += " fonts-loaded";

}); });}

})();

/*** Critical Styles ***/

.subset-loaded body {

font-family: 'LatoSubset', Arial, sans-serif;

}

.fonts-loaded body {

font-family: 'Lato', Arial, sans-serif;

}

Figure 1.4: An example of preloading a web font using the preload keyword on an HTML <link> element. The crossorigin attribute is required when fetching a font, even if the font is on the same origin as the page.

For a more comprehensive explanation, see the preload specification [15].

1.1.2. HTTP/2 and Server PushThe Hypertext Transfer Protocol Version 2 (HTTP/2) promises improvements in browsing performance compared to its predecessor HTTP/1.1 [16]. Server Push is a feature introduced in HTTP/2 which can be used to preemptively push resources to the client before the browser knows that it needs them, e.g., CSS and web fonts (see Figure 1.5). The advantage of Server Push is that it can reduce the extra latency associated with the Round-trip time (RTT) for the resources, allowing the page load time to improve [17]. Round-trip time is the time it takes for the client to send a request, hit the web server, go back again until the client starts receiving the first bytes.

8

Client

HTTP/2 (without Push) HTTP/2 (with Push)

Request ResponseResources

Server Client Server

GET font.woff2

GET index.html

GET main.css

main.css (push promise)

main.css

index.htmlindex.html

font.woff2 (push promise)

font.woff2

GET index.html

Time

Figure 1.5: HTTP/2 Server Push compared to HTTP/2 without Server Push.

1.1.3. SubsettingSubsetting a font involves reducing the number of glyphs so that the font file can be reduced in size. A subset font is an optimized font file containing the most critical glyphs (usually A-Z and optionally 0-9 and/or punctuation).

1.1.4. Critical Flash of Faux Text (FOFT)Critical FOFT is a font loading strategy proposed by Leatherman [7]. It involves loading web fonts in two stages, dynamically, using the CSS Font Loading API [45] (see Figure 1.6 and Figure 1.7). In the first stage a subset roman font is loaded and delivered to the user, and font-synthesis is used by the browser to simulate the other font styles, e.g., bold and italic. In the second stage, the full roman web font including other weights and styles are loaded and applied.

1.1.4.1. Critical FOFT with Preload

This strategy is a recommended approach by Leatherman since it is an enhancement of Critical FOFT. Preload is used in conjunction with the CSS Font Loading API. The strategy involves using the preload attribute on an HTML <link> element to initiate a high-priority, and non-render-blocking

9

fetch of a subset roman web font resource (see Figure 1.4). Two variations of this strategy will be examined. The first variation will be to preload only the subset roman web font file, and the other to preload more web fonts.

1.1.4.2. Critical FOFT with Server Push

Critical FOFT with Server Push is an experimental font loading strategy that has been evaluated in this degree project. It is similar to Leatherman’s Critical FOFT with Preload, with the difference that server push is used instead of preload.




(function () {

"use strict";




Promise.all([







}); });}

})();




}



}

Figure 1.6: Loading web fonts via the CSS Font Loading API. When the subset web font has finished loading a class called ‘subset-loaded’ is added to the HTML root element. When all the used web fonts on the page have loaded, they will be applied to the document simultaneously with the class ‘fonts-loaded’. This is the same code structure as Leatherman uses in one of his code examples [46].




(function () {

"use strict";




Promise.all([







}); });}

})();




}



}

Figure 1.7: Web fonts are applied to the CSS classes that were dynamically added to the document via the CSS Font Loading API. Fallback system fonts are included.

10

1.1.4.3. Critical FOFT with Server Push and Preload

This font loading strategy is built upon Leatherman’s Critical FOFT with Preload, with the addition that push is used in conjunction with preload. Two variations of this experimental strategy will be examined (see Method 2.1.1 for further details).

1.2. Related work Many techniques have previously been investigated for solving the lazy-loading problem of web fonts [7][18]. Stein, the author of the Webfont Handbook [6], shows that when preloading a web font the browser can render the text that uses that font earlier. Leatherman advocates Critical FOFT with Preload as the best performance-oriented approach for loading web fonts once browser support increases2 [7]. Previous research has shown that while HTTP/2 Server Push can speed up web pages, it can also slow them down [17][20]. Mis-prioritization of resources can lead to severe performance penalties [21]. Rosen et al. [22] conclude that HTTP/2 Server Push is effective at improving performance on mobile networks with high loss rates and latencies. Bergan et al. [17] provide a set of guidelines for basic usage of HTTP/2 Server Push. The following rules are relevant for this paper; i) Push enough content to fill idle network time, and no more, ii) Resources should be pushed in evaluation-dependent order, iii) Consider using preload links to reveal the remaining critical or hidden resources. Previous research concerning HTTP/2 Server Push tends to focus on the overall page load time performance [20][21][22]. The lack of insight on how Server Push behaves with web fonts motivates the need for exploring this resource prioritization approach further.

1.3. Problem formulationWeb fonts are render-blocking and can slow down web pages if they are not loaded efficiently [6][11]. One approach to solving the default lazy-loading behavior for web fonts involves implementing an effective font loading strategy, e.g., Critical FOFT with Preload [7]. The primary goal of this degree project is to investigate if HTTP/2 Server Push is more or less performance efficient than HTTP/2 Preload when paired with the performance-oriented font loading strategy called Critical FOFT.

2 Leatherman wrote this statement in 2016. Currently, the support for preload in the HTML <link rel> format is 83% (on mobile) [19].

11

This paper will also investigate if the resource prioritization approaches HTTP/2 Server Push and HTTP/2 Preload are more efficient when used together, and to what degree the font loading strategies listed in 2.1.1 impacts the delivery of web font content to the client compared to not using any strategies at all.

1.4. MotivationCurrently, the median loading time for a web page’s primary content to appear on the user’s mobile screen is 5.8 seconds [23]. Users expect a site to load within two seconds [24], and as a page load time goes from 1s to 5s, the probability of bounce increases by 90 percent [2]. According to the HTTP Archive, 75 percent of websites are using web fonts [25][26]. Optimizing the delivery and usage of external fonts can result in a faster render time for a site or web application. Even a small difference in load time, e.g., 100 milliseconds, makes an impact on revenue [3]. Hence, it becomes paramount to find a good strategy for improving the loading of font resources. The wide adoption of the HTTP/2 networking protocol in modern browsers makes Server Push a good candidate as a loading strategy. Gaining knowledge in how preload compare to HTTP/2 Server Push will be helpful for design-and performance-conscious web developers that want to use web fonts in their projects.

1.5. Objectives and Expected results

1.5.1. List of objectives

O1Find five websites that are not leveraging any font loading strategies, and make replicas of their landing pages.

O2Set up a local HTTP/2 server and implement the selected font loading strategies for each landing page.

O3 Write automation scripts that will be used for collecting Resource Per-formance Metrics and Visual Performance Metrics.

O4 Analyze the collected data and conclude how each strategy compare.

1.5.2. Expected resultsAll the selected font loading strategies (listed in 2.1.1) should improve the delivery of web font content to the user, compared to the default way of loading web fonts. In theory, HTTP/2 Server Push should be more effective than HTTP/2

12

Preload, when it comes to delivering web fonts, provided that a good server push strategy is being used. However, Server Push can be difficult to implement, and since there are no clear guidelines for managing web fonts, it could also turn out to be slower or perform similarly to the strategies which are only using preload. Server Push used in combination with preload might be the most promising strategy in terms of performance.

1.6. Research questions

RQ1Is HTTP/2 Server Push a more performance efficient resource prioritization approach than HTTP/2 Preload, in the context of optimizing the delivery of web font content?

RQ2Are the resource prioritization approaches HTTP/2 Server Push and HTTP/2 Preload more efficient if used together, in the context of optimizing the delivery of web font content?

RQ3How do the font loading strategies listed in 2.1.1 compare to the default web font loading behavior?

1.7. Scope/LimitationThere are many alternative methods for improving the loading of web fonts, and testing them all is not possible within the scope of this project. Five font loading strategies that focus on improving the delivery of web fonts were selected, and they all build upon the strategy Critical FOFT (see 1.1.4). These font loading strategies (listed in 2.1.1) were used when collecting performance metrics for first-time visitors. Repeat view optimization was not taken into account. None of the strategies used in this project are intended for font icons since they have different use cases and loading priorities [7]. Neither are they intended to be used for sites that have too many web font styles, e.g., more than eight, since the strategies will become too hard to maintain. The only targeted font format used in this project was the WOFF File Format 2.0 (WOFF2) [42]. If a landing page was using any other font formats, e.g. WOFF 1.0 (the predecessor to WOFF2), these were converted to WOFF2. A replica of the landing page was made for five different websites that werenot leveraging any font loading strategies. The landing pages made at least threerequests for web fonts that go under the OFL license [27], allowing subsetting of the font files. If a page used an icon font it was not preloaded or pushed, instead, it was loaded last in the CSS Font Loading API script.

13

The selected font loading strategies in this paper were implemented on all five landing pages and tested locally on a server that supports HTTP/2 Server Push. Due to time restrictions, and the fact that HTTP/2 Server Push is inconsistent across browsers [28], the performance metrics were only collected within Google Chrome 73.0.3660.0 (Official Build) canary (64-bit).

1.8. Target groupThe target group is design-and performance-conscious web developers who want to use web fonts in their projects.

1.9. OutlineChapter 2 includes the scientific approach as well as a description of the selected font loading strategies that have been evaluated. Chapter 3 describes the implementation that was used for collecting performance metrics, and the methods for optimizing the font files. Chapter 4 presents the results from the experiments. Chapter 5 covers a data analysis and a conclusion on how each font loading strategy compare. Chapter 6 discusses the findings and if the research questions were answered. Chapter 7 contains a conclusion of the findings and future work. Appendix A includes details about each page, i.e., the number of requests per resource and their sizes, a list of the web fonts that were used, and the preloaded/pushed resources for each strategy. Appendix B contains the results from the statistical tests. The raw results from all network traces can be found in Appendix C.

14

2. Method

2.1. Scientific Approach To answer the research questions, RQ1, RQ2, and RQ3, quantitative data was collected in a controlled experiment. The independent variable was the strategy used to load and deliver the web fonts. Each strategy (listed in 2.1.1) was implemented on clones of landing pages for five real-world websites. The dependent variables were the time, in milliseconds, that it took to arrive at each performance metric (listed in 2.1.2). All five strategies were then evaluated against the non-optimized version of the landing page. The Analysis of Variance (ANOVA) hypothesis-testing technique [29] with an alpha level (α) = 0.05 was used to determine whether or not there was a statistically significant difference between the means for each performance metric and strategy. If the probability value (p-value) is less than or equal to the alpha (p ≤ .05) the null hypothesis is rejected and the result is interpreted as statistically significant.

2.1.1. Font Loading StrategiesThe following strategies were selected;

1. Critical FOFT with Preload (Variant 1), where the subset roman web font was preloaded via the HTML <link> element.

2. Critical FOFT with Preload (Variant 2), where all web fonts (including the subset roman font file) were preloaded via the HTML <link> element.

3. Critical FOFT with Server Push, where the subset roman web font and render-critical resources (CSS and JS) were pushed from the server to the client. (No fonts were preloaded).

4. Critical FOFT HTTP/2 with Server Push and Preload (Variant 1). This strategy combines push with preload. The subset roman web font was first pushed and then preloaded (via the HTML <link> element). Render-critical resources (CSS and JS) were pushed from the server to the client. No other web fonts were preloaded.

5. Critical FOFT HTTP/2 with Server Push and Preload (Variant 2). This strategy is the same as strategy 4 with the addition that all web fonts were preloaded, including the subset roman font file.

These strategies were selected since they meet the following criteria; Each strategy aims to eliminate the FOIT and to spend as little time as possible in the FOUT stage. They open up the possibility to deliver web font content to the user in a fast manner [6][7][30].

15

For each strategy, the CSS containing the @font-face declarations and font-family definitions was inlined in the HTML <head> as critical styles. If a page used more than one font family, e.g., Lato and Open Sans, a subset roman font was created for each family. In that use case, two subset fonts were pushed or preloaded, depending on the strategy. Further details about the implementation can be found under section Chapter 3 Implementation.

2.1.2. Performance MetricsThe collected Performance Metrics were divided into two groups; Resource Metrics and Visual Metrics. All metrics are defined in milliseconds. The starting point is measured from the navigation-start event, which is the time when the user agent starts fetching a page [37].

2.1.2.1. Resource Metrics

• The last subset file has finished loading.

• All web fonts have finished loading. (Icon fonts are not included)

• The browser has finished parsing the stylesheets.

2.1.2.2. Visual Metrics

• First Paint, i.e., the first visual change after navigation start [38].

• First web font stage, i.e., when the first web font content is visible to the user. When using strategies, this is equal to when the subset font is visible. If no font loading strategy is used, this is the time for when any web font content is visible to the screen.

• Second web font stage, i.e., when all web fonts are visible to the user.

2.1.3. Landing PagesFive websites were collected from the Cisco Umbrella (OpenDNS) popularity list of the top million most queried domains [39]. The websites’ landing pages were scraped and saved locally using the node module website-scraper [40].

2.1.3.1. Criteria

When selecting the five websites the following criteria were used:

• The website's landing page made at least three web font requests.

• The website's landing page only used web fonts that go under the OFL license [27], allowing subsetting of the font files.

• The website's landing page did not make any third-party web font requests.

• The website allowed scraping of their landing page.

16

2.1.3.2. Characteristics

This subsection includes the characteristics of the selected landing pages. The purpose of this is to receive an overview of how they might differ from each other and to spot deviations that could impact the loading of web fonts. Figure 3.1 visualizes a comparison of the number of requests per resource type. Figure 3.2 compares the transferred size (number of bytes on the wire) for the resource types, and Figure 3.3 compares the actual size of the resources. Figure 3.4 shows the number of characters that were used on each landing page.

0

20

40

60

80

Doc (HTML) Images CSS JavaScript Fonts Other

Page 1 Page 2 Page 3 Page 4 Page 5

Number of requests vs. Resource type

Figure 3.1: Number of requests vs. Resource type, a comparison of the selected landing pages.

0

500

1000

1500



Transferred size in kilobytes vs. Resource type

Figure 3.2: Transferred size in kilobytes vs. Resource type, a comparison of the selected landing pages.

17

0

500

1000

1500



Size in kilobytes vs. Resource type

Figure 3.3: Size in kilobytes vs. Resource type, a comparison of the selected landing pages.

.

1074

7051

3715

2110 2233Char

acte

r cou

nt

0

2000

4000

6000

8000


Character count vs. Page

Figure 3.4: Character count vs. Page, a comparison of the selected landing pages.

A more comprehensive overview of each individual landing page’s requests and resources can be found in Appendix A.

18

2.1.4. Network and Specifications The mobile network was emulated using the same settings for 3G throttling that Lighthouse uses; Latency: 562.5 ms. Throughput; 1.44Mbps down / 675 Kbps up [31]. CPU throttling was set to 6x slowdown. Push streams were initiated from a local HTTP/2 server created with the Express web framework [32] and the node-spdy module [33]. The HTTP/2 server was running on a desktop computer with the following specifications; CPU; Intel Core i7-8700K @ 3.70GHz. RAM; 32.0GB Dual-Channel Unknown @ 1200MHz. Motherboard; ASUSTeK COMPUTER INC. ROG STRIX Z370-G GAMING (WI-FI AC) (LGA1151). Graphics; NVIDIA GeForce GTX 1080 Ti. Storage; 465GB Samsung SSD 850 EVO 500GB. Operative system; Windows 10 Home 64-bit. All font resources were self-hosted since HTTP/2 only allows pushing resources from domains that you are authoritative for [16].

2.2. Reliability and Validity Emulation within the Chrome DevTools Protocol will not yield as realistic results as physical device testing. Factors like CPU, RAM and Network conditions may vary widely between real-world devices. However, emulation is a good indicator of how the strategies are going to behave in the real world, and these external validity issues should not harm the internal validity and reliability of the experiment. A Node.js library called Puppeteer was used to capture the page load process via automation scripts. The library provides a high-level API to control Chromium over the DevTools Protocol [34][35]. There are no current tools available for automatically measuring the visual metrics for web fonts; hence the visual metrics had to be collected manually (see section 3.2.1). The automation scripts for collecting performance metrics were specifically implemented for this degree project, and could potentially pose a threat to the internal validity. To minimize threats to validity individual page load processes was captured 15 times per font loading strategy, on five different landing pages, i.e., 75 times in total. Resource loading is hard [36][28], and a deep understanding of web engineering is required to make optimal use of Server Push [30]. The time restrictions for this project has limited the author’s capability of understanding Server Push on a profound level; hence better approaches could most likely be implemented. No single approach used in this paper is sufficient enough to cover the range of all use cases and browser behaviors.

19

3. ImplementationAll the selected strategies (listed in 2.1.1) were implemented on each hand-picked landing page (see "2.1.3. Landing Pages" on page 15). The chosen pages were hosted locally on a server that supports HTTP/2 Server Push. Appendix A includes details about each page, i.e., the number of requests per resource and their sizes, a list of the web fonts that were used, and the preloaded/pushed resources for each strategy. 3.1. Server PushThe recommendations provided by Bergan et al. in their article "Rules of Thumb for HTTP/2 Push" [17] were used as guidelines for the push implementation. The first rule in their article is to push enough content to fill idle network time, and no more. To get an estimate on how many kilobytes that could be pushed to fill the idle network time, the Bandwith Delay Product (BDP), i.e., the amount of data that can fill up a network link, was calculated using the following formula:

BDP (capacity in bits) = Bandwidth (bits per sec) × Round Trip Time (in seconds)

Example calculation for Fast 3G with Throughput 1.44Mbit/s and RTT: 1125ms

(1.44 × 106) × (1125/1000) = 1 620 000 bits ≈ 198 kilobytes

To not overestimate the number of kilobytes that could be pushed, the maximum number of kilobytes were restricted to 65KB. Pushing more than this did not seem beneficial for the loading time of web fonts (a conclusion drawn from looking at the network traces for each page when experimenting with the number of pushed kilobytes). The second rule is to push resources in evaluation-dependence order, which essentially means to push the resources that are render-blocking since they are evaluated first by the HTML parser. The decision of which render-blocking resources to push, for strategy 3, 4 and 5, was made by manually looking at the network traces for each landing page and comparing the results. See Appendix A for a list of the resources that were pushed for each page. Further, have a look at "3.4. Demo application / code example" on page 21 for more details concerning the push implementation that was used in this project. Chrome DevTools was used to verify that the push streams were working. The initiator in the Network panel gets the value ‘Push’ if a resource was successfully pushed (see Figure 3.5).

20

Figure 3.5: Chrome DevTools Initiator Push.

3.2. Trace-based implementationUsing Puppeteer, a full network trace in the Trace Event Format [43] was automatically saved for each page load. Every trace file contained data about the page load process. The following data could be extracted from the trace output:

• The timestamp of the event named ‘ResourceFinish‘, which occurs when the client has finished loading a resource after receiving its data. It was collected for each respective .woff2 file, inclusive the subset roman web font file.

• A sequence of screenshots that displayed the visual progress of the page load. The filename for each screenshot was made to be the corresponding time, in milliseconds, for when the screenshot was taken. This approach of extracting the screenshots made it possible to collect the visual performance metrics manually.

• The timestamp of the last event named ‘ParseAuthorStyleSheet’, which is the time when the browser has finished parsing the stylesheets.

• The user-perceived First Paint.

The metrics for First Paint was collected from the network trace files with the following algorithm:

1. Find the first Trace Event named ‘firstPaint’.

2. Use the timestamp for the First Paint event to find the first following Trace Event named ‘Screenshot’.

3. Use the timestamp for the Screenshot event and calculate the difference between the Screenshot event and navigationstart3.

4. Convert the result from microseconds to milliseconds.

3 Janaszek describes how to calculate the difference between a given timestamp and the ‘navigationStart’ event in his blog post ‘Test website performance with Puppeteer’ [42].

21

The algorithm for the user-perceived First Paint was tested and verified manually and was correct in 75 of 75 cases (tested one time per strategy for each landing page).

3.2.1. Visual metrics for web fontsThere are no current tools available for automatically measuring the visual metrics for web fonts. To get the user-perceived loading experience, the visual metrics were collected manually by looking at the screenshots that were extracted from the network trace file.

3.3. SubsettingThe node module glyphhanger [43] was used for subsetting, and the whitelisted characters were; ‘U+20,U+41-5A,U+61-7A’. This Unicode-range tells the module to include the space sign (U+20) in the subset roman font file as well as the following list of characters: ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnop qrstuvwxyz

3.4. Demo application / code exampleA supplementary demo application4 was also created to demonstrate how the five selected strategies behave (see Figure 3.6). It contains the same core implementation and server structure that were used for the five selected landing pages in this project. This demo/code example can inter alia be used to compare the strategies and inspect the push implementation, for those who are interested.

Figure 3.6: Screenshot of the demo application.

4 https://github.com/mia-nygren/2DV50E-loading-strategies-for-web-fonts-demo

https://github.com/mia-nygren/2DV50E-loading-strategies-for-web-fonts-demo

https://github.com/mia-nygren/2DV50E-loading-strategies-for-web-fonts-demo

22

4. Results

4.1. PagesThis section displays a summary of the results from the network traces that were collected for each landing page. The full raw data is too large to include in this section but is available in Appendix C. These pages are intended as case studies. No claim can be made that they are fully representative of how the font loading strategies listed in 2.1.1 behave in real-world scenarios.

4.1.1. Page 1


Table 4.1 to Table 4.3 show a summary of the time, in milliseconds, that it took to reach the user-perceived visual metrics; First Paint, first web font stage, and second web font stage. Figure 4.1 depicts these visual metrics with a box plot.

First Paint First Paint

Strategy Number ofsamples Mean Standard

deviationStandard error

of the mean Median

Critical FOFT Preload V1 15 3336.93 27.30 7.05 3333.36


Critical FOFT Push 15 2950.46 43.84 11.32 2960.92

Critical FOFT Push And Preload V1 15 2817.84 40.23 10.39 2820.27


No Font Loading Strategy 15 3493.11 38.53 9.95 3499.07

First Web Font Stage



of the mean Median


Critical FOFT Preload V2 15 N/A N/A N/A N/A





Table 4.1: Time to First Paint summary.

First web font stage

First Paint



of the mean Median










of the mean Median







Table 4.2: Time to the first web font stage summary. N/A = Not Available, i.e., no subset font was visible to the user.

23

Page 1

Milliseconds

Visual Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push

CFOFT Push and Preload V1


No Font Loading Strategy

2800 3000 3200 3400 3600 38002600 4000 4200 4400 4600 4800 5000 5200

Highcharts.com

Second web font stageSecond Web Font Stage



of the mean Median







Fallback Font Stage



of the mean Median




Critical FOFT Push And Preload V1 15 N/A N/A N/A N/A


No Font Loading Strategy 15 N/A N/A N/A N/A

Table 4.3: Time to the second web font stage summary.

Visual Metrics box plot

Milliseconds

First Paint First web font stage Second web font stage

Figure 4.1: Box plot of the visual metrics data from the network traces for page 1.


Table 4.4 to Table 4.6 show a summary of the time, in milliseconds, that it took to reach the resource metrics; stylesheets parsed, subset web fonts loaded, all web fonts loaded. Figure 4.2 depicts these resource metrics with a box plot.

24

Stylesheets parsedStylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median







Table 4.4: Time to stylesheets parsed summary.

Subset web fonts loaded

Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median







Table 4.5: Time to subset web fonts loaded. N/A = Not Available.

All web fonts loaded

Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median







Table 4.6: Time to all web fonts loaded summary.

25

Milliseconds

Resource Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push

CFOFT Push And Preload V1



2000 2500 300015001250 1750 2250 2750 3250 3500 3750 4000 4250 4500 4750 50…

Highcharts.com

Resource Metrics box plot

Stylesheets parsed Subset fonts loaded All web fonts loaded

Figure 4.2: Box plot of the resource metrics data from the network traces for page 1.

4.1.2. Page 2






of the mean Median










of the mean Median








26

Page 2

Milliseconds

Visual Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2600 2800 3000 3200 3400 3600 3800 4000 4200 44002400 4600 4800 5000 52…

Highcharts.com


First Paint



of the mean Median










of the mean Median







Table 4.8: Time to the first web font stage summary. N/A = Not Available.




of the mean Median







Fallback Font Stage



of the mean Median









Milliseconds



27






of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median








28




4.1.3. Page 3






of the mean Median










of the mean Median








Milliseconds

Resource Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2000 25001500 30001250 1750 2250 2750 3250 3500 3750 4000 4250 4500 47…

Highcharts.com

29

Page 3

Milliseconds

Visual Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2500 3000 35002000 4000 4500 5000 5500 6000 6500 7000 7500

Highcharts.com


First Paint



of the mean Median










of the mean Median











of the mean Median







Fallback Font Stage



of the mean Median









Milliseconds



30






of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median








31

Milliseconds

Resource Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2000 2500 30001500 3500 4000 4500 5000 5500 6000 6500 7000 7500

Highcharts.com




4.1.4. Page 4






of the mean Median










of the mean Median








32

Page 4

Milliseconds

Visual Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2600 2800 3000 3200 3400 36002400 3800 4000 4200 4400 4600 4800 5000 52…

Highcharts.com


First Paint



of the mean Median










of the mean Median











of the mean Median







Fallback Font Stage



of the mean Median



Critical FOFT Push 15 N/A N/A N/A N/A






Milliseconds



33






of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median








34

Milliseconds

Resource Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2000 250015001250 1750 2250 2750 3000 3250 3500 3750 4000 4250 4500 4750 50…

Highcharts.com




4.1.5. Page 5






of the mean Median










of the mean Median








35

Page 5

Milliseconds

Visual Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2400 2600 2800 3000 3200 3400 3600 3800 4000 42002200 4400 4600 4800 5000 5200 5…

Highcharts.com


First Paint



of the mean Median










of the mean Median











of the mean Median







Fallback Font Stage



of the mean Median









Milliseconds



36






of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median








37

Milliseconds

Resource Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2000 25001500 30001250 1750 2250 2750 3250 3500 3750 4000 4250 4500 4750 5000 5…

Highcharts.com




4.2. Summary This section contains a summary of the combined results for the five landing pages.






of the mean Median










of the mean Median








38

All pages

Milliseconds

Visual Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2500 3000 35002000 4000 4500 5000 5500 6000 6500 7000 7500

Highcharts.com


First Paint



of the mean Median










of the mean Median











of the mean Median







Fallback Font Stage



of the mean Median









Milliseconds


Figure 4.11: Box plot of the visual metrics data from the network traces for page 1-5.

39






of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median







Table 4.34: Time to stylesheets parsed.


Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median









Stylesheets parsed



of the mean Median







Subset fonts loaded



of the mean Median







All fonts loaded



of the mean Median








40

Milliseconds

Resource Metrics

CFOFT Preload V1

CFOFT Preload V2

CFOFT Push




2000 2500 300015001000 3500 4000 4500 5000 5500 6000 6500 7000 7500

Highcharts.com



Figure 4.12: Box plot of the resource metrics data from the network traces for pages 1-5.

41

5. Analysis This chapter covers a data analysis and a conclusion on how each font loading strategy performed, and how they compare. Table 5.1 and Table 5.2 show the performance difference, in seconds and percentage, for each landing page in comparison to the non-optimized version, i.e., the default way of loading web fonts. Figure 5.11 on page 50 is a visual example of the average loading times for the non-optimized version, complementary to Table 5.1 on page 48.

5.1. StrategiesThis section analyses how the five selected strategies performed compared to the default lazy-loading of web fonts. For all strategies, the visual metrics; First Paint and/or First web font stage is equivalent to the First Meaningful Paint, since the subset roman web font content is available to the user as well as all other text (in a synthesized version).

5.1.1. Critical FOFT with Preload V1 (Strategy 1)Preloading only the critical subset web font(s) improved the first web font stage by ≈ 33% on average. This percentage improvement indicates that the first web font content was visible around 1.6 seconds earlier on average than the non-optimized version. Strategy 1 reduced the time to First Paint by an average of 5% (see Figure 5.1 and Table 5.1).


Strategy 1 - Critical FOFT with Preload V1

3.22s 4.82s0s

Percentage

-32.98%

-3.41%

-5.28%

LOGO LOGO

Figure 5.1: A visual example of the average loading times for strategy 1 - Complementary to Table 5.1.

42

5.1.2. Critical FOFT with Preload V2 (Strategy 2)The second strategy never used the subset web font files for any of the five landing pages (see Figure 5.2). The reason being that all other web fonts loaded faster than the client could parse the stylesheets (see Table 5.2). Therefore, the performance metrics for the first web font stage are listed as Not Available (N/A). Preloading all web fonts had a negative impact on the First Paint for pages 1, 3 and 5. Critical FOFT with Preload V2 appears to be very page-individual and can delay the First Paint by 7% (or more). A sacrifice in the initial render is not worth having all the web fonts available earlier. All other strategies performed better for the First Paint, hence this strategy should be used with caution.


Strategy 2 - Critical FOFT width preload V2

Percentage

3.48s0s

-30.25%

+2.23%

LOGO


5.1.3. Critical FOFT with HTTP/2 Server Push (Strategy 3)Pushing the subset roman web font(s) and render-critical resources, without preloading any web fonts, turned out to be the most unreliable strategy of the five. Sporadically there was a time difference between the First Paint and the first web font stage (see Figure 4.11 and Figure 5.3), which means that a fallback font was used until the first web font content was ready, i.e., Flash of Unstyled Text (FOUT). Flash of Unstyled Text can produce a slightly jarring experience to the user when the fallback font is replaced with the web font [6]. The first web content was visible around 1.6 seconds earlier on average than the non-optimized version, i.e., an improvement of ≈ 33%.

43

-33.73%

-2.69%

-19.40%


Strategy 3 - Critical FOFT width Push

2.74s 3.19s0s 4.85s

PercentageLOGO LOGO LOGO

Figure 5.3: A visual example of the average loading times for strategy 3 - Complementary to Table 5.1. (The First Paint displays a fallback font, and does not contain any web fonts).

5.1.4. Critical FOFT with HTTP/2 Server Push and Preload (V1) (Strategy 4)

Strategy 4 improved the first web font stage by 45% on average (≈2.2 seconds), and the First Paint was rendered 22.8% faster on average (≈770 ms). The time to the second web font stage was improved by 14% (≈700 ms) on average (see Figure 5.4 and Table 5.1).

Strategy 4 - Critical FOFT width Push and Preload V1

Percentage

-45.40%

-14.18%

-22.84%


2.63s 4.28s0s

LOGO LOGO


44

5.1.5. Critical FOFT with HTTP/2 Server Push and Preload (V2) (Strategy 5)

Strategy 5 performed similarly to strategy 4, with the main difference that the time to the second web font stage was further improved. Compared to the non-opti-mized version it reached the second web font stage 31% faster on average (≈1.5 seconds) (see Figure 5.5 and Table 5.1).

Strategy 5 - Critical FOFT width Push and Preload V2

Percentage

-45.43%

-31.12%

-22.88%


2.62s 3.44s0s

LOGO LOGO


5.2. Statistical AnalysisThe one-way analysis of variance (ANOVA) with an alpha level (α) = 0.05 was used to determine whether or not there was a statistically significant difference between the means for each performance metric and strategy. If the probability value (p-value) is less than or equal to the alpha (p ≤ .05) the null hypothesis is rejected and the result is interpreted as statistically significant. One of the assumptions of ANOVA is that all sample groups have the same variance [29]. The Levene test was used to test the homogeneity of variances for all groups. When the homogeneity of variances assumption was not met, the Welch’s Test, a robust test of equality of the mean, was used to obtain a more accurate probability value.

5.2.1. Post HocOne-way-ANOVA only establishes if there is a difference in the means somewhere amongst the sample groups, it does not tell where the difference lies. Post hoc analyses were conducted to investigate which pairwise comparison, i.e., which strategies that had a statistically significant difference in the means for each

45

performance metric. When the sample groups had equal variance the Tukey’s honestly significant difference (HSD) post hoc test was used. Otherwise, Dunnett’s post hoc test was used. All results from the statistical tests can be found in Appendix B.

5.2.2. HTTP/2 Server Push vs HTTP/2 PreloadPost hoc revealed that Critical FOFT with Preload V1 (strategy 1) performed better than Critical FOFT with Server Push (strategy 3) when delivering the first web font content for page 2, 3, and 5, and worse for page 1 and 4 (see Appendix B). On average, there was a very small difference in time to the first web font stage between strategy 1 and 3 (< 40ms) (see Figure 5.6 and Table 5.1).

First web font stage (Average time in milliseconds)

3224 3188

Firs

t web

font

sta

ge in

mill

isec

onds

0

1000

2000

3000

4000

Strategy 1 (Preload) Strategy 3 (Push)

Figure 5.6: First web font stage (average time in ms) Preload vs. Push - Complementary to Table 5.1.

Strategy 2 (Critical FOFT with Preload V2) never displayed the subset roman web fonts, resulting in a slower delivery of the first web font content to the user’s screen. When performing a statistical test that combined the first web font stage metrics from all pages (and comparing strategy 1 and 3 with a post hoc test), it was revealed that strategy 1 and 3 did not have a statistically significant difference for the first web font stage; F(3, 296) = 197.168 p < .05 (see Appendix B page 108). The second web font stage for strategy 1 and 3, was neither improved nor delayed because there was no statistically significant difference compared to using no strategy (see Figure 5.7 and Table 5.1).

46

Second web font stage (Average time in milliseconds)

4818

3479

4854 4988

Seco

nd w

eb fo

nt s

tage

in m

illis

econ

ds

0

1000

2000

3000

4000

5000

Strategy 1 (Preload)

Strategy 2 (Preload)

Strategy 3 (Push)

No Strategy

Push vs preload sws

Figure 5.7: Second web font stage (average time in ms) Preload vs. Push - Complementary to Table 5.1.

Strategy 2 performed better than strategies 1 and 3 when delivering all the web fonts to the user's screen. However, preloading all web fonts had a negative impact on the First Paint for pages 1, 3 and 5 and a sacrifice in the initial render is not worth having all the web fonts available earlier. Strategy 2 can therefore not be seen as a better strategy than strategy 1 and 3. The above findings result in the conclusion that HTTP/2 Server Push, on its own, is not a more performance efficient resource prioritization approach than preload when it comes to delivering web font content to the client.

5.2.3. HTTP/2 Server Push used together with HTTP/2 PreloadAs seen in section 5.1.4 and 5.1.5, using push together with preload, was the most performance efficient approach for delivering web font content to the client (see Chapter 5.3 for a visual comparison against the other strategies). Interestingly, there was no statistically significant difference between strategy 4 and 5 for the time to First Paint (see Appendix B). Which means that preloading more web fonts did not aggravate the time to First Paint, but did benefit the second web font stage.

47

5.3. Visual summary (Column charts)This section visualizes how the strategies compared against each other as well as against the non-optimized version, with the help of column charts. All values are listed in milliseconds.

First Paint (Average time in milliseconds)

32243479

2743 2626 2624

3404

Firs

t Pai

nt in

mill

isec

onds

0

1000

2000

3000

4000

Strategy 1 Strategy 2 Strategy 3 Strategy 4 Strategy 5 No Strategy

First Paint (ms)

Figure 5.8: First Paint (average time in ms) - Complementary to Table 5.1.

First web font stage (Average time in milliseconds)

3224 31882626 2624

4810

Firs

t web

font

sta

ge in

mill

isec

onds

0

1000

2000

3000

4000

5000


First web font stage (ms)

Figure 5.9: First web font stage (average time in ms) - Complementary to Table 5.1. N/A = Not Available.

Second web font stage (Average time in milliseconds)

4818

3479

4854

4281

3436

4988

Seco

nd w

eb fo

nt s

tage

in

0

1000

2000

3000

4000

5000


ms

Figure 5.10: Second web font stage (average time in ms) - Complementary to Table 5.1.

N/A

48

All PagesVisual Metrics

Strategy First Paint First web font stage Second web font stage

1) Critical FOFT Preload V1 Mean Sig.Pct. Mean Sig.Pct. Mean Sig.Pct.

Page 1: 3.34s Yes*-4.47% 3.34s Yes*-25.71% 4.57s No*-0.97%

Page 2: 3.22s Yes*-4.57% 3.22s Yes*-23.02% 4.72s Yes*+10.76%


Page 4: 3.25s Yes*-7.27% 3.25s Yes*-31.95% 3.53s Yes*-27.31%


Average all pages: 3.22s Yes*-5.28% 3.22s Yes*-32.98% 4.82s No*-3.41%

2) Critical FOFT Preload V2

Page 1: 3.68s Yes*+5.35% N/A N/AN/A 3.68s Yes*-20.34%

Page 2: 3.40s No*+0.72% N/A N/AN/A 3.40s Yes*-20.28%


Page 4: 3.37s Yes*-3.97% N/A N/AN/A 3.37s Yes*-30.74%


Average all pages: 3.48s Yes*+2.23% N/A N/AN/A 3.48s Yes*-30.25%

3) Critical FOFT Push






Average all pages: 2.74s Yes*-19.40% 3.19s Yes*-33.73% 4.85s No*-2.69%

4) Critical FOFT Push and Preload V1






Average all pages: 2.63s Yes*-22.84% 2.63s Yes*-45.40% 4.28s Yes*-14.18%







Average all pages: 2.62s Yes*-22.88% 2.62s Yes*-45.43% 3.44s Yes*-31.12%

No Font Loading Strategy (Default)

Page 1: 3.49s 4.49s 4.62s

Page 2: 3.37s 4.18s 4.26s

Page 3: 3.56s 6.55s 6.96s

Page 4: 3.50s 4.78s 4.86s

Page 5: 3.08s 4.05s 4.24s

Average all pages: 3.40s 4.81s 4.99s

* Compared to No Font Loading Strategy (Default)

Visual Metrics

Table 5.1: Visual Metrics; mean difference, percentage difference, and statistical significance compared to the default web font loading behavior. The mean values are listed in seconds. Green color with a minus sign indicates a faster performance, and red color with a plus sign indicates a slower performance. N/A = Not Available.

49

Resource Metrics

Strategy Stylsheets parsed Subset fonts loaded All web fonts loaded

1) Critical FOFT Preload V1 Mean Sig.Pct. Mean Sig.Pct. Mean Sig.Pct.

Page 1: 2.56s Yes*+1.58% 2.21s N/AN/A 4.29s Yes*-4.80%

Page 2: 2.45s No*+0.65% 2.19s N/AN/A 4.09s Yes*+3.94%

Page 3: 2.57s Yes*-2.98% 2.27s N/AN/A 6.65s Yes*-1.81%

Page 4: 2.31s No*-0.02% 2.11s N/AN/A 3.29s Yes*-30.78%


Average all pages: 2.43s No*-0.05% 2.18s N/AN/A 4.47s No*-7.10%

2) Critical FOFT Preload V2






Average all pages: 2.70s Yes*+10.99% 2.26s N/AN/A 2.63s Yes*-45.32%

3) Critical FOFT Push

Page 1: 1.96s Yes*-22.21% 2.43s N/AN/A 4.51s Yes*+0.21%





Average all pages: 1.84s Yes*-24.16% 2.47s N/AN/A 4.50s No*-6.46%







Average all pages: 1.90s Yes*-21.61% 1.67s N/AN/A 3.96s Yes*-17.63%







Average all pages: 1.90s Yes*-21.69% 1.66s N/AN/A 3.07s Yes*-36.20%

No Font Loading Strategy (Default)

Page 1: 2.52s N/A 4.50s

Page 2: 2.43s N/A 3.93s

Page 3: 2.65s N/A 6.78s

Page 4: 2.31s N/A 4.75s

Page 5: 2.23s N/A 4.09s

Average all pages: 2.43s N/A 4.81s

* Compared to No Font Loading Strategy (Default)

Resource Metrics

Table 5.2: Resource Metrics; mean difference, percentage difference, and statistical significance compared to the default web font loading behavior. The mean values are listed in seconds. Green color with a minus sign indicates a faster performance, and red color with a plus sign indicates a slower performance. N/A = Not Available.

50

No Strategy - Default lazy-loading

3.40s 4.81s 4.99s0s


LOGO

Figure 5.11: A visual example of the average loading times for the non-optimized version - Complementary to Table 5.1.

6. DiscussionAll the evaluated font loading strategies in this degree project improved the time it took to deliver the first web font content to the user’s screen (see Table 5.1 and Chapter 5.3). As a result, a faster First Meaningful Paint (FMP) was attained. Figure 5.11 shows the loading stages for the unoptimized version where the FMP is not present until 4.99 seconds on average, compare this to the figures included in Chapter 5.1 where the FMP is already available at the First Paint. Additionally, the First Paint was 180 ms faster on average for strategy 1, 660 ms faster on average for strategy 3, and 770 ms faster on average for strategy 4 and 5 compared to the non-optimized version (see Figure 5.8). Strategy 2 was the only strategy that negatively impacted the first paint (75 ms slower on average, 230 ms slower for page 5). The first web font content was visible around 1.6 seconds faster on average for strategy 1 and 3, and around 2.2 seconds faster for strategy 4 and 5 compared to the non-optimized version (see Figure 5.9). For strategy 2 the first web font content was visible around 1.3 seconds faster on average (i.e., all web fonts were visible earlier than the first web fonts appeared for the unoptimized version). Strategy 2, 4 and 5 reduced the time it took to load and render all web fonts on the client side (1.5 seconds on average for strategy 2, 700 ms on average for strategy 4 and 1.5 seconds on average for strategy 5). These results are consonant with Grigorik’s statement that optimized web fonts combined with a judicious font loading strategy can improve page rendering times [11]. When looking at the page characteristics (see section 2.1.3.2 on page 16) the deviations that stand out the most is the number of image requests (see Figure

51

3.1), the size of JavaScript (see Figure 3.3), and the number of characters used per page (see Figure 3.4). For example, page 3 made 65 requests for images, and one might hypothesize that this is the cause of the distinct difference in time for the first web fonts to appear on page 3 (see No Font Loading Strategy in Table 5.1 where the first web font stage is around 2 seconds behind the other pages). When examining the network traces, the delay is rather caused by page 3 using a large web font for their logotype (aleo-regular-400.woff2 (23.4KB)). The logotype that used the Aloe web font was placed high up on the page so the browser made a request for this web font earlier, resulting in a longer process time before it could render the first web fonts. This indicates that using a strategy is extra beneficial for pages where large web fonts are requested before other web fonts that might be smaller in file size. One can also hypothesize that the number of characters for page 2 (a total of 7051 characters - see Figure 3.4) might be causing the page to render the web fonts slower, but this is more likely a consequence of page 2 having the largest amount of render-blocking CSS and JavaScript. Especially since render-blocking resources is one of the main reasons that causes web fonts to be lazy-loaded [11]. Also, page 1 is using the least amount of characters (only 1074 characters - see Figure 3.4) and should hypothetically be the fastest page when rendering web fonts, but this is not the case (see Table 5.1). Improving the loading of web fonts can be a very intricate process. Depending on the target audience and their web browser, server push will not be the best option. Archibald, a developer advocate for Google Chrome, reported a bug in Safari which indicates that sometimes the browser will not retrieve the resources from the push cache [47], a behavior that will counteract the benefits of push and may result in a slower page load time [28]. One can approach this problem by using user agent sniffing on the server side and avoid pushing resources to Safari users [28]. In theory, strategy 4 (see 2.1.1) combined with user agent sniffing that prevents the server from pushing to Safari users, should result in Chrome and Firefox users getting the benefits of push and preload, and Safari users receiving the equivalent performance enhancements of strategy 1 (see 5.1.1). Due to push being inconsistent across browsers [28], Critical FOFT with Preload V1 (strategy 1) should be considered as the most reliable strategy that was evaluated in this project. The font loading strategies that only use preload are also the easiest to implement since no server-side configuration is needed to load the web fonts. The findings in this degree project have yet to be confirmed to be valid when testing the font loading strategies on actual mobile devices with real network conditions. Further, these results might only be relevant for a short period of time since technology advances and the network conditions get better over time.

52

7. ConclusionThis paper gives insight into how HTTP/2 Server Push and HTTP/2 Preload can be used to improve the delivery of web fonts for first-time visitors (see chapter 4 and 5). It was discovered that HTTP/2 Server Push, on its own, is not a more performance efficient resource prioritization approach than HTTP/2 Preload, in the context of delivering web font content (see section 5.2.2), which answers RQ1: Is HTTP/2 Server Push a more performance efficient resource prioritization approach than HTTP/2 Preload, in the context of optimizing the delivery of web font content? The second research question was: Are the resource prioritization app-roaches HTTP/2 Server Push and HTTP/2 Preload more efficient if used together, in the context of optimizing the delivery of web font content? The answer to RQ2 is the following: Using HTTP/2 Server Push in conjunction with HTTP/2 Preload appears to be the most performance efficient approach for improving the loading time of web fonts (see section 5.2.3). The third research question was: How do the font loading strategies listed in 2.1.1 compare to the default web font loading behavior? The answer to RQ3 is the following: All the evaluated font loading strategies in this degree project improved the time it took to deliver the first web font content to the user’s screen. The best performing strategies were strategy 5, 4 and 1 (see Chapter 5 "Analysis" for a more comprehensive answer to RQ3). This degree project shows that there are multiple font loading strategies that can improve the loading of web font content to the client, resulting in a faster First Meaningful Paint. This is relevant for the web industry, particularly for performance-conscious web developers. However, all conclusions in this paper are based on the results gathered from testing the strategies in an emulated environment and are yet to be confirmed on real mobile devices with genuine network conditions.

7.1. Future WorkBefore the font loading strategies can be established to be as efficient as they appear to be from the analyses in chapter 5, they must be tested on physical mobile devices with real network conditions. Further research should also be conducted on how the strategies perform on faster networks, as well as using different web servers. This degree project was restricted to improving the web font loading performance for first-time visitors and it is uncertain how the evaluated font loading strategies perform for recurring visitors. One of the limitations of HTTP/2 Server Push is not knowing about the client’s cache state. Pushing resources that

53

already are cached on the client can end up being detrimental to performance [48][28]. This will hopefully improve in the near future since there is a proposed solution to this problem called Cache Digests [49]. A future alternative to HTTP/2 Server Push is 103 (Early Hints) which is an experimental HTTP response status code that gives similar benefits as Server Push [50]. Early Hints is much simpler compared to push and provides more efficient use of the network [48]. Further, the browser gets to decide what it has in its cache and will only get the critical resources if they are needed. However, Early Hints is not yet available in web browsers, but there is an intent to implement it in Chrome [51] and Firefox [52]. Once Early Hints becomes available in modern browsers it would be interesting to research how it compares to HTTP/2 Server Push and HTTP/2 Preload when delivering web font content to the user.

54

References[1] “Desktop vs Mobile vs Tablet Market Share Worldwide”, StatCounter Global Stats, 2019. [Online]. Available: http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/#monthly-201903-201903-bar [Accessed: 01- Apr- 2019]

[2] “The need for mobile speed: How mobile latency impacts publisher revenue”, 2016. [Online]. Available: https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/. [Accessed: 28- Sep-2018].

[3] “Amazon sees a 1% decrease in revenue for every 100ms increase in load time.”, Wpostats.com, 2018. [Online]. Available: https://wpostats.com/2015/10/29/amazon-1-percent.html. [Accessed: 01- 01- Oct- 2018].

[4] “Find Out How You Stack Up to New Industry Benchmarks for Mobile Page Speed”, Think with Google, 2018. [Online]. Available: https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/. [Accessed: 01- Oct- 2018].

[5] “Page Weight”, Httparchive.org, 2019. [Online]. Available: https://httparchive.org/reports/page-weight?start=2018_12_01&end=2019_02_01&view=list. [Accessed: 21- Mar- 2019].

[6] B. Stein, WEBFONT HANDBOOK, 1st ed. New York, New York: Jeffrey Zeldman. A Book Apart., 2017, pp. 33-34, 59.

[7] Z. Leatherman, “A Comprehensive Guide to Font Loading Strategies—zachleat.com”, zachleat.com, 2016. [Online]. Available: https://www.zachleat.com/web/comprehensive-webfonts/#critical-foft-preload. [Accessed: 1- Oct- 2018].

[8] Z. Leatherman, “The Web Fonts: Preloaded—zachleat.com”, Zach Leatherman, 2018. [Online]. Available: https://www.zachleat.com/web/preload/. [Accessed: 01- Oct- 2018].

[9] P. Walton, “User-centric Performance Metrics | Web Fundamentals | Google Developers”, Google Developers, 2018. [Online]. Available: https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics. [Accessed: 12- Oct- 2018]

[10] “@font-face”, MDN Web Docs, 2018. [Online]. Available: https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face. [Accessed: 26- Mar- 2018].

[11] I. Grigorik, “Web Font Optimization | Web Fundamentals | Google Developers”, Google Developers, 2018. [Online]. Available: https://developers.google.com/web/fundamentals/performance/optimizing-content-efficiency/webfont-optimization. [Accessed: 14- Oct- 2018]

[12] “First Meaningful Paint | Tools for Web Developers | Google Developers”, Google Developers, 2018. [Online]. Available: https://developers.google.com/web/tools/lighthouse/audits/first-meaningful-paint. [Accessed: 11- Oct- 2018]

[13] “CSS Fonts Module Level 4 - Font Rendering Controls”, W3.org, 2018. [Online]. Available: https://www.w3.org/TR/css-fonts-4/#font-rendering-controls-introduction. [Accessed: 28- Sep- 2018]

[14] Z. Leatherman, “The Web Font Loading Glossary—zachleat.com”, Zach Leatherman, 2018. [Online]. Available: https://www.zachleat.com/web/webfont-glossary/#fout. [Accessed: 01- Oct- 2018].

[15] I. Grigorik and Y. Weiss, “Preload”, W3c.github.io, 2018. [Online]. Available: https://w3c.github.io/preload/. [Accessed: 18- Oct- 2018].

[16] M. Belshe, R. Peon and M. Thomson, “RFC 7540 - Hypertext Transfer Protocol Version 2 (HTTP/2)”, Tools.ietf.org, 2018. [Online]. Available: https://tools.ietf.org/html/rfc7540#section-10.1. [Accessed: 20- Oct- 2018].

http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/#monthly-201903-201903-bar

http://gs.statcounter.com/platform-market-share/desktop-mobile-tablet/worldwide/#monthly-201903-201903-bar

https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/

https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/research-data/need-mobile-speed-how-mobile-latency-impacts-publisher-revenue/

https://wpostats.com/2015/10/29/amazon-1-percent.html

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

https://www.thinkwithgoogle.com/marketing-resources/data-measurement/mobile-page-speed-new-industry-benchmarks/

https://httparchive.org/reports/page-weight?start=2018_12_01&end=2019_02_01&view=list

https://httparchive.org/reports/page-weight?start=2018_12_01&end=2019_02_01&view=list

https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

https://developers.google.com/web/fundamentals/performance/user-centric-performance-metrics

mailto:https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face?subject=

mailto:https://developer.mozilla.org/en-US/docs/Web/CSS/%40font-face?subject=

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

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

https://www.w3.org/TR/css-fonts-4/#font-rendering-controls-introduction

https://www.zachleat.com/web/webfont-glossary/#fout

https://w3c.github.io/preload/

https://w3c.github.io/preload/

https://tools.ietf.org/html/rfc7540#section-10.1

https://tools.ietf.org/html/rfc7540#section-10.1

55

[17] T. Bergan, S. Pelchat and M. Buettner, "Rules of Thumb for HTTP/2 Push", Google Docs, 2016. [Online]. Available: https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit. [Accessed: 12- Oct- 2018]

[18] S. Jehl and L. Zach, “How We Load Web Fonts Progressively | Filament Group, Inc., Boston, MA”, Filament Group, 2015. [Online]. Available: https://www.filamentgroup.com/lab/font-events.html. [Accessed: 03- Nov- 2018].

[19] “Can I use Resource Hints: preload”, Caniuse.com, 2018. [Online]. Available: https://caniuse.com/#search=preload. [Accessed: 07- Feb- 2019].

[20] T. Zimmermann, J. Rüth, B.Wolters, and O. Hohlfeld, “How HTTP/2 Pushes the Web: An Empirical Study of HTTP/2 Server Push”, 2017.

[21] M. Wijnants, P. Quax, R. Marx, and W. Lamotte, “HTTP/2 Prioritization and its Impact on Web Performance”, 2018.

[22] S. Rosen, B. Han, S. Hao, Z. Morley Mao, and F. Qian, “Push or Request: An Investigation of HTTP/2 Server Push for Improving Mobile Performance”, 2017.

[23] “Loading Speed”, Httparchive.org, 2019. [Online]. Available: https://httparchive.org/reports/loading-speed?start=2018_12_15&end=2019_02_01&view=list. [Accessed: 21- Mar- 2019].

[24] E. Fullerton, Performance Matters: 9 Key Consumer Insights. Akamai Technologies, 2014, p. 8.

[25] “HTTP Archive Mobile - Interesting Stats”, Mobile.httparchive.org, 2019. [Online]. Available: https://mobile.httparchive.org/interesting.php?a=All&l=Feb%201%202019. [Accessed: 21- Mar- 2019].

[26] “HTTP Archive - Interesting Stats”, Legacy.httparchive.org, 2019. [Online]. Available: https://legacy.httparchive.org/interesting.php?a=All&l=Feb%201%202019. [Accessed: 21- Mar- 2019].

[27] N. Spalinger and V. Gaultney, “OFL web version”, Scripts.sil.org, 2007. [Online]. Available: https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web. [Accessed: 21- Oct- 2018].

[28] J. Archibald, “HTTP/2 push is tougher than I thought”, Jakearchibald.com, 2017. [Online]. Available: https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/. [Accessed: 21- Oct- 2018].

[29] “One-Way Analysis of Variance (ANOVA) Example Problem”, Cba.ualr.edu. [Online]. Available: http://cba.ualr.edu/smartstat/topics/anova/example.pdf. [Accessed: 02- Dec- 2018].

[30] T. Zimmermann, B. Wolters, O. Hohlfeld, and K. Wehrle, “Is the Web ready for HTTP/2 Server Push?”, 2018.

[31] “GoogleChrome/lighthouse”, GitHub. [Online]. Available: https://github.com/GoogleChrome/lighthouse/blob/8f500e00243e07ef0a80b39334bedcc8ddc8d3d0/lighthouse-core/config/constants.js#L19-L26. [Accessed: 02- Dec- 2018].

[32] “Express - Node.js web application framework”, Expressjs.com. [Online]. Available: https://expressjs.com/. [Accessed: 01- Oct- 2018].

[33] F. Indutny, “spdy-http2/node-spdy”, GitHub, 2015. [Online]. Available: https://github.com/spdy-http2/node-spdy. [Accessed: 01- Oct- 2018]

[34] “GoogleChrome/puppeteer”, GitHub, 2018. [Online]. Available: https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#overview. [Accessed: 01- Oct- 2018].

https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit

https://docs.google.com/document/d/1K0NykTXBbbbTlv60t5MyJvXjqKGsCVNYHyLEXIxYMv0/edit

https://www.filamentgroup.com/lab/font-events.html

https://www.filamentgroup.com/lab/font-events.html

https://caniuse.com/#search=preload

https://caniuse.com/#search=preload

https://httparchive.org/reports/loading-speed?start=2018_12_15&end=2019_02_01&view=list

https://httparchive.org/reports/loading-speed?start=2018_12_15&end=2019_02_01&view=list

https://mobile.httparchive.org/interesting.php?a=All&l=Feb%201%202019

https://legacy.httparchive.org/interesting.php?a=All&l=Feb%201%202019

https://scripts.sil.org/cms/scripts/page.php?site_id=nrsi&id=OFL_web

https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

http://cba.ualr.edu/smartstat/topics/anova/example.pdf

https://github.com/GoogleChrome/lighthouse/blob/8f500e00243e07ef0a80b39334bedcc8ddc8d3d0/lighthouse-



https://expressjs.com/

https://expressjs.com/

https://github.com/spdy-http2/node-spdy

https://github.com/spdy-http2/node-spdy

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#overview

https://github.com/GoogleChrome/puppeteer/blob/master/docs/api.md#overview

56

[35] “Chrome DevTools Protocol Viewer”, Chromedevtools.github.io, 2018. [Online]. Available: https://chromedevtools.github.io/devtools-protocol/. [Accessed: 01- Oct- 2018].

[36] P. Hamann, “To push, or not to push?! - The future of HTTP/2 server push - Patrick Hamann - JSConf EU 2018”, YouTube, 2018. [Online]. Available: https://www.youtube.com/watch?v=cznVISavm-k. [Accessed: 03- Nov- 2018].

[37] “Navigation Timing”, W3.org, 2012. [Online]. Available: https://www.w3.org/TR/navigation-timing/#dom-performancetiming-navigationstart. [Accessed: 05- Jan- 2019]

[38] ”Paint Timing 1”, W3.org, 2017. [Online]. Available: https://www.w3.org/TR/paint-timing/#first-paint. [Accessed: 06- Jan- 2019]

[39] “Umbrella Popularity List—Top Million Domains”, Docs.umbrella.com. [Online]. Available: https://docs.umbrella.com/investigate-api/docs/top-million-domains. [Accessed: 05- Jan- 2019]

[40] “website-scraper/node-website-scraper”, GitHub. [Online]. Available: https://github.com/website-scraper/node-website-scraper. [Accessed: 06- Jan- 2019]

[41] “WOFF File Format 2.0”, W3.org, 2018. [Online]. Available: https://www.w3.org/TR/WOFF2/. [Accessed: 06- Jan- 2019]

[42] M. Janaszek, “Test website performance with Puppeteer”, Michaljanaszek.com, 2017. [Online]. Available: https://michaljanaszek.com/blog/test-website-performance-with-puppeteer#extractDataFromNetworkTrace. [Accessed: 09- Jan- 2019]

[43] Z. Leatherman, “filamentgroup/glyphhanger”, GitHub. [Online]. Available: https://github.com/filamentgroup/glyphhanger. [Accessed: 07- Jan- 2019]

[44] “Trace Event Format”, Google Docs, 2019. [Online]. Available: https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit. [Accessed: 05- Jan- 2019]

[45] “ CSS Font Loading Module Level 3”, Drafts.csswg.org, 2018. [Online]. Available: https://drafts.csswg.org/css-font-loading/. [Accessed: 12- Dec- 2018]

[46] Z. Leatherman, “zachleat/web-font-loading-recipes”, GitHub. [Online]. Available: https://github.com/zachleat/web-font-loading-recipes/blob/master/critical-foft-preload.html. [Accessed: 09- Jan- 2019]

[47] Archibald, J. (2017). 172639 – Use of HTTP/2 push cache seems inconsistent. [online] Bugs.webkit.org. Available at: https://bugs.webkit.org/show_bug.cgi?id=172639 [Accessed 22 Mar. 2019].

[48] Noti.st. (2018). To push, or not to push?! by Patrick Hamann. [online] Available at: https://noti.st/patrickhamann/y2sScd#sBGvLzD. [Accessed 24 Mar. 2019].

[49] Oku, K. and Y. Weiss. (2018). draft-ietf-httpbis-cache-digest-05 - Cache Digests for HTTP/2. [online] Tools.ietf.org. Available at: https://tools.ietf.org/html/draft-ietf-httpbis-cache-digest-05 [Accessed 24 Mar. 2019].

[50] Oku, K. (2017). An HTTP Status Code for Indicating Hints. [online] Httpwg.org. Available at: https://httpwg.org/specs/rfc8297.html [Accessed 24 Mar. 2019].

[51] Bugs.chromium.org. (2016). 671310 - Support 103 Early Hints in HTTP/2. - chromium - Monorail. [online] Available at: https://bugs.chromium.org/p/chromium/issues/detail?id=671310 [Accessed 24 Mar. 2019].

[52] Bugzilla.mozilla.org. (2017). 1407355 - Implement 103 Early Hints. [online] Available at: https://bugzilla.mozilla.org/show_bug.cgi?id=1407355 [Accessed 24 Mar. 2019].

https://chromedevtools.github.io/devtools-protocol/

https://www.youtube.com/watch?v=cznVISavm-k

https://www.youtube.com/watch?v=cznVISavm-k

https://www.w3.org/TR/navigation-timing/#dom-performancetiming-navigationstart

https://www.w3.org/TR/navigation-timing/#dom-performancetiming-navigationstart

https://www.w3.org/TR/paint-timing/#first-paint

https://www.w3.org/TR/paint-timing/#first-paint

https://docs.umbrella.com/investigate-api/docs/top-million-domains

https://github.com/website-scraper/node-website-scraper

https://github.com/website-scraper/node-website-scraper

https://www.w3.org/TR/WOFF2/

https://www.w3.org/TR/WOFF2/

https://michaljanaszek.com/blog/test-website-performance-with-puppeteer#extractDataFromNetworkTrace

https://michaljanaszek.com/blog/test-website-performance-with-puppeteer#extractDataFromNetworkTrace

https://github.com/filamentgroup/glyphhanger

https://github.com/filamentgroup/glyphhanger

https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit

https://docs.google.com/document/d/1CvAClvFfyA5R-PhYUmn5OOQtYMH4h6I0nSsKchNAySU/edit

https://drafts.csswg.org/css-font-loading/

https://drafts.csswg.org/css-font-loading/

https://github.com/zachleat/web-font-loading-recipes/blob/master/critical-foft-preload.html

https://github.com/zachleat/web-font-loading-recipes/blob/master/critical-foft-preload.html

https://bugs.webkit.org/show_bug.cgi?id=172639

https://noti.st/patrickhamann/y2sScd#sBGvLzD

https://noti.st/patrickhamann/y2sScd#sBGvLzD

https://tools.ietf.org/html/draft-ietf-httpbis-cache-digest-05

https://httpwg.org/specs/rfc8297.html

https://bugs.chromium.org/p/chromium/issues/detail?id=671310

https://bugzilla.mozilla.org/show_bug.cgi?id=1407355

57

A. Page details and resource prioritization approaches Appendices A.1-A.5 include details about each page, i.e., the number of requests per resource and their sizes. They also list the web fonts that were used, as well as the preloaded/pushed resources for each strategy (including their transferred size).

A.1. Page 1Page 1 used two web font families; Merriweather and Source Sans Pro. The total page weight was ≈ 1.5MB. Table A.1 lists the details about the requests and resources for the unoptimized version of page 1. Figure A.2- Figure A.4 visualize the values from Table A.1.

PAGE 1Resource type Number of requests Transferred size KB Size KB

Doc (HTML) 1 13 48Images 19 873 924

CSS 2 29.9 209Javascript 7 143 247

Fonts 5 61.3 61.3Other 2 2.1 2.1

TOTAL 36 1122.3 1491.4

Table A.1: Information about the requests and resources for for page 1.

1

19

2

75

2

Resource type

Num

ber o

f req

uest

s

0

5

10

15

20

Doc (HTML) Images CSS Javascript Fonts Other

Number of requests vs. Resource type (Page 1)

Figure A.2: Number of requests vs. Resource type - Complementary column chart for "Table A.1: Information about the requests and resources for for page 1."

58

13

873

29.9143

61.32.1

Resource type

Tran

sfer

red

size

in k

iloby

tes

0

250

500

750

1000


Transferred size in kilobytes vs. Resource type (Page 1)

Figure A.3: Transfered size in kilobytes vs. Resource type - Complementary column chart for "Table A.1: Information about the requests and resources for for page 1."

48

924

209 247 61.32.1

Resource type

Size

in k

iloby

tes

0

250

500

750

1000


Size in kilobytes vs. Resource type (Page 1)

Figure A.4: Size in kilobytes vs. Resource type - Complementary column chart for "Table A.1: Information about the requests and resources for for page 1."

List of pushed and preloaded resources for page 1: Strategy 1 and 4: Preloaded resources

• merriweather-regular-400-subset.woff2 (4KB)• source-sans-pro-regular-400-subset.woff2 (3.4KB)

Strategy 2 and 5: Preloaded resources• merriweather-regular-400-subset.woff2 (4KB)• source-sans-pro-regular-400-subset.woff2 (3.4KB)• merriweather-regular-400.woff2 (11.8KB)• merriweather-bold-700.woff2 (11.7KB)

59

• source-sans-pro-regular-400.woff2 (12.7KB)• source-sans-pro-semi-bold-600.woff2 (12.7KB)• source-sans-pro-bold-700.woff2 (12.4KB)

Strategy 3, 4 and 5: Pushed resources • merriweather-regular-400-subset.woff2 (4KB)• source-sans-pro-regular-400-subset.woff2 (3.4KB)• site.min.css (27.4KB)• polyfills.min.js (4.19KB). • picturefill.min.js (5.06KB)

A.2. Page 2Page 2 used one web font family; Lato. The total page weight was ≈ 1.4MB. Table A.5 lists the details about the requests and resources for the unoptimized version of page 2. Figure A.6 - Figure A.8 visualize the values from Table A.5.


Doc (HTML) 1 25.3 81.8Images 11 532 532

CSS 3 30.2 164Javascript 9 177 599

Fonts 3 40.9 40.9Other 2 0.2 0.31

TOTAL 29 805.6 1418.01


1

11

3

9

32

Resource type

Num

ber o

f req

uest

s

0

2

4

6

8

10

12




60

25.3

532

30.2177

40.90.2

Resource type

Tran

sfer

red

size

in k

iloby

tes

0

200

400

600




81.8

532

164

599

40.90.31

Resource type

Size

in k

iloby

tes

0

200

400

600





• lato-regular-400-subset.woff2 (4KB)

Strategy 2 and 5: Preloaded resources• lato-regular-400-subset.woff2 (4KB)• lato-regular-400.woff2 (13.7KB)• lato-bold-700.woff2 (13.8KB)• lato-black-900.woff2 (13.4KB)

61

Strategy 3, 4 and 5: Pushed resources • lato-regular-400-subset.woff2 (4KB)• bootstrap.min.css (16.1KB)• home-responsive.css (13.1KB)• jquery.min.js (28.7KB)

A.3. Page 3Page 3 used two font families; Aleo and Lato. The total page weight was ≈ 1.3MB. This landing page had no render-blocking javascript; hence, only the subset fonts and the CSS file were pushed. Table A.9 lists the details about the requests and resources for the unoptimized version of page 3. Figure A.10- Figure A.12 visualize the values from Table A.9.


Doc (HTML) 1 15.6 72.4Images 65 648 813

CSS 2 20.8 143Javascript 3 70.2 207

Fonts 4 65.5 65.5Other 1 1.4 5.3

TOTAL 76 821.5 1306.2


1

65

2 3 4 1

Resource type

Num

ber o

f req

uest

s

0

20

40

60

80




62

15.6

648

20.870.2 65.5

1.4

Resource type

Tran

sfer

red

size

in k

iloby

tes

0

200

400

600

800




72.4

813

143207 65.5

5.3

Resource type

Size

in k

iloby

tes

0

250

500

750

1000





• aleo-regular-400-subset.woff2 (8.3KB)• lato-regular-400-subset.woff2 (4KB)

Strategy 2 and 5: Preloaded resources• aleo-regular-400-subset.woff2 (8.3KB)• lato-regular-400-subset.woff2 (4KB)• aleo-regular-400.woff2 (23.4KB)• lato-regular-400.woff2 (13.7KB)• lato-italic-400.woff2 (14.5KB)• lato-bold-700.woff2 (13.9KB)

63

Strategy 3, 4 and 5: Pushed resources • aleo-regular-400-subset.woff2 (8.3KB)• lato-regular-400-subset.woff2 (4KB)• landing.css (19.6KB)

A.4. Page 4Page 4 used one web font family; Open Sans. The total page weight was ≈ 2.2MB. The main HTML file was 8.5KB in transfer size. Table A.13 lists the details about the requests and resources for the unoptimized version of page 4. Figure A.14- Figure A.16 visualize the values from Table A.13. Page 4 used an icon font in addition to their web fonts, and it was embedded in one of their CSS files. This icon font was extracted from the CSS file and converted to a .woff2 file, and loaded last via CSS Font Loading API. This was done so that the CSS file ‘dashicons.min.css’ would not block the initial render.


Doc (HTML) 3 43 143Images 15 1400 1400

CSS 3 12.7 68.4Javascript 3 174 601

Fonts* 4 46 46Other 2 1.8 4.6

TOTAL 30 1677.5 2263* 1 icon font included


3

15

3 34

2

Resource type

Num

ber o

f req

uest

s

0

5

10

15




64

43

1400

12.7174

46 1.8

Resource type

Tran

sfer

red

size

in k

iloby

tes

0

500

1000

1500




143

1400

68.4

601

46 4.6

Resource type

Size

in k

iloby

tes

0

500

1000

1500




List of pushed and preloaded resources for page 4:Strategy 1 and 4: Preloaded resources

• open-sans-regular-400-subset.woff2 (3.1KB)

Strategy 2 and 5: Preloaded resources• open-sans-regular-400-subset.woff2 (3.1KB)• open-sans-regular-400.woff2 (8.8KB)• open-sans-light-300.woff2 (8.6KB)• open-sans-semi-bold-600.woff2 (8.8KB)

Strategy 3, 4 and 5: Pushed resources • open-sans-regular-400-subset.woff2 (3.1KB)• dashicons.min.css (2.17KB)

65

• wp4.css (9.32KB)• jquery.js (32.8KB)

A.5. Page 5Page 5 used one web font family; Lato. The total page weight was ≈ 2.3MB. Table A.17 lists the details about the requests and resources for the unoptimized version of page 5. Figure A.18- Figure A.20 visualize the values from Table A.17. Page 5 had no render-blocking javascript; hence, only the subset font and the CSS file were pushed.


Doc (HTML) 1 6.5 27.7Images 14 1300 1300

CSS 2 24.3 137Javascript 2 52.6 204

Fonts 4 55.3 55.3Other 5 219 542

TOTAL 28 1657.7 2266


1

14

2 2

45

Resource type

Num

ber o

f req

uest

s

0

5

10

15




66

6.5

1300

24.3 52.6 55.3219

Resource type

Tran

sfer

red

size

in k

iloby

tes

0

500

1000

1500




27.7

1300

137 20455.3

542

Resource type

Size

in k

iloby

tes

0

500

1000

1500




List of pushed and preloaded resources for page 5:Strategy 1 and 4: Preloaded resources

• lato-regular-400-subset.woff2 (4KB)

Strategy 2 and 5: Preloaded resources• lato-regular-400-subset.woff2 (4KB)• lato-regular-400.woff2 (13.7KB)• lato-regular-italic-400.woff2 (14.5KB)• lato-bold-700.woff2 (13.8KB)• lato-bold-900.woff2 (13.3KB)

Strategy 3, 4 and 5: Pushed resources • lato-regular-400-subset.woff2 (4KB)• website.min.css (23.3KB)

Test of Homogeneity of Variances

df1 df2 Sig.Levene 5 84 0.852*

*Is not significant = Equal Variance

AnovaSource SS df MS F Sig.

Between Groups 10333378.12 5 2066675.62 1458.036 0.000*

Within Groups 119064.76 84 1417.44

Total 10452442.88 89

*Is significant

Sum of Squares (SS), Degrees of Freedom(df), Mean Square (MS)

Page 1

Visual Metrics

Page 1: First PaintCompared strategies: Strategy 1, Strategy 2, Strategy 3, Strategy 4, Strategy 5, No Strategy

Tukey's HSD Post Hoc Test

Absolute

Difference CriticalRange

StatisticallySignificant*

Critical FOFT Preload V1 VS Critical FOFT Preload V2 342.953 40.095 YesCritical FOFT Preload V1 VS Critical FOFT Push 386.473 40.095 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V1 519.099 40.095 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 520.969 40.095 YesCritical FOFT Preload V1 VS No Font Loading Strategy 156.174 40.095 YesCritical FOFT Preload V2 VS Critical FOFT Push 729.426 40.095 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V1 862.052 40.095 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 863.923 40.095 YesCritical FOFT Preload V2 VS No Font Loading Strategy 186.780 40.095 YesCritical FOFT Push VS Critical FOFT Push and Preload V1 132.626 40.095 YesCritical FOFT Push VS Critical FOFT Push and Preload V2 134.496 40.095 YesCritical FOFT Push VS No Font Loading Strategy 542.647 40.095 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 1.871 40.095 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 675.273 40.095 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 677.143 40.095 Yes

*Is significant when the absolute difference between two means is greater than the critical range

Comparison - First Paint

67

B. Statistical Analysis ResultsAppendix B contains the results from the statistical tests.

B.1. Page 1





Between Groups 10333378.12 5 2066675.62 1458.036 0.000*

Within Groups 119064.76 84 1417.44

Total 10452442.88 89

*Is significant


Page 1

Visual Metrics



Absolute






68



*Is significant = Unequal Variance


Between Groups 3240084.66 3 1080028.22 423.286 0.000*

Within Groups 142885.97 56 2551.54

Total 3382970.63 59

*Is significant

Page 1: First Web Font StageCompared strategies: Strategy 1, Strategy 4, Strategy 5, Strategy 3

Robust test of equality of the mean.

F-value df1 df2 Sig.Welch 856.402 3 29.877 0.000*

*Is significant

Dunnett's Post Hoc Test

Absolute



Critical FOFT Preload V1 VS Critical FOFT Push 128.473 44.452 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push 390.625 44.452 YesCritical FOFT Push and Preload V2 VS Critical FOFT Push 392.496 44.452 Yes


Comparison - First Web Font Stage





Between Groups 28067008.75 3 9355669.58 7317.956 0.000*

Within Groups 71593.42 56 1278.45

Total 28138602.16 59

*Is significant

Compared strategies: Strategy 4, Strategy 5, Strategy 1, No Strategy


Absolute



Critical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 1.871 34.571 NoCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 519.099 34.571 YesCritical FOFT Push and Preload V1 VS No Font Loading Strategy 1673.894 34.571 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 520.969 34.571 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1675.765 34.571 YesCritical FOFT Preload V1 VS No Font Loading Strategy 1154.795 34.571 Yes







Between Groups 27041108.32 4 6760277.08 1312.675 0.000*

Within Groups 360500.11 70 5150.00

Total 27401608.43 74

*Is significant

Page 1: Second Web Font StageCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute



Critical FOFT Preload V1 VS Critical FOFT Push 197.356 65.511 YesCritical FOFT Preload V2 VS Critical FOFT Push 1092.119 65.511 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push 748.707 65.511 YesCritical FOFT Push and Preload V2 VS Critical FOFT Push 1654.672 65.511 Yes


Comparison - Second Web Font Stage





Between Groups 16813234.39 3 5604411.46 3259.690 0.000*

Within Groups 96281.26 56 1719.31

Total 16909515.65 59

*Is significant

Compared strategies: Strategy 2, Strategy 4, Strategy 5, Strategy 1



*Is significant


Absolute



Critical FOFT Preload V2 VS Critical FOFT Preload V1 894.763 36.489 YesCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 551.352 36.489 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 1457.316 36.489 Yes



69





Between Groups 3240084.66 3 1080028.22 423.286 0.000*

Within Groups 142885.97 56 2551.54

Total 3382970.63 59

*Is significant




*Is significant


Absolute










Between Groups 28067008.75 3 9355669.58 7317.956 0.000*

Within Groups 71593.42 56 1278.45

Total 28138602.16 59

*Is significant



Absolute










Between Groups 27041108.32 4 6760277.08 1312.675 0.000*

Within Groups 360500.11 70 5150.00

Total 27401608.43 74

*Is significant




*Is significant


Absolute










Between Groups 16813234.39 3 5604411.46 3259.690 0.000*

Within Groups 96281.26 56 1719.31

Total 16909515.65 59

*Is significant




*Is significant


Absolute






70





Between Groups 6275843.95 2 3137921.98 1546.164 0.000*

Within Groups 85238.51 42 2029.49

Total 6361082.47 44

*Is significant

Compared strategies: Strategy 4, Strategy 5, Strategy 2



*Is significant


Absolute



Critical FOFT Push and Preload V1 VS Critical FOFT Preload V2 343.411 37.670 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V2 562.553 37.670 Yes







Between Groups 6155786.21 1 6155786.21 2521.430 0.582

Within Groups 68358.83 28 2441.39

Total 6224145.04 29

*Is not significant

Compared strategies: Strategy 4, Strategy 5



*Is significant

71





Between Groups 31336195.53 5 6267239.11 1394.916 0.000*

Within Groups 377404.85 84 4492.91

Total 31713600.38 89

*Is significant

Compared strategies: Strategy 1, Strategy 2, Strategy 3, Strategy 4, Strategy 5, No Strategy



*Is significant


Absolute



Critical FOFT Preload V1 VS No Font Loading Strategy 44.965 62.755 NoCritical FOFT Preload V2 VS No Font Loading Strategy 939.728 62.755 YesCritical FOFT Push VS No Font Loading Strategy 152.391 62.755 YesCritical FOFT Push and Preload V1 VS No Font Loading Strategy 596.317 62.755 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1502.281 62.755 Yes







Between Groups 10791514.77 5 2158302.95 3116.114 0.000*

Within Groups 58180.62 84 692.63

Total 10849695.38 89

*Is significant

Resource Metrics

Page 1: Stylesheets parsedCompared strategies: Strategy 1, Strategy 2, Strategy 3, Strategy 4, Strategy 5, No Strategy


Absolute





Comparison - Stylesheets parsed

72





Between Groups 6782463.09 4 1695615.77 107.304 0.000*

Within Groups 1106137.72 70 15801.97

Total 7888600.82 74

*Is significant

Page 1: Subset web fonts loadedCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute





Comparison - Subset web fonts loaded





Between Groups 4284134.81 3 1428044.94 2472.621 0.000*

Within Groups 32342.40 56 577.54

Total 4316477.21 59

*Is significant



Absolute



Critical FOFT Preload V2 VS Critical FOFT Push and Preload V1 547.263 23.236 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 578.103 23.236 YesCritical FOFT Preload V2 VS Critical FOFT Preload V1 60.884 23.236 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 30.840 23.236 YesCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 486.378 23.236 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 517.218 23.236 Yes



73





Between Groups 6782463.09 4 1695615.77 107.304 0.000*

Within Groups 1106137.72 70 15801.97

Total 7888600.82 74

*Is significant




*Is significant


Absolute










Between Groups 4284134.81 3 1428044.94 2472.621 0.000*

Within Groups 32342.40 56 577.54

Total 4316477.21 59

*Is significant



Absolute










BetweenGroups 41468082.81 4 10367020.70 4292.073 0.000*

Within Groups 169077.14 70 2415.39

Total 41637159.95 74

*Is significant

Page 1: All web fonts loadedCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute





Comparison - All web fonts loaded





BetweenGroups 41215553.43 4 10303888.36 9594.948 0.000*

Within Groups 75172.08 70 1073.89

Total 41290725.51 74

*Is significant

Compared strategies: Strategy 2, Strategy 4, Strategy 5, Strategy 1, No Strategy


Absolute



Critical FOFT Preload V2 VS Critical FOFT Push and Preload V1 1095.921 33.507 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 64.592 33.507 YesCritical FOFT Preload V2 VS Critical FOFT Preload V1 1559.315 33.507 YesCritical FOFT Preload V2 VS No Font Loading Strategy 1775.626 33.507 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 1031.329 33.507 YesCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 463.393 33.507 YesCritical FOFT Push and Preload V1 VS No Font Loading Strategy 679.704 33.507 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 1494.723 33.507 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1711.034 33.507 YesCritical FOFT Preload V1 VS No Font Loading Strategy 216.311 33.507 Yes



74

B.2. Page 2





Between Groups 7720422.67 5 1544084.53 1060.126 0.000*

Within Groups 122346.87 84 1456.51

Total 7842769.54 89

*Is significant


Page 2

Visual Metrics



Absolute



Critical FOFT Preload V1 VS Critical FOFT Preload V2 178.494 40.644 YesCritical FOFT Preload V1 VS Critical FOFT Push 346.243 40.644 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V1 499.664 40.644 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 515.638 40.644 YesCritical FOFT Preload V1 VS No Font Loading Strategy 154.275 40.644 YesCritical FOFT Preload V2 VS Critical FOFT Push 524.736 40.644 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V1 678.157 40.644 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 694.132 40.644 YesCritical FOFT Preload V2 VS No Font Loading Strategy 24.218 40.644 NoCritical FOFT Push VS Critical FOFT Push and Preload V1 153.421 40.644 YesCritical FOFT Push VS Critical FOFT Push and Preload V2 169.396 40.644 YesCritical FOFT Push VS No Font Loading Strategy 500.518 40.644 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 15.975 40.644 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 653.939 40.644 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 669.914 40.644 Yes







Between Groups 6029049.26 3 2009683.09 1113.340 0.000*

Within Groups 101085.26 56 1805.09

Total 6130134.51 59

*Is significant




*Is significant


Absolute






75





Between Groups 2579009.27 2 1289504.64 1107.780 0.000*

Within Groups 48889.83 42 1164.04

Total 2627899.10 44

*Is significant



Absolute



Critical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 15.975 30.267 NoCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 499.664 30.267 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 515.638 30.267 Yes







Between Groups 22252578.16 4 5563144.54 2209.730 0.000*

Within Groups 176229.74 70 2517.57

Total 22428807.90 74

*Is significant




*Is significant


Absolute



Critical FOFT Preload V1 VS No Font Loading Strategy 962.749 45.804 YesCritical FOFT Push VS No Font Loading Strategy 747.405 45.804 YesCritical FOFT Push and Preload V1 VS No Font Loading Strategy 1462.413 45.804 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1478.387 45.804 Yes



76





Between Groups 30272058.14 4 7568014.54 1844.003 0.000*

Within Groups 287288.54 70 4104.12

Total 30559346.68 74

*Is significant




*Is significant


Absolute










Between Groups 21260648.36 3 7086882.79 3933.266 0.000*

Within Groups 100899.73 56 1801.78

Total 21361548.09 59

*Is significant



Absolute






77





Between Groups 30272058.14 4 7568014.54 1844.003 0.000*

Within Groups 287288.54 70 4104.12

Total 30559346.68 74

*Is significant




*Is significant


Absolute










Between Groups 21260648.36 3 7086882.79 3933.266 0.000*

Within Groups 100899.73 56 1801.78

Total 21361548.09 59

*Is significant



Absolute










Between Groups 30655484.32 5 6131096.86 1133.324 0.000*

Within Groups 454426.17 84 5409.84

Total 31109910.50 89

*Is significant




*Is significant


Absolute



Critical FOFT Preload V1 VS No Font Loading Strategy 458.512 68.862 YesCritical FOFT Preload V2 VS No Font Loading Strategy 864.322 68.862 YesCritical FOFT Push VS No Font Loading Strategy 518.119 68.862 YesCritical FOFT Push and Preload V1 VS No Font Loading Strategy 15.626 68.862 NoCritical FOFT Push and Preload V2 VS No Font Loading Strategy 972.384 68.862 Yes







Between Groups 7828842.92 5 1565768.58 2084.174 0.000*

Within Groups 63106.34 84 751.27

Total 7891949.26 89

*Is significant

Resource Metrics



Absolute



Critical FOFT Preload V1 VS Critical FOFT Preload V2 230.506 29.190 YesCritical FOFT Preload V1 VS Critical FOFT Push 512.664 29.190 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V1 485.699 29.190 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 490.132 29.190 YesCritical FOFT Preload V1 VS No Font Loading Strategy 15.785 29.190 NoCritical FOFT Preload V2 VS Critical FOFT Push 743.170 29.190 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V1 716.205 29.190 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 720.638 29.190 YesCritical FOFT Preload V2 VS No Font Loading Strategy 246.291 29.190 YesCritical FOFT Push VS Critical FOFT Push and Preload V1 26.965 29.190 NoCritical FOFT Push VS Critical FOFT Push and Preload V2 22.532 29.190 NoCritical FOFT Push VS No Font Loading Strategy 496.879 29.190 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 4.433 29.190 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 469.914 29.190 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 474.347 29.190 Yes



78





Between Groups 13493345.20 4 3373336.30 2747.866 0.000*

Within Groups 85933.44 70 1227.62

Total 13579278.64 74

*Is significant



Absolute



Critical FOFT Preload V1 VS Critical FOFT Preload V2 53.370 35.825 YesCritical FOFT Preload V1 VS Critical FOFT Push 619.928 35.825 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V1 510.091 35.825 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 528.038 35.825 YesCritical FOFT Preload V2 VS Critical FOFT Push 566.558 35.825 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V1 563.461 35.825 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 581.408 35.825 YesCritical FOFT Push VS Critical FOFT Push and Preload V1 1130.019 35.825 YesCritical FOFT Push VS Critical FOFT Push and Preload V2 1147.966 35.825 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 17.947 35.825 No







Between Groups 35021870.90 4 8755467.72 3529.153 0.000*

Within Groups 173662.82 70 2480.90

Total 35195533.72 74

*Is significant




*Is significant


Absolute






79





Between Groups 23221410.43 3 7740470.14 5344.273 0.000*

Within Groups 81108.57 56 1448.37

Total 23302518.99 59

*Is significant



Absolute



Critical FOFT Preload V2 VS Critical FOFT Push and Preload V1 984.482 36.797 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 28.670 36.797 NoCritical FOFT Preload V2 VS Critical FOFT Preload V1 1445.403 36.797 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 955.812 36.797 YesCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 460.921 36.797 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 1416.733 36.797 Yes







Between Groups 37871350.59 5 7574270.12 1513.505 0.000*

Within Groups 420374.41 84 5004.46

Total 38291725.00 89

*Is significant




*Is significant


Absolute



Critical FOFT Preload V1 VS No Font Loading Strategy 154.984 66.232 YesCritical FOFT Preload V2 VS No Font Loading Strategy 1290.419 66.232 YesCritical FOFT Push VS No Font Loading Strategy 315.871 66.232 YesCritical FOFT Push and Preload V1 VS No Font Loading Strategy 305.937 66.232 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1261.749 66.232 Yes



80

B.3. Page 3





Between Groups 18122205.14 4 4530551.29 4726.368 0.000*

Within Groups 67099.86 70 958.57

Total 18189305.00 74

*Is significant


Page 3

Visual Metrics

Page 3: First PaintCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute










Between Groups 15954732.51 3 5318244.17 5144.954 0.000*

Within Groups 57886.17 56 1033.68

Total 16012618.68 59

*Is significant




*Is significant


Absolute






81





Between Groups 18122205.14 4 4530551.29 4726.368 0.000*

Within Groups 67099.86 70 958.57

Total 18189305.00 74

*Is significant


Page 3

Visual Metrics




*Is significant


Absolute










Between Groups 15954732.51 3 5318244.17 5144.954 0.000*

Within Groups 57886.17 56 1033.68

Total 16012618.68 59

*Is significant




*Is significant


Absolute










Between Groups 18647963.75 3 6215987.92 7895.065 0.000*

Within Groups 44090.24 56 787.33

Total 18692053.99 59

*Is significant



Absolute



Critical FOFT Preload V2 VS Critical FOFT Push and Preload V1 1153.454 27.130 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 1151.158 27.130 YesCritical FOFT Preload V2 VS No Font Loading Strategy 77.322 27.130 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 2.297 27.130 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 1076.133 27.130 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1073.836 27.130 Yes







Between Groups 14390491.76 3 4796830.59 2980.687 0.000*

Within Groups 90121.00 56 1609.30

Total 14480612.76 59

*Is significant




*Is significant


Absolute






82





Between Groups 7601657.86 2 3800828.93 3211.012 0.000*

Within Groups 49714.79 42 1183.69

Total 7651372.65 44

*Is significant




*Is significant


Absolute










Between Groups 39.56 1 39.56 0.072 0.248

Within Groups 15467.40 28 552.41

Total 15506.96 29

*Is not significant


83





Between Groups 7601657.86 2 3800828.93 3211.012 0.000*

Within Groups 49714.79 42 1183.69

Total 7651372.65 44

*Is significant




*Is significant


Absolute










Between Groups 39.56 1 39.56 0.072 0.248

Within Groups 15467.40 28 552.41

Total 15506.96 29

*Is not significant






BetweenGroups 167942109.43 4 41985527.36 14557.079 0.000*

Within Groups 201894.00 70 2884.20

Total 168144003.43 74

*Is significant




*Is significant


Absolute










BetweenGroups 111765692.63 4 27941423.16 9756.859 0.000*

Within Groups 200464.06 70 2863.77

Total 111966156.68 74

*Is significant




*Is significant


Absolute






84





BetweenGroups 97829043.91 3 32609681.30 10257.737 0.000*

Within Groups 178025.83 56 3179.03

Total 98007069.74 59

*Is significant




*Is significant


Absolute










BetweenGroups 53071278.04 2 26535639.02 13093.744 0.000*

Within Groups 85116.74 42 2026.59

Total 53156394.79 44

*Is significant




*Is significant


Absolute






85





Between Groups 13985127.39 1 13985127.39 5089.112 0.722

Within Groups 76945.36 28 2748.05

Total 14062072.75 29

*Is not significant




*Is significant





BetweenGroups 132496422.73 5 26499284.55 10666.403 0.000*

Within Groups 208687.03 84 2484.37

Total 132705109.76 89

*Is significant




*Is significant


Absolute






86





BetweenGroups 16153464.20 5 3230692.84 17519.598 0.000*

Within Groups 15489.98 84 184.40

Total 16168954.17 89

*Is significant

Resource Metrics



Absolute










Between Groups 8247431.90 4 2061857.98 9107.897 0.000*

Within Groups 15846.69 70 226.38

Total 8263278.60 74

*Is significant




*Is significant


Absolute










Between Groups 5379291.05 3 1793097.02 14158.077 0.000*

Within Groups 7092.31 56 126.65

Total 5386383.36 59

*Is significant



Absolute



Critical FOFT Preload V2 VS Critical FOFT Push and Preload V1 669.645 10.881 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 668.572 10.881 YesCritical FOFT Preload V2 VS Critical FOFT Preload V1 162.880 10.881 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 1.073 10.881 NoCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 506.765 10.881 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 505.692 10.881 Yes







BetweenGroups 145623061.91 4 36405765.48 38707.275 0.000*

Within Groups 65837.85 70 940.54

Total 145688899.75 74

*Is significant




*Is significant


Absolute






87





Between Groups 5379291.05 3 1793097.02 14158.077 0.000*

Within Groups 7092.31 56 126.65

Total 5386383.36 59

*Is significant



Absolute










BetweenGroups 145623061.91 4 36405765.48 38707.275 0.000*

Within Groups 65837.85 70 940.54

Total 145688899.75 74

*Is significant




*Is significant


Absolute






88





BetweenGroups 127739516.31 3 42579838.77 38592.729 0.000*

Within Groups 61785.50 56 1103.31

Total 127801301.81 59

*Is significant




*Is significant


Absolute










BetweenGroups 77753638.89 2 38876819.45 30956.273 0.000*

Within Groups 52746.22 42 1255.86

Total 77806385.11 44

*Is significant




*Is significant


Absolute










BetweenGroups 172257076.54 5 34451415.31 41325.420 0.000*

Within Groups 70027.57 84 833.66

Total 172327104.11 89

*Is significant




*Is significant


Absolute






89





BetweenGroups 127739516.31 3 42579838.77 38592.729 0.000*

Within Groups 61785.50 56 1103.31

Total 127801301.81 59

*Is significant




*Is significant


Absolute










BetweenGroups 77753638.89 2 38876819.45 30956.273 0.000*

Within Groups 52746.22 42 1255.86

Total 77806385.11 44

*Is significant




*Is significant


Absolute










Between Groups 14046739.72 1 14046739.72 7677.388 0.722

Within Groups 51229.50 28 1829.62

Total 14097969.22 29

*Is not significant




*Is significant





BetweenGroups 172257076.54 5 34451415.31 41325.420 0.000*

Within Groups 70027.57 84 833.66

Total 172327104.11 89

*Is significant




*Is significant


Absolute






90





Between Groups 13729336.80 5 2745867.36 3390.586 0.000*

Within Groups 68027.43 84 809.85

Total 13797364.24 89

*Is significant


Page 4

Visual Metrics



Absolute



Critical FOFT Preload V1 VS Critical FOFT Preload V2 115.711 30.307 YesCritical FOFT Preload V1 VS Critical FOFT Push 635.916 30.307 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V1 652.203 30.307 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 642.512 30.307 YesCritical FOFT Preload V1 VS No Font Loading Strategy 254.858 30.307 YesCritical FOFT Preload V2 VS Critical FOFT Push 751.628 30.307 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V1 767.914 30.307 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 758.223 30.307 YesCritical FOFT Preload V2 VS No Font Loading Strategy 139.146 30.307 YesCritical FOFT Push VS Critical FOFT Push and Preload V1 16.287 30.307 NoCritical FOFT Push VS Critical FOFT Push and Preload V2 6.596 30.307 NoCritical FOFT Push VS No Font Loading Strategy 890.774 30.307 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 9.691 30.307 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 907.061 30.307 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 897.370 30.307 Yes







Between Groups 4661183.79 3 1553727.93 2370.276 0.000*

Within Groups 36708.28 56 655.50

Total 4697892.07 59

*Is significant



Absolute



Critical FOFT Preload V1 VS Critical FOFT Push and Preload V1 652.203 24.755 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 642.512 24.755 YesCritical FOFT Preload V1 VS Critical FOFT Push 635.916 24.755 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 9.691 24.755 NoCritical FOFT Push and Preload V1 VS Critical FOFT Push 16.287 24.755 NoCritical FOFT Push and Preload V2 VS Critical FOFT Push 6.596 24.755 No



B.4. Page 4

91





Between Groups 4661183.79 3 1553727.93 2370.276 0.000*

Within Groups 36708.28 56 655.50

Total 4697892.07 59

*Is significant



Absolute



Critical FOFT Preload V1 VS Critical FOFT Push and Preload V1 652.203 24.755 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 642.512 24.755 YesCritical FOFT Preload V1 VS Critical FOFT Push 635.916 24.755 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 9.691 24.755 NoCritical FOFT Push and Preload V1 VS Critical FOFT Push 16.287 24.755 NoCritical FOFT Push and Preload V2 VS Critical FOFT Push 6.596 24.755 No







Between Groups 4230887.95 4 1057721.99 206.523 0.000*

Within Groups 358510.36 70 5121.58

Total 4589398.30 74

*Is significant




*Is significant


Absolute










Between Groups 4224001.70 3 1408000.57 347.427 0.000*

Within Groups 226948.18 56 4052.65

Total 4450949.88 59

*Is significant




*Is significant


Absolute






92





Between Groups 1918513.10 2 959256.55 195.588 0.000*

Within Groups 205988.10 42 4904.48

Total 2124501.20 44

*Is significant




*Is significant


Absolute










Between Groups 79001.60 1 79001.60 11.319 0.016*

Within Groups 195428.72 28 6979.60

Total 274430.32 29

*Is significant




*Is significant





Between Groups 8026132.43 5 1605226.49 15787.019 0.000*

Within Groups 8541.13 84 101.68

Total 8034673.56 89

*Is significant

Resource Metrics



Absolute



Critical FOFT Preload V1 VS Critical FOFT Preload V2 149.669 10.739 YesCritical FOFT Preload V1 VS Critical FOFT Push 559.378 10.739 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V1 526.393 10.739 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 529.670 10.739 YesCritical FOFT Preload V1 VS No Font Loading Strategy 0.434 10.739 NoCritical FOFT Preload V2 VS Critical FOFT Push 709.047 10.739 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V1 676.062 10.739 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 679.339 10.739 YesCritical FOFT Preload V2 VS No Font Loading Strategy 149.235 10.739 YesCritical FOFT Push VS Critical FOFT Push and Preload V1 32.985 10.739 YesCritical FOFT Push VS Critical FOFT Push and Preload V2 29.708 10.739 YesCritical FOFT Push VS No Font Loading Strategy 559.812 10.739 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 3.277 10.739 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 526.827 10.739 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 530.104 10.739 Yes



93





Between Groups 39141225.38 5 7828245.08 1732.836 0.000*

Within Groups 379477.72 84 4517.59

Total 39520703.10 89

*Is significant




*Is significant


Absolute










Between Groups 8026132.43 5 1605226.49 15787.019 0.000*

Within Groups 8541.13 84 101.68

Total 8034673.56 89

*Is significant

Resource Metrics



Absolute



Critical FOFT Preload V1 VS Critical FOFT Preload V2 149.669 10.739 YesCritical FOFT Preload V1 VS Critical FOFT Push 559.378 10.739 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V1 526.393 10.739 YesCritical FOFT Preload V1 VS Critical FOFT Push and Preload V2 529.670 10.739 YesCritical FOFT Preload V1 VS No Font Loading Strategy 0.434 10.739 NoCritical FOFT Preload V2 VS Critical FOFT Push 709.047 10.739 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V1 676.062 10.739 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 679.339 10.739 YesCritical FOFT Preload V2 VS No Font Loading Strategy 149.235 10.739 YesCritical FOFT Push VS Critical FOFT Push and Preload V1 32.985 10.739 YesCritical FOFT Push VS Critical FOFT Push and Preload V2 29.708 10.739 YesCritical FOFT Push VS No Font Loading Strategy 559.812 10.739 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 3.277 10.739 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 526.827 10.739 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 530.104 10.739 Yes



94





Between Groups 4554403.57 4 1138600.89 5839.788 0.000*

Within Groups 13648.11 70 194.97

Total 4568051.67 74

*Is significant




*Is significant


Absolute










Between Groups 4551175.76 3 1517058.59 6632.103 0.000*

Within Groups 12809.70 56 228.74

Total 4563985.47 59

*Is significant



Absolute






95





Between Groups 6227128.56 4 1556782.14 2565.866 0.000*

Within Groups 42470.94 70 606.73

Total 6269599.50 74

*Is significant




*Is significant


Absolute










Between Groups 6225646.98 3 2075215.66 3749.457 0.000*

Within Groups 30994.37 56 553.47

Total 6256641.35 59

*Is significant




*Is significant


Absolute






96





Between Groups 528960.58 2 264480.29 504.214 0.000*

Within Groups 22030.65 42 524.54

Total 550991.23 44

*Is significant




*Is significant


Absolute










Between Groups 8750.39 1 8750.39 11.741 0.295

Within Groups 20868.32 28 745.30

Total 29618.71 29

*Is not significant


97





BetweenGroups 56057766.22 5 11211553.24 15571.153 0.000*

Within Groups 60481.74 84 720.02

Total 56118247.96 89

*Is significant




*Is significant


Absolute










Between Groups 6973355.13 4 1743338.78 329.211 0.000*

Within Groups 370685.68 70 5295.51

Total 7344040.81 74

*Is significant


Page 5

Visual Metrics




*Is significant


Absolute






98





Between Groups 6823840.76 3 2274613.59 3259.622 0.000*

Within Groups 39077.65 56 697.82

Total 6862918.41 59

*Is significant



Absolute










Between Groups 7989201.03 5 1597840.21 201.607 0.000*

Within Groups 665744.59 84 7925.53

Total 8654945.62 89

*Is significant




*Is significant


Absolute






99





Between Groups 4444603.49 3 1481534.50 197.897 0.000*

Within Groups 419238.69 56 7486.41

Total 4863842.18 59

*Is significant




*Is significant


Absolute










BetweenGroups 23849003.09 3 7949667.70 13648.083 0.000*

Within Groups 32618.60 56 582.48

Total 23881621.69 59

*Is significant



Absolute






100





Between Groups 39829225.25 4 9957306.31 6194.126 0.000*

Within Groups 112527.81 70 1607.54

Total 39941753.06 74

*Is significant




*Is significant


Absolute










Between Groups 20846856.72 4 5211714.18 5410.209 0.000*

Within Groups 67431.78 70 963.31

Total 20914288.50 74

*Is significant



Absolute



Critical FOFT Preload V2 VS Critical FOFT Push and Preload V1 532.538 31.735 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 362.482 31.735 YesCritical FOFT Preload V2 VS Critical FOFT Preload V1 996.672 31.735 YesCritical FOFT Preload V2 VS No Font Loading Strategy 925.874 31.735 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 895.020 31.735 YesCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 464.134 31.735 YesCritical FOFT Push and Preload V1 VS No Font Loading Strategy 393.335 31.735 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 1359.154 31.735 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1288.355 31.735 YesCritical FOFT Preload V1 VS No Font Loading Strategy 70.799 31.735 Yes



101





Between Groups 7815648.77 5 1563129.75 12668.534 0.000*

Within Groups 10364.49 84 123.39

Total 7826013.26 89

*Is significant

Resource Metrics



Absolute










Between Groups 12972051.93 4 3243012.98 597.643 0.000*

Within Groups 379843.93 70 5426.34

Total 13351895.85 74

*Is significant




*Is significant


Absolute






102





Between Groups 4640251.19 3 1546750.40 3978.049 0.000*

Within Groups 21774.00 56 388.82

Total 4662025.19 59

*Is significant




*Is significant


Absolute










Between Groups 3432423.69 2 1716211.84 6464.348 0.000*

Within Groups 11150.53 42 265.49

Total 3443574.22 44

*Is significant




*Is significant


Absolute






103





Between Groups 723.71 1 723.71 5.670 0.409

Within Groups 3574.08 28 127.65

Total 4297.80 29

*Is not significant






Between Groups 12972051.93 4 3243012.98 597.643 0.000*

Within Groups 379843.93 70 5426.34

Total 13351895.85 74

*Is significant

Compared strategies: Strategy 1, Strategy 2, Strategy 3, Strategy 4, Strategy 5



*Is significant


Absolute



Critical FOFT Preload V1 VS Critical FOFT Push and Preload V2 527.843 67.245 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 590.719 67.245 YesCritical FOFT Push VS Critical FOFT Push and Preload V2 1115.353 67.245 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 9.823 67.245 No



104





BetweenGroups 54606070.76 4 13651517.69 3862.099 0.000*

Within Groups 247431.82 70 3534.74

Total 54853502.57 74

*Is significant




*Is significant


Absolute










BetweenGroups 26664936.82 3 8888312.27 22914.050 0.000*

Within Groups 21722.28 56 387.90

Total 26686659.10 59

*Is significant




*Is significant


Absolute






105





BetweenGroups 12063944.26 2 6031972.13 14803.097 0.000*

Within Groups 17114.18 42 407.48

Total 12081058.43 44

*Is significant




*Is significant


Absolute










Between Groups 8636431.13 1 8636431.13 14626.779 0.404

Within Groups 16532.69 28 590.45

Total 8652963.83 29

*Is not significant






BetweenGroups 59281781.50 5 11856356.30 3758.304 0.000*

Within Groups 264995.56 84 3154.71

Total 59546777.06 89

*Is significant




*Is significant


Absolute






106

B.5. All Pages (summary)





BetweenGroups 45599160.41 4 11399790.10 533.961 0.000*

Within Groups 7899304.97 370 21349.47

Total 53498465.38 374

*Is significant


All pages

Visual Metrics

All pages: First PaintCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute










BetweenGroups 41985775.27 3 13995258.42 703.949 0.000*

Within Groups 5884796.97 296 19881.07

Total 47870572.25 299

*Is significant




*Is significant


Absolute






107





BetweenGroups 36450696.72 2 18225348.36 958.664 0.000*

Within Groups 4220483.44 222 19011.19

Total 40671180.16 224

*Is significant




*Is significant


Absolute










Between Groups 69.58 1 69.58 0.004 0.302

Within Groups 2444885.42 148 16519.50

Total 2444955.00 149

*Is not significant






BetweenGroups 59062500.03 5 11812500.01 499.371 0.000*

Within Groups 10502710.26 444 23654.75

Total 69565210.30 449

*Is significant




*Is significant


Absolute






108





Between Groups 25292627.12 3 8430875.71 197.168 0.000*

Within Groups 12656916.60 296 42759.85

Total 37949543.72 299

*Is significant

All pages: First Web Font StageCompared strategies: Strategy 1, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute



Critical FOFT Preload V1 VS Critical FOFT Push 36.292 79.827 NoCritical FOFT Push and Preload V1 VS Critical FOFT Push 561.324 79.827 YesCritical FOFT Push and Preload V2 VS Critical FOFT Push 562.686 79.827 Yes







Between Groups 17898058.92 2 8949029.46 483.472 0.000*

Within Groups 4109198.95 222 18509.91

Total 22007257.87 224

*Is significant



Absolute



Critical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 1.362 52.422 NoCritical FOFT Push and Preload V1 VS Critical FOFT Preload V1 597.616 52.422 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V1 598.978 52.422 Yes



109





BetweenGroups 240648188.42 4 60162047.10 298.731 0.000*

Within Groups 74515128.27 370 201392.24

Total 315163316.69 374

*Is significant




*Is significant


Absolute










BetweenGroups 143720423.20 4 35930105.80 41.448 0.000*

Within Groups 320739235.81 370 866862.80

Total 464459659.01 374

*Is significant

All pages: Second Web Font StageCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute



Critical FOFT Preload V1 VS Critical FOFT Push 35.757 373.716 NoCritical FOFT Preload V2 VS Critical FOFT Push 1374.488 373.716 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push 573.117 373.716 YesCritical FOFT Push and Preload V2 VS Critical FOFT Push 1418.299 373.716 Yes



110





BetweenGroups 100328049.19 3 33442683.06 42.221 0.000*

Within Groups 234457444.48 296 792085.96

Total 334785493.67 299

*Is significant




*Is significant


Absolute










BetweenGroups 33961192.79 2 16980596.40 27.698 0.000*

Within Groups 136100572.26 222 613065.64

Total 170061765.05 224

*Is significant




*Is significant


Absolute



Critical FOFT Push and Preload V1 VS Critical FOFT Preload V2 801.371 284.491 YesCritical FOFT Push and Preload V2 VS Critical FOFT Preload V2 43.811 284.491 No



111





Between Groups 26787471.30 1 26787471.30 29.515 0.153

Within Groups 134324974.24 148 907601.18

Total 161112445.54 149

*Is not significant




*Is significant





BetweenGroups 185189361.64 5 37037872.33 41.315 0.000*

Within Groups 398030613.02 444 896465.34

Total 583219974.65 449

*Is significant




*Is significant


Absolute



Critical FOFT Preload V1 VS No Font Loading Strategy 169.981 377.569 NoCritical FOFT Preload V2 VS No Font Loading Strategy 1508.713 377.569 YesCritical FOFT Push VS No Font Loading Strategy 134.225 377.569 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 707.342 377.569 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1552.524 377.569 Yes



112





BetweenGroups 44361709.67 4 11090427.42 759.185 0.000*

Within Groups 5405086.34 370 14608.34

Total 49766796.02 374

*Is significant

Resource Metrics

All pages: Stylesheets parsedCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute










BetweenGroups 35229341.27 3 11743113.76 724.719 0.000*

Within Groups 4796285.93 296 16203.67

Total 40025627.19 299

*Is significant




*Is significant


Absolute






113





BetweenGroups 44361709.67 4 11090427.42 759.185 0.000*

Within Groups 5405086.34 370 14608.34

Total 49766796.02 374

*Is significant

Resource Metrics

All pages: Stylesheets parsedCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute










BetweenGroups 31416720.02 2 15708360.01 988.841 0.000*

Within Groups 3526609.78 222 15885.63

Total 34943329.80 224

*Is significant




*Is significant


Absolute










Between Groups 136.06 1 136.06 0.015 0.313

Within Groups 1372149.51 148 9271.28

Total 1372285.57 149

*Is not significant






Between Groups 49073119.37 5 9814623.87 615.863 0.000*

Within Groups 7075746.17 444 15936.37

Total 56148865.54 449

*Is significant




*Is significant


Absolute






114





Between Groups 39831923.76 4 9957980.94 318.955 0.000*

Within Groups 11551639.12 370 31220.65

Total 51383562.88 374

*Is significant

All pages: Subset web fonts loadedCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute










BetweenGroups 23254771.34 3 7751590.45 1232.965 0.000*

Within Groups 1860936.93 296 6286.95

Total 25115708.27 299

*Is significant




*Is significant


Absolute






115





BetweenGroups 17737576.05 2 8868788.03 1296.179 0.000*

Within Groups 1518980.31 222 6842.25

Total 19256556.36 224

*Is significant




*Is significant


Absolute










Between Groups 9803.32 1 9803.32 1.844 0.344

Within Groups 786951.97 148 5317.24

Total 796755.29 149

*Is not significant






Between Groups 39831923.76 4 9957980.94 318.955 0.000*

Within Groups 11551639.12 370 31220.65

Total 51383562.88 374

*Is significant

Compared strategies: Strategy 1, Strategy 2, Strategy 3, Strategy 4, Strategy 5



*Is significant


Absolute



Critical FOFT Preload V1 VS Critical FOFT Push and Preload V2 519.749 70.923 YesCritical FOFT Preload V2 VS Critical FOFT Push and Preload V2 603.530 70.923 YesCritical FOFT Push VS Critical FOFT Push and Preload V2 810.491 70.923 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push and Preload V2 16.169 70.923 No



116





BetweenGroups 212651873.17 4 53162968.29 57.343 0.000*

Within Groups 343029290.88 370 927106.19

Total 555681164.05 374

*Is significant

All pages: All web fonts loadedCompared strategies: Strategy 1, Strategy 2, Strategy 4, Strategy 5, Strategy 3



*Is significant


Absolute



Critical FOFT Preload V1 VS Critical FOFT Push 30.660 386.484 NoCritical FOFT Preload V2 VS Critical FOFT Push 1868.356 386.484 YesCritical FOFT Push and Preload V1 VS Critical FOFT Push 537.185 386.484 YesCritical FOFT Push and Preload V2 VS Critical FOFT Push 1429.771 386.484 Yes







BetweenGroups 156605348.87 3 52201782.96 62.712 0.000*

Within Groups 246391924.11 296 832405.15

Total 402997272.97 299

*Is significant




*Is significant


Absolute






117





BetweenGroups 69026981.65 2 34513490.83 51.713 0.000*

Within Groups 148163850.94 222 667404.73

Total 217190832.60 224

*Is significant




*Is significant


Absolute










Between Groups 29876595.75 1 29876595.75 30.228 0.171

Within Groups 146277852.80 148 988363.87

Total 176154448.55 149

*Is not significant






BetweenGroups 286092418.98 5 57218483.80 60.179 0.000*

Within Groups 422157400.52 444 950804.96

Total 708249819.49 449

*Is significant




*Is significant


Absolute



Critical FOFT Preload V1 VS No Font Loading Strategy 341.462 388.844 NoCritical FOFT Preload V2 VS No Font Loading Strategy 2179.158 388.844 YesCritical FOFT Push VS No Font Loading Strategy 310.802 388.844 NoCritical FOFT Push and Preload V1 VS No Font Loading Strategy 847.988 388.844 YesCritical FOFT Push and Preload V2 VS No Font Loading Strategy 1740.573 388.844 Yes



118

Page 1 : Critical FOFT Preload V1 (Strategy 1)

Visual MetricsFirst Paint3352.557

Fallback Font StageN/A

First web font stage3352.557

Second web font stage4586.928

Resource MetricsSubset Fonts

merriweather-regular-400-subset.woff2Start: 1560.098 Finish: 2195.874

source-sans-pro-regular-400-subset.woff2Start: 1561.497 Finish: 2218.103

Stylesheets parsed2564.893

All Fontsmerriweather-regular-400.woff2

Start: 2630.633 Finish: 4127.078merriweather-bold-700.woff2

Start: 2632.635 Finish: 4197.219source-sans-pro-regular-400.woff2

Start: 2634.238 Finish: 4265.733source-sans-pro-semi-bold-600.woff2

Start: 2635.450 Finish: 4275.749source-sans-pro-bold-700.woff2

Start: 2637.637 Finish: 4283.380














Start: 2617.864 Finish: 4285.797














Start: 2638.675 Finish: 4282.457














Start: 2635.615 Finish: 4284.008














Start: 2638.587 Finish: 4307.121


Fallback Font Stage




Start: 2632.121 Finish: 4125.639

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

MB

ER 6

C. Raw ResultsAppendix C contains the raw results from all network traces. All values are in milliseconds.

119

First PaintN/A





merriweather-bold-700.woff2Start: 2633.520 Finish: 4193.155

source-sans-pro-regular-400.woff2Start: 2637.339 Finish: 4261.673

source-sans-pro-semi-bold-600.woff2Start: 2639.943 Finish: 4270.906

source-sans-pro-bold-700.woff2Start: 2641.343 Finish: 4279.107














Start: 2666.302 Finish: 4331.738














Start: 2619.269 Finish: 4255.066














Start: 2646.703 Finish: 4286.717














Start: 2623.702 Finish: 4273.072














Start: 2619.359 Finish: 4289.596




Second web font stage









TRA

CE

NU

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2

120

First Paint4545.832


Start: 2613.824 Finish: 4287.128














Start: 2633.894 Finish: 4276.189














Start: 2624.180 Finish: 4288.583














Start: 2638.727 Finish: 4280.644




First web font stageN/A






All Fontsmerriweather-bold-700.woff2

Start: 1552.210 Finish: 2654.093merriweather-regular-400.woff2




Start: 1556.615 Finish: 2725.624














Start: 1550.658 Finish: 2728.440














TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3

121

Start: 1611.415 Finish: 2781.940














Start: 1546.980 Finish: 2719.737














Start: 1591.920 Finish: 2764.944














Start: 1495.821 Finish: 2668.351














Start: 1560.867 Finish: 2734.584














Start: 1491.124 Finish: 2658.945














Start: 1594.407 Finish: 2767.187





Start: 1547.182 Finish: 2656.927

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

BER

10

122

First PaintFallback Font Stage

N/AFirst web font stage

N/ASecond web font stage

3661.677



merriweather-regular-400.woff2Start: 1545.783 Finish: 2705.063

















Start: 1558.025 Finish: 2725.929














Start: 1544.834 Finish: 2719.997














Start: 1561.506 Finish: 2735.344














Start: 1537.217 Finish: 2711.161














Start: 1558.360 Finish: 2730.398

Page 1 : Critical FOFT Push (Strategy 3)


Fallback Font Stage2830.058






Start: 2768.925 Finish: 4267.642

TRA

CE

NU

MTR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

NU

MB

ER 1

123

First PaintFirst web font stage

3030.241Second web font stage

4564.846


















Start: 2905.222 Finish: 4467.265














Start: 3086.511 Finish: 4645.682














Start: 3101.635 Finish: 4644.521














Start: 2897.064 Finish: 4466.235














Start: 3069.194 Finish: 4615.834














TRA

CE

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

124

Start: 2926.739 Finish: 4483.092














Start: 2924.173 Finish: 4488.569














Start: 2874.133 Finish: 4439.837














Start: 2867.648 Finish: 4429.164














Start: 2930.917 Finish: 4490.523














Start: 3109.667 Finish: 4651.731














Start: 2935.421 Finish: 4500.042





Start: 2969.628 Finish: 4342.373

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

BER

14

125


3010.299First web font stage


4778.465



merriweather-regular-400.woff2Start: 2967.017 Finish: 4436.961

















Start: 2940.419 Finish: 4491.625

Page 1 : Critical FOFT Push And Preload V1 (Strategy 4)














Start: 2143.640 Finish: 3866.653














Start: 2079.304 Finish: 3799.475














Start: 2108.267 Finish: 3781.954














Start: 2122.056 Finish: 3799.317








Start: 2114.625 Finish: 3658.598

TRA

CE

NU

MTR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

NU

MB

ER 5

126



4032.485


















Start: 2124.103 Finish: 3841.680














Start: 2109.336 Finish: 3814.992














Start: 2142.189 Finish: 3862.680














Start: 2059.737 Finish: 3785.387














Start: 2115.803 Finish: 3776.518














TRA

CE

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

127

Start: 2118.038 Finish: 3836.703














Start: 2105.544 Finish: 3860.859














Start: 2108.618 Finish: 3829.769














Start: 2122.160 Finish: 3824.260














Start: 2110.876 Finish: 3813.403















Start: 1557.944 Finish: 2778.764









All Fontssource-sans-pro-bold-700.woff2





Start: 1557.506 Finish: 2790.005

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

128














Start: 1566.783 Finish: 2780.196









All Fontssource-sans-pro-semi-bold-600.woff2





Start: 1565.122 Finish: 2788.392














Start: 1538.277 Finish: 2738.455














Start: 1463.632 Finish: 2692.285














Start: 1549.878 Finish: 2768.129














Start: 1529.567 Finish: 2802.867


Fallback Font Stage



merriweather-regular-400-subset.woff2



TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

UM

BER

9

129

First PaintN/A



Start: 1557.706 Finish: 1718.031





Start: 1565.724 Finish: 2788.870














Start: 1564.348 Finish: 2774.890









All Fontssource-sans-pro-semi-bold-600.woff2





Start: 1566.611 Finish: 2809.032














Start: 1526.486 Finish: 2823.956














Start: 1531.400 Finish: 2850.834














Start: 1545.103 Finish: 2808.861













Start: 1523.207 Finish: 2862.346

TRA

CE

NTR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5

130


Page 1 : No Font Loading Strategy





Resource Metrics







Start: 2771.873 Finish: 4437.454





Resource Metrics







Start: 2870.126 Finish: 4536.187





Resource Metrics







Start: 2827.726 Finish: 4497.718





Resource Metrics







Start: 2854.837 Finish: 4512.944





Resource Metrics







Start: 2852.325 Finish: 4526.545





Resource Metrics






TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

131

First Paint4622.163


Start: 2846.155 Finish: 4491.990





Resource Metrics







Start: 2751.345 Finish: 4416.115





Resource Metrics







Start: 2848.799 Finish: 4541.851





Resource Metrics







Start: 2843.455 Finish: 4529.792





Resource Metrics







Start: 2869.108 Finish: 4524.746





Resource Metrics







Start: 2823.965 Finish: 4480.459





Resource Metrics







Start: 2882.225 Finish: 4535.435

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2

132





Resource Metrics







Start: 2830.738 Finish: 4495.559





Resource Metrics







Start: 2839.488 Finish: 4497.576





Resource Metrics







Start: 2829.971 Finish: 4510.897






Resource MetricsSubset Font

lato-regular-400-subset.woff2Start: 1602.440 Finish: 2194.408


All Fontslato-regular-400.woff2

Start: 2504.911 Finish: 3672.700lato-bold-700.woff2

Start: 2506.710 Finish: 4082.784lato-black-900.woff2

Start: 2508.295 Finish: 4092.623











Start: 2521.208 Finish: 4052.654











Start: 2511.095 Finish: 4076.239







TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3U

MB

ER 4

133



4764.833



Start: 2506.752 Finish: 4154.678











Start: 2429.641 Finish: 3974.684











Start: 2514.530 Finish: 4114.156











Start: 2502.073 Finish: 4102.068











Start: 2508.593 Finish: 4101.082











Start: 2540.603 Finish: 4082.996











Start: 2523.530 Finish: 4115.797











Start: 2502.194 Finish: 4094.178

TRA

CE

NTR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1

134











Start: 2500.026 Finish: 4031.263











Start: 2499.146 Finish: 4081.924











Start: 2506.263 Finish: 4091.890











Start: 2508.415 Finish: 4116.441












Start: 1604.695 Finish: 2650.445











Start: 1601.364 Finish: 2651.174











Start: 1617.149 Finish: 2666.609

Visual MetricsFirst Paint

Resource MetricsSubset Font All Fonts

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

4

135

First Paint3439.379






lato-regular-400.woff2Start: 1615.970 Finish: 2622.472

lato-bold-700.woff2Start: 1617.762 Finish: 2630.494

lato-black-900.woff2Start: 1618.972 Finish: 2664.528











Start: 1573.534 Finish: 2615.279











Start: 1598.179 Finish: 2642.017











Start: 1603.676 Finish: 2626.391











Start: 1559.255 Finish: 2604.042











Start: 1603.966 Finish: 2643.934











Start: 1565.368 Finish: 2607.203










TRA

CE

NU

MB

ERTR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

AC

E N

UM

BER

11

136

First PaintSecond web font stage

3373.040

Start: 1605.251 Finish: 2647.436











Start: 1600.758 Finish: 2642.095











Start: 1597.880 Finish: 2642.207











Start: 1606.019 Finish: 2650.952











Start: 1605.245 Finish: 2647.312












Start: 3222.627 Finish: 4366.156











Start: 3056.745 Finish: 4195.710











Start: 3038.306 Finish: 4210.430

TRTR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3

137

First Paint4788.739











Start: 3119.934 Finish: 4271.803











Start: 3114.679 Finish: 4256.954











Start: 3028.488 Finish: 4167.360











Start: 3151.803 Finish: 4311.070











Start: 3171.567 Finish: 4330.771











Start: 3063.213 Finish: 4020.966











Start: 3085.059 Finish: 4265.236



lato-regular-400-subset.woff2All Fonts

lato-regular-400.woff2

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0ER

11

138




4769.819

Start: 1991.521 Finish: 2801.956




Start: 3079.121 Finish: 4250.122











Start: 3132.410 Finish: 4289.686











Start: 3078.987 Finish: 4248.698











Start: 3079.451 Finish: 4218.016











Start: 3137.407 Finish: 4292.994












Start: 1936.865 Finish: 3524.799











Start: 2018.612 Finish: 3621.465


Fallback Font Stage





TRA

CE

NU

MB

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

MB

ER 3

139

First PaintN/A





Start: 2022.711 Finish: 3612.456











Start: 2004.847 Finish: 3571.728











Start: 2030.850 Finish: 3619.542











Start: 2029.822 Finish: 3640.670











Start: 2020.265 Finish: 3628.904











Start: 2041.246 Finish: 3729.399











Start: 1944.288 Finish: 3551.819











Start: 2035.391 Finish: 3609.785

TRA

CE

NU

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0

140











Start: 2019.441 Finish: 3620.138











Start: 2049.956 Finish: 3661.139











Start: 2028.318 Finish: 3639.349











Start: 2025.064 Finish: 3712.065











Start: 2029.931 Finish: 3625.599












Start: 1620.245 Finish: 2686.042











Start: 1530.455 Finish: 2646.488


Resource MetricsSubset Font All Fonts

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2 3

141

First Paint2694.773








lato-black-900.woff2Start: 1586.584 Finish: 2669.172











Start: 1599.950 Finish: 2708.515











Start: 1520.637 Finish: 2587.588











Start: 1601.318 Finish: 2650.978











Start: 1601.868 Finish: 2686.282











Start: 1515.722 Finish: 2640.798











Start: 1610.432 Finish: 2682.926










TRA

CE

NU

MB

ERTR

AC

E N

UM

BER

4TR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9A

CE

NU

MB

ER 1

0

142


3328.661

Start: 1620.663 Finish: 2678.657











Start: 1621.268 Finish: 2707.586











Start: 1600.104 Finish: 2664.559











Start: 1597.295 Finish: 2662.696











Start: 1618.147 Finish: 2688.739











Start: 1596.701 Finish: 2670.648






Resource Metrics





Start: 2623.607 Finish: 3815.085





Resource Metrics





Start: 2648.996 Finish: 3949.095

TRTR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

143

First Paint4299.557





Resource Metrics





Start: 2575.134 Finish: 4043.895





Resource Metrics





Start: 2616.962 Finish: 3843.209





Resource Metrics





Start: 2644.563 Finish: 3849.123





Resource Metrics





Start: 2635.355 Finish: 4130.918





Resource Metrics





Start: 2648.581 Finish: 3873.673





Resource Metrics





Start: 2649.430 Finish: 3836.959





Resource Metrics





Start: 2603.035 Finish: 3788.729


Resource Metrics



TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

ER 1

0

144




4321.294



Start: 2652.601 Finish: 3971.953





Resource Metrics





Start: 2659.117 Finish: 3851.193





Resource Metrics





Start: 2630.582 Finish: 3821.504





Resource Metrics





Start: 2649.329 Finish: 3856.716





Resource Metrics





Start: 2642.084 Finish: 4150.249





Resource Metrics





Start: 2654.232 Finish: 4175.607








aleo-regular-400-subset.woff2Start: 1556.793 Finish: 2289.573



Start: 2622.497 Finish: 5995.255lato-italic-400.woff2


Start: 2627.920 Finish: 6018.706aleo-regular-400.woff2

Start: 2629.520 Finish: 6659.084


Fallback Font Stage



aleo-regular-400-subset.woff2



TRA

CE

NU

MB

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1M

BER

2

145

First PaintN/A



Start: 1539.630 Finish: 2269.720




Start: 2662.616 Finish: 6569.161













Start: 2641.904 Finish: 6662.229













Start: 2656.514 Finish: 6659.565













Start: 2647.238 Finish: 6685.988













Start: 2645.148 Finish: 6660.720













Start: 2653.255 Finish: 6644.876













Start: 2643.779 Finish: 6654.511













Start: 2614.598 Finish: 6661.677

TRA

CE

NU

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

146













Start: 2629.088 Finish: 6653.155













Start: 2610.165 Finish: 6660.854













Start: 2613.479 Finish: 6644.887













Start: 2628.228 Finish: 6665.566













Start: 2599.933 Finish: 6642.627













Start: 2629.137 Finish: 6665.723














Start: 1548.619 Finish: 2843.890


Resource MetricsSubset Fonts All Fonts

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

2

147

First Paint3621.696








lato-italic-400.woff2Start: 1545.611 Finish: 2669.090


aleo-regular-400.woff2Start: 1546.848 Finish: 2848.932













Start: 1559.038 Finish: 2855.811













Start: 1550.502 Finish: 2855.125













Start: 1561.890 Finish: 2871.592













Start: 1557.654 Finish: 2856.796













Start: 1560.899 Finish: 2868.736













Start: 1559.602 Finish: 2882.392







Stylesheets parsed




TRA

CE

NU

MB

ERTR

AC

E N

UM

BER

3TR

AC

E N

UM

BER

4TR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8A

CE

NU

MB

ER 9

148


3620.549

2871.630 Start: 1548.999 Finish: 2865.016aleo-regular-400.woff2

Start: 1550.021 Finish: 2867.632













Start: 1564.342 Finish: 2873.494













Start: 1558.507 Finish: 2858.133













Start: 1563.042 Finish: 2867.369













Start: 1550.469 Finish: 2869.841













Start: 1548.996 Finish: 2853.399













Start: 1568.897 Finish: 2858.945














TRTR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1

149

First Paint6562.146

Start: 3138.078 Finish: 6334.255













Start: 3050.571 Finish: 6287.928













Start: 3099.640 Finish: 6308.105













Start: 3035.331 Finish: 6270.808













Start: 3030.470 Finish: 6283.813













Start: 3087.267 Finish: 6305.826













Start: 3097.155 Finish: 6299.774













Start: 3066.850 Finish: 6289.746





TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

ER 9

150




6649.818

Start: 1830.706 Finish: 1938.010aleo-regular-400-subset.woff2

Start: 1832.334 Finish: 2571.656





Start: 3069.368 Finish: 6299.920













Start: 3013.101 Finish: 6274.765













Start: 3048.320 Finish: 6288.993













Start: 2991.947 Finish: 6278.877













Start: 2996.647 Finish: 6286.860













Start: 3057.121 Finish: 6307.356













Start: 2993.617 Finish: 6271.513



Fallback Font Stage



aleo-regular-400-subset.woff2



TRA

CE

NU

MB

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

MB

ER 1

151

First PaintN/A



Start: 1542.099 Finish: 1765.306




Start: 1975.013 Finish: 6082.068













Start: 1968.698 Finish: 6056.297













Start: 1959.175 Finish: 6076.054













Start: 1964.946 Finish: 6056.446













Start: 1974.263 Finish: 6073.109













Start: 1959.798 Finish: 6049.887













Start: 1965.511 Finish: 6056.638













Start: 1969.438 Finish: 6071.531

TRA

CE

NU

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

152













Start: 2017.306 Finish: 6135.055













Start: 1986.730 Finish: 6076.921













Start: 1974.122 Finish: 6057.720













Start: 1973.276 Finish: 6060.319













Start: 1965.949 Finish: 6074.117













Start: 1973.526 Finish: 6057.039













Start: 1958.351 Finish: 6073.266



Resource MetricsSubset Fonts All Fonts

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

1

153

First Paint2476.502























Start: 1564.588 Finish: 4657.199













Start: 1569.579 Finish: 4674.885













Start: 1561.254 Finish: 4668.489













Start: 1549.554 Finish: 4752.770













Start: 1564.887 Finish: 4697.719













Start: 1572.897 Finish: 4812.042







Stylesheets parsed




TRA

CE

NU

MB

ERTR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3TR

AC

E N

UM

BER

4TR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7A

CE

NU

MB

ER 8

154


5022.512

1922.421 Start: 1566.423 Finish: 2564.208aleo-regular-400.woff2

Start: 1567.427 Finish: 4802.796













Start: 1553.910 Finish: 4749.548













Start: 1548.466 Finish: 4648.386













Start: 1570.868 Finish: 4664.959













Start: 1550.988 Finish: 4738.575













Start: 1548.694 Finish: 4643.690













Start: 1557.124 Finish: 4652.558













Start: 1556.688 Finish: 4649.415

TRTR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5

155






Resource Metrics






Start: 2758.038 Finish: 6798.904





Resource Metrics






Start: 2778.298 Finish: 6764.446





Resource Metrics






Start: 2760.857 Finish: 6778.851





Resource Metrics






Start: 2770.106 Finish: 6783.023





Resource Metrics






Start: 2769.122 Finish: 6780.612





Resource Metrics






Start: 2744.680 Finish: 6751.255





Resource Metrics






Start: 2773.514 Finish: 6800.588

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

156





Resource Metrics






Start: 2793.387 Finish: 6774.103





Resource Metrics






Start: 2751.841 Finish: 6763.983





Resource Metrics






Start: 2765.776 Finish: 6791.144





Resource Metrics






Start: 2712.893 Finish: 6754.296





Resource Metrics






Start: 2713.363 Finish: 6758.673





Resource Metrics






Start: 2778.176 Finish: 6787.175





Resource Metrics






Start: 2750.757 Finish: 6795.677


Resource Metrics

Stylesheets parsed All Fonts

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4R

15

157

First Paint3549.359




2626.452 lato-regular-400.woff2Start: 2710.809 Finish: 6190.957










open-sans-regular-400-subset.woff2Start: 1529.275 Finish: 2115.212


All Fontsopen-sans-light-300.woff2

Start: 2362.549 Finish: 3258.814open-sans-regular-400.woff2

Start: 2365.359 Finish: 3270.237open-sans-semi-bold-600.woff2

Start: 2367.146 Finish: 3280.647











Start: 2355.888 Finish: 3307.907











Start: 2365.640 Finish: 3322.715











Start: 2349.278 Finish: 3255.863











Start: 2349.613 Finish: 3318.278











Start: 2365.355 Finish: 3285.412



open-sans-regular-400-subset.woff2All Fonts

open-sans-light-300.woff2

TRA

CE

NU

MB

ETR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3TR

AC

E N

UM

BER

4TR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6B

ER 7

158




3544.470

Start: 1515.073 Finish: 2102.258




Start: 2352.320 Finish: 3306.433











Start: 2340.924 Finish: 3243.315











Start: 2347.276 Finish: 3266.574











Start: 2350.558 Finish: 3308.231











Start: 2336.058 Finish: 3260.195











Start: 2320.984 Finish: 3270.152











Start: 2349.456 Finish: 3259.278











Start: 2358.116 Finish: 3306.115

TRA

CE

NU

MTR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

159

First Paint3549.085











Start: 2349.307 Finish: 3289.904









All Fontsopen-sans-regular-400.woff2

Start: 1510.533 Finish: 2364.224open-sans-light-300.woff2


Start: 1512.745 Finish: 2411.490











Start: 1529.578 Finish: 2432.212











Start: 1522.563 Finish: 2423.129











Start: 1516.447 Finish: 2420.022











Start: 1538.591 Finish: 2439.577











Start: 1522.747 Finish: 2424.235

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3TR

AC

E N

UM

BER

4TR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6

160











Start: 1531.152 Finish: 2428.307











Start: 1500.393 Finish: 2401.137











Start: 1521.479 Finish: 2423.458











Start: 1524.931 Finish: 2424.741











Start: 1524.474 Finish: 2424.089











Start: 1512.930 Finish: 2416.033











Start: 1512.145 Finish: 2412.049





Stylesheets parsed



Start: 1519.050 Finish: 2396.590

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

E N

UM

BER

14

161



3320.035

2461.086 open-sans-semi-bold-600.woff2Start: 1521.467 Finish: 2421.430











Start: 1521.557 Finish: 2424.324












Start: 1872.027 Finish: 2791.161











Start: 1878.012 Finish: 2746.394











Start: 1873.341 Finish: 2736.564











Start: 1883.015 Finish: 2751.139











Start: 1880.139 Finish: 2690.699










TRA

CTR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

AC

E N

UM

BER

6

162

First Paint2635.892


Start: 1876.727 Finish: 2756.654











Start: 1855.895 Finish: 2724.294











Start: 1875.316 Finish: 2746.799











Start: 1876.536 Finish: 2749.721











Start: 1876.600 Finish: 2753.066











Start: 1865.494 Finish: 2732.265











Start: 1868.787 Finish: 2697.752











Start: 1880.496 Finish: 2792.588

Visual Metrics Resource Metrics

TRTR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3

163

First PaintFirst Paint2628.844




Subset Fontopen-sans-regular-400-subset.woff2

Start: 1768.726 Finish: 1847.821





Start: 1864.983 Finish: 2720.903











Start: 1861.403 Finish: 2718.867












Start: 1833.122 Finish: 2700.507











Start: 1844.905 Finish: 2698.508











Start: 1821.251 Finish: 2704.843











Start: 1834.006 Finish: 2640.913











Start: 1819.589 Finish: 2707.727



open-sans-regular-400-subset.woff2All Fonts

open-sans-light-300.woff2

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

BER

6

164




2940.279

Start: 1521.353 Finish: 1609.350




Start: 1831.426 Finish: 2676.714











Start: 1809.848 Finish: 2631.134











Start: 1815.385 Finish: 2632.551











Start: 1823.844 Finish: 2650.462











Start: 1815.006 Finish: 2671.845











Start: 1821.873 Finish: 2650.641











Start: 1812.517 Finish: 2689.846











Start: 1826.087 Finish: 2639.057

TRA

CE

NU

MTR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3

165

First Paint2887.365











Start: 1796.334 Finish: 2669.892











Start: 1825.022 Finish: 2638.990












Start: 1520.138 Finish: 2627.754











Start: 1510.881 Finish: 2594.637











Start: 1513.392 Finish: 2609.621











Start: 1531.979 Finish: 2643.069











Start: 1508.477 Finish: 2622.376

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

166











Start: 1517.184 Finish: 2658.494











Start: 1521.549 Finish: 2683.547











Start: 1508.660 Finish: 2620.655











Start: 1527.716 Finish: 2652.257











Start: 1515.873 Finish: 2671.503











Start: 1511.098 Finish: 2648.998











Start: 1511.577 Finish: 2606.593





Stylesheets parsed



Start: 1515.637 Finish: 2596.232

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2E

NU

MB

ER 1

3

167



2860.617

1781.607 open-sans-semi-bold-600.woff2Start: 1518.025 Finish: 2603.262











Start: 1523.080 Finish: 2636.366











Start: 1513.840 Finish: 2612.139






Resource Metrics





Start: 2974.149 Finish: 4800.059





Resource Metrics





Start: 2965.858 Finish: 4724.188





Resource Metrics


All Fontsopen-sans-semi-bold-600.woff2



Start: 2953.555 Finish: 4700.671





Resource Metrics





Start: 3021.844 Finish: 4785.617




Resource Metrics





TRA

CTR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3TR

AC

E N

UM

BER

4A

CE

NU

MB

ER 5

168

First Paint4728.265


Start: 2958.004 Finish: 4733.621





Resource Metrics





Start: 2966.105 Finish: 4755.537





Resource Metrics





Start: 2941.676 Finish: 4753.424





Resource Metrics





Start: 2949.961 Finish: 4738.415





Resource Metrics





Start: 2956.176 Finish: 4756.956





Resource Metrics





Start: 2985.473 Finish: 4770.748





Resource Metrics





Start: 2972.475 Finish: 4797.559





Resource Metrics





Start: 2951.184 Finish: 4685.253


TRTR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

169









Start: 2944.207 Finish: 4705.460





Resource Metrics





Start: 2941.981 Finish: 4711.312





Resource Metrics





Start: 2972.142 Finish: 4772.532










Start: 2308.826 Finish: 3911.966lato-regular-italic-400.woff2



Start: 2315.036 Finish: 4030.016












Start: 2322.629 Finish: 4019.013












Start: 2270.271 Finish: 4040.664












Start: 2299.757 Finish: 4024.164





TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3TR

AC

E N

UM

BER

4B

ER 5

170




4317.811

Start: 1513.428 Finish: 2099.127





Start: 2314.511 Finish: 4047.440












Start: 2310.057 Finish: 4017.401












Start: 2334.575 Finish: 4020.740












Start: 2322.840 Finish: 4032.939












Start: 2309.345 Finish: 4044.247












Start: 2280.874 Finish: 3975.782












Start: 2306.250 Finish: 4054.158











Start: 2318.566 Finish: 4020.048

TRA

CE

NU

MTR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1TR

AC

E N

UM

BER

12

171

First Paint4323.675













Start: 2308.349 Finish: 4020.238












Start: 2318.389 Finish: 4021.804












Start: 2310.411 Finish: 4031.838













Start: 1516.253 Finish: 2499.950












Start: 1516.305 Finish: 2503.282












Start: 1511.564 Finish: 2495.175












Start: 1516.698 Finish: 2504.777

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2TR

AC

E N

UM

BER

3TR

AC

E N

UM

BER

4

172












Start: 1504.637 Finish: 2495.832












Start: 1508.363 Finish: 2496.310












Start: 1510.237 Finish: 2492.784












Start: 1510.209 Finish: 2490.687












Start: 1514.998 Finish: 2500.276












Start: 1530.126 Finish: 2511.140












Start: 1501.793 Finish: 2490.000





Stylesheets parsed



Start: 1509.438 Finish: 2483.642

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0TR

AC

E N

UM

BER

11

E N

UM

BER

12

173



3281.409

2569.364 lato-bold-700.woff2Start: 1510.445 Finish: 2490.857













Start: 1515.016 Finish: 2503.951












Start: 1501.465 Finish: 2486.824












Start: 1513.721 Finish: 2495.777













Start: 3016.003 Finish: 4760.526












Start: 3133.122 Finish: 4849.575












Start: 3037.407 Finish: 4782.634










TRA

CTR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

AC

E N

UM

BER

4

174

First Paint3235.536



Start: 3044.744 Finish: 4783.506












Start: 3079.760 Finish: 4814.387












Start: 3015.929 Finish: 4779.599












Start: 3089.155 Finish: 4834.021












Start: 2989.754 Finish: 4733.078












Start: 2999.473 Finish: 4678.043












Start: 3026.592 Finish: 4783.937












Start: 2704.348 Finish: 4577.947


TRTR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1

175





Subset Fontlato-regular-400-subset.woff2

Start: 1804.540 Finish: 2452.381






Start: 2664.540 Finish: 4541.778












Start: 2719.937 Finish: 4500.085












Start: 2691.683 Finish: 4569.793












Start: 2743.438 Finish: 4492.539













Start: 1860.063 Finish: 3625.283












Start: 1892.482 Finish: 3649.345












Start: 1868.554 Finish: 3619.264





TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

BER

4

176




3806.974

Start: 1499.944 Finish: 1582.068





Start: 1868.703 Finish: 3627.108












Start: 1861.398 Finish: 3581.977












Start: 1885.466 Finish: 3618.443












Start: 1883.167 Finish: 3628.628












Start: 1878.123 Finish: 3582.799












Start: 1878.984 Finish: 3585.344












Start: 1886.882 Finish: 3639.661











Start: 1870.963 Finish: 3541.522

TRA

CE

NU

MTR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9TR

AC

E N

UM

BER

10

TRA

CE

NU

MB

ER 1

1

177

First Paint3812.267













Start: 1881.141 Finish: 3640.923












Start: 1874.654 Finish: 3644.962












Start: 1896.227 Finish: 3601.181












Start: 1870.962 Finish: 3624.782













Start: 1511.664 Finish: 2541.098












Start: 1526.690 Finish: 2568.335












Start: 1505.633 Finish: 2577.554

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

TRA

CE

NU

MB

ER 1

TRA

CE

NU

MB

ER 2

TRA

CE

NU

MB

ER 3

178












Start: 1514.359 Finish: 2584.672












Start: 1532.245 Finish: 2570.430












Start: 1511.254 Finish: 2555.972












Start: 1533.344 Finish: 2567.055












Start: 1515.463 Finish: 2562.458












Start: 1517.955 Finish: 2534.719












Start: 1511.986 Finish: 2530.571





Stylesheets parsed



Start: 1504.968 Finish: 2496.574

TRA

CE

NU

MB

ER 4

TRA

CE

NU

MB

ER 5

TRA

CE

NU

MB

ER 6

TRA

CE

NU

MB

ER 7

TRA

CE

NU

MB

ER 8

TRA

CE

NU

MB

ER 9

TRA

CE

NU

MB

ER 1

0E

NU

MB

ER 1

1

179



2912.228

1811.089 lato-bold-700.woff2Start: 1506.763 Finish: 2507.636













Start: 1507.567 Finish: 2486.196












Start: 1507.892 Finish: 2521.793












Start: 1507.408 Finish: 2540.451












Start: 1488.657 Finish: 2535.354






Resource Metrics


All Fontslato-bold-700.woff2

Start: 2370.999 Finish: 3899.030lato-regular-400.woff2



Start: 2477.997 Finish: 4077.727





Resource Metrics






Start: 2479.030 Finish: 4109.243



Resource Metrics




Start: 2477.271 Finish: 4077.894

TRA

CTR

AC

E N

UM

BER

12

TRA

CE

NU

MB

ER 1

3TR

AC

E N

UM

BER

14

TRA

CE

NU

MB

ER 1

5TR

AC

E N

UM

BER

1TR

AC

E N

UM

BER

2E

NU

MB

ER 3

180



4249.727

lato-regular-italic-400.woff2Start: 2495.901 Finish: 4087.915






Resource Metrics






Start: 2499.672 Finish: 4188.171





Resource Metrics






Start: 2481.703 Finish: 4073.325





Resource Metrics






Start: 2488.548 Finish: 4107.769





Resource Metrics






Start: 2504.488 Finish: 4024.965





Resource Metrics






Start: 2493.400 Finish: 4078.992





Resource Metrics






Start: 2475.142 Finish: 4122.180




Resource Metrics





Start: 2511.699 Finish: 4072.770

TRA

CTR

AC

E N

UM

BER

4TR

AC

E N

UM

BER

5TR

AC

E N

UM

BER

6TR

AC

E N

UM

BER

7TR

AC

E N

UM

BER

8TR

AC

E N

UM

BER

9R

AC

E N

UM

BER

10

181


4227.920






Resource Metrics






Start: 2437.987 Finish: 4062.858





Resource Metrics






Start: 2463.248 Finish: 4089.244





Resource Metrics






Start: 2458.442 Finish: 4071.073





Resource Metrics






Start: 2461.111 Finish: 4078.027





Resource Metrics






Start: 2459.154 Finish: 4079.134

TTR

AC

E N

UM

BER

11

TRA

CE

NU

MB

ER 1

2TR

AC

E N

UM

BER

13

TRA

CE

NU

MB

ER 1

4TR

AC

E N

UM

BER

15

Documents

Divalnu.diva-portal.org/smash/get/diva2:1326000/FULLTEXT01.pdf · 3.2. Trace-based implementation ...................................................................... 20 3.2.1