-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_2.php
258 lines (248 loc) · 24.4 KB
/
index_2.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
<?php
/*************************************************************************************************************************
* Author: Riccardo Castagna MBA, PHP developer - Palermo (ITALY) https://api.whatsapp.com/send?phone=393315954155 *
* This php package solves the problem to charge an external font resource *
* with the "controlling font performance" using font-display options. *
* This option is useful, to fast load the external font and in general to have the control over browser behavioral *
* and, in particular, over how the different browsers have to load the external font. *
* This option is useful to make all text remains visible during web font loads, *
* leveraging the font-display CSS feature to ensure text is user-visible while web fonts are loading. *
* At the moment is no possible to add at any external font resource the font-display options, *
* when you call the query, for example, through google font API: *
* "https://fonts.googleapis.com/css?family=Montserrat+Alternates%3A300%2C500" *
* and you wish to add the descriptor param: "&font-display=fallback" *
* making something like this query: *
* "https://fonts.googleapis.com/css?family=Montserrat+Alternates%3A300%2C500&font-display=fallback". *
* Also with the alternative method using @import url(//fonts.googleapis.com/css?family=Open+Sans); inside css you are *
* not able to set up the values for font-display. And not even, I think I'm not wrong (I gave only a quick *
* look at this library), with the JavaScript library: *
* Web Font Loader: https://developers.google.com/fonts/docs/webfont_loader *
* At the moment the only way is the manual set up for each *
* css element: p {font-family: 'MyWebFont', fallback, sans-serif;} *
* As far as I know, google or someone else has not yet solved this issue and, to work, *
* the "font-display" descriptor option must be inserted as value inside the css function @font-face{...}. *
* *
* A possible way is, to use the PHP to manipulate this external resourse and add *
* the font-display option param inside the css function, moreover, in this way, the API keys, when these are necessary, *
* will be hidden. *
* With this php class there is also the possibility (VIEW:ADVANCED CLASS USAGE EXAMPLE N°2 FILE: INDEX_2.PHP) *
* to load the external fonts all together simultaneously, index_2.php. *
* To avoid changing this demo into a cyber attack to google servers, and if we want to prevent *
* google killing me and you; I joke, obviously, I joke ... ;), in the example N 2, I have entered the possibility, *
* for the external font files to be stored locally setting a param option: true for locally stored and false for not. *
* Since, usually, we don't change fonts every day, why we have to connect each time to this external resources ? *
* Is it necessary .... ? My thought is no, it is not necessary, instead, it need to set the .htaccess file with *
* a long time cache for the font files. *
* In the EXAMPLE TWO I have loaded seven different font simultaneously from only one server, *
* seven are too much, but I did it only for testing to show *
* that also in this case, with seven different fonts, all text remains visible with *
* the set up of the font-display during web fonts load. *
* Simultaneously, when the param option is set to true, *
* became only the check of the server to the external font resource, and the resources are downloaded only *
* if locally don't exists. *
* To avoid the critical request chain https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains *
* I have set up to defer (load asynchronously) the style with a small escamotage: *
* <style media="none" onload="if(media!='all')media='all'" > * *
* *
* SIMPLE CLASS USAGE EXAMPLE N°1 FILE:INDEX.PHP (FONT-DISPLAY YES, NO SIMULTANEOUSLY CHECK, *
* NO FONT FILES ARE STORED LOCALLY, .HTACCESS CACHE YES); *
* $ref= new Fontperformance; *
* $font_1 = $ref->fontdisplay("link_to_font_api","fallback"); *
* $font_2 = $ref->fontdisplay("link_to_font_api","auto"); *
* Where param 1 is a string, is the link to external font resource, in this example through google font api. *
* param 2 is a string, is the performance controlling option. Possible values are: *
* auto | block | swap | fallback | optional *
* *
* ADVANCED CLASS USAGE EXAMPLE N°2 FILE:INDEX_2.PHP (FONT-DISPLAY YES, SIMULTANEOUSLY CHECK YES, *
* ALL FONT FILES ARE STORED LOCALLY IF LOCALLY DO NOT EXIST, .HTACCESS CACHE YES); *
* $ref= new Fontperformance; *
* $apilink = array("link_to_font_api_1","link_to_font_api_n", ....); *
* $ref->multi_simul_fontdisplay($apilink,"fallback",true); *
* where the params1 is an array with all links to the font api, it's good, also, for only one font, *
* and where the param 2 is a string, is the performance controlling option. Possible values are: *
* auto | block | swap | fallback | optional , this will return an array with all fonts, *
* param 3: true o false, true for storing locally the exernal fonts, false for not storing, (default value is false). *
* *
* For a complete reference guide about font-display descriptor values please consult: *
* https://developers.google.com/web/updates/2016/02/font-display *
* https://www.w3.org/TR/css-fonts-4/#font-display-font-feature-values *
**************************************************************************************************************************/
include_once("./lib/class.fontperformance.php");
$ref= new Fontperformance;
$apilink =array(
"https://fonts.googleapis.com/css?family=Montserrat+Alternates",
"https://fonts.googleapis.com/css?family=Rancho",
"https://fonts.googleapis.com/css?family=Tangerine",
"https://fonts.googleapis.com/css?family=Roboto+Mono",
"https://fonts.googleapis.com/css?family=Cantarell",
"https://fonts.googleapis.com/css?family=Inconsolata",
"https://fonts.googleapis.com/css?family=Gaegu"
);
$s = true; //to store file font set it to true
$font_display = $ref->multi_simul_fontdisplay($apilink,"fallback", $s );
list($font_1,$font_2,$font_3,$font_4,$font_5,$font_6,$font_7)=$font_display;
if($s==true){
list($url_1, $url_2, $url_3,$url_4,$url_5,$url_6,$url_7) = $ref->fileurl;
list($ext_1, $ext_2, $ext_3,$ext_4,$ext_5,$ext_6,$ext_7) = $ref->filext;
} else {
list($url_1, $url_2, $url_3,$url_4,$url_5,$url_6,$url_7) = $apilink;
}
?>
<!DOCTYPE html>
<html lang='it'>
<head>
<title>Controlling Font Performance with font-display - (loaded simultaneously)</title>
<meta charset='utf-8'>
<meta name='description' content='Controlling Font Performance with font-display loaded simultaneously'>
<meta name='keywords' content='Font Performance font-display'>
<meta name='author' content='Riccardo Castagna'>
<meta name='robots' content='all'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <meta http-equiv='X-UA-Compatible' content='IE=edge'> -->
<link href='./php-icon.png' rel='shortcut icon' type='image/png'>
<?php
if ($s==true){
echo"<link rel=\"preload\" href=\"$url_1\" as=\"font\" type=\"font/$ext_1\" crossorigin=\"anonymous\">
<link rel=\"preload\" href=\" $url_2 \" as=\"font\" type=\"font/ $ext_2 \" crossorigin=\"anonymous\">
<link rel=\"preload\" href=\" $url_3 \" as=\"font\" type=\"font/ $ext_3 \" crossorigin=\"anonymous\">
<link rel=\"preload\" href=\" $url_4 \" as=\"font\" type=\"font/ $ext_4 \" crossorigin=\"anonymous\">
<link rel=\"preload\" href=\" $url_5 \" as=\"font\" type=\"font/ $ext_5 \" crossorigin=\"anonymous\">
<link rel=\"preload\" href=\" $url_6 \" as=\"font\" type=\"font/ $ext_6 \" crossorigin=\"anonymous\">
<link rel=\"preload\" href=\" $url_7 \" as=\"font\" type=\"font/ $ext_7 \" crossorigin=\"anonymous\">";
}else {
echo"<link rel=\"preload\" href=\"$url_1\" as=\"font\" crossorigin=\"https://fonts.googleapis.com\">
<link rel=\"preload\" href=\" $url_2 \" as=\"font\" crossorigin=\"https://fonts.googleapis.com\">
<link rel=\"preload\" href=\" $url_3 \" as=\"font\" crossorigin=\"https://fonts.googleapis.com\">
<link rel=\"preload\" href=\" $url_4 \" as=\"font\" crossorigin=\"https://fonts.googleapis.com\">
<link rel=\"preload\" href=\" $url_5 \" as=\"font\" crossorigin=\"https://fonts.googleapis.com\">
<link rel=\"preload\" href=\" $url_6 \" as=\"font\" crossorigin=\"https://fonts.googleapis.com\">
<link rel=\"preload\" href=\" $url_7 \" as=\"font\" crossorigin=\"https://fonts.googleapis.com\">";
}
?>
<style media="none" onload="if(media!='all')media='all'" >
<?php
/*****************************************************************
* to print you may use or list()=$array; like in this example or
* avoid list()=$array; and print inside style with foreach:
* <style> <?php foreach($font_display as $fonts){echo $fonts;} ?> ...
*****************************************************************/
echo $font_1, $font_2, $font_3, $font_4, $font_5, $font_6, $font_7;
?>
body {
margin: 0px;
padding: 0px;
}
.rancho {font-family:"Rancho";font-size: 35px;}
.monterrat {font-family:"Montserrat Alternates";font-size: 16px;}
.tangerine {font-family:"Tangerine";font-size: 40px;}
.roboto {font-family:"Roboto Mono";font-size: 14px;}
.cantarell{font-family:"Cantarell";font-size: 16px;}
.inconsolata{font-family:"Inconsolata";font-size: 16px;}
.gaegu{font-family:"Gaegu";font-size: 24px;}
h1, h2{
text-align: center;
}
.title{
width:100%;
}
</style>
</head>
<body>
<div class="title">
<h1 class="rancho">Controlling Font Performance with font-display, example n°2</h1>
<h2 class="gaegu">FONT-DISPLAY YES, SIMULTANEOUSLY CHECK YES,<br>
ALL FONT FILES ARE STORED LOCALLY IF LOCALLY DO NOT EXIST</h2>
</div>
<p class="monterrat">This php package solves the problem to charge an external font resource<br>
with the <strong>"controlling font performance"</strong> using font-display options.<br><br>
This option is useful, to fast load the external font and in general to have the control over browser behavioral<br>
and, in particular,<br> over how the different browsers have to load the external font.<br><br>
<strong>This option is useful to make all text remains visible during web font loads,<br>
leveraging the font-display CSS feature to ensure text is user-visible while web fonts are loading.</strong></p><br><br>
<p class="cantarell">At the moment is no possible to add at any external font resource the font-display options,<br>
when you call the query, for example, through google font API:<br>
"https://fonts.googleapis.com/css?family=Montserrat+Alternates%3A300%2C500"<br>
and you wish to add the descriptor param: "&font-display=fallback"<br>
making something like this query:<br>
"https://fonts.googleapis.com/css?family=Montserrat+Alternates%3A300%2C500&font-display=fallback".<br>
Also with the alternative method using @import url(//fonts.googleapis.com/css?family=Open+Sans); inside css you are<br>
not able to set up the values for font-display.<br> And not even, I think I'm not wrong (I gave only a quick<br>
look at this library), with the JavaScript library:<br>
<a href="https://developers.google.com/fonts/docs/webfont_loader">Web Font Loader </a><br>
At the moment the only way is the manual set up for each<br>
css element: p {font-family: 'MyWebFont', fallback, sans-serif;}</p><br><br>
<p class="roboto">As far as I know, google or someone else has not yet solved this issue and, to work,<br>
the "font-display" descriptor option must be inserted as value inside the css function @font-face{...}.<br><br>
In short,<a href="https://www.w3.org/TR/css-fonts-4/#font-display-font-feature-values">as reported by the W3C</a>, when a font is served by a third-party font foundry,<br> the developer does not control the @font-face rules[..],<br>
the importance to set a default policy for an entire font-family<br> is also useful to avoid the ransom note effect (i.e. mismatched font faces).<br><br>
<strong> A possible way is, to use the PHP to manipulate this external resourse and add<br>
the font-display option param inside the css function, moreover, in this way, the API keys, when these are necessary,<br>
will be hidden.</strong></p><br><br>
<p class="inconsolata"> With this php class there is also the possibility (VIEW:ADVANCED CLASS USAGE EXAMPLE N°2 FILE: INDEX_2.PHP)<br>
to load the external fonts all together simultaneously, index_2.php.<br>
To avoid changing this demo into a cyber attack to google servers, and if we want to prevent<br>
google killing me and you; I joke, obviously, I joke ... ;), in the example N°2, I have entered the possibility,<br>
for the external font files, to be stored locally setting a param option: true for locally stored and false for not.<br>
Since, usually, we don't change fonts every day, why we have to connect each time to this external resources ?<br>
Is it necessary .... ? My thought is no, it is not necessary, instead, it need to set the .htaccess file with<br>
a long time cache for the font files.<br>
In the EXAMPLE TWO I have loaded seven different font simultaneously from only one server,<br>
seven are too much, but I did it only for testing to show<br>
that also in this case, with seven different fonts, all text remains visible with<br>
the set up of the font-display during web fonts load.<br>
Simultaneously, when the param option is set to true,<br>
became only the check of the server to the external font resource, and the resources are downloaded only<br>
if locally don't exists.</p><br><br>
<p class="gaegu">To avoid the <a href="https://developers.google.com/web/tools/lighthouse/audits/critical-request-chains">critical request chain</a><br>
I have set up to defer (load asynchronously) the style with a small escamotage:<br>
style media="none" onload="if(media!='all')media='all'"<br><br>
Here you can see the ligthhouse reports, about performances, of these three demos,<br>example N°1 with two fonts not loaded simultaneously,<br>
example N°2 with seven different fonts loaded and stored locally and<br>example N°3 with seven different fonts loaded simultaneously but not stored locally.<br>
These tests are only indicative and to make a correct comparison<br> the quantities should be homogeneous, ie load the same number of fonts.<br>
In any case, from the various others tests carried out, the fastest is, in any case, the example N°2.<br><br>
example N°1 Emulated Nexus 5X, Throttled Fast 3G network,<br> Network throttling: 562,5 ms HTTP RTT, 1.474,6 Kbps down, 675 Kbps up (DevTools)<br>
CPU throttling: 4x slowdown (DevTools):<br>
<a href="https://googlechrome.github.io/lighthouse/viewer/?gist=b316fc892210f82dfcf56f5285c75ee6">lighthouse performance report N 1</a><br>
example N°1 Emulated Nexus 5X, Throttled Fast 3G network,<br> Network throttling: 150 ms TCP RTT, 1.638,4 Kbps throughput (Simulated)<br>
CPU throttling: 4x slowdown (Simulated):<br>
<a href="https://googlechrome.github.io/lighthouse/viewer/?gist=e79ffd09199fecaa5ecd35f84f3d32e8">lighthouse performance report N 1</a><br><br>
example N°2 Emulated Nexus 5X, Throttled Fast 3G network,<br> Network throttling: 562,5 ms HTTP RTT, 1.474,6 Kbps down, 675 Kbps up (DevTools)<br>
CPU throttling: 4x slowdown (DevTools):<br>
<a href="https://googlechrome.github.io/lighthouse/viewer/?gist=23b8f92d04eb3f32f6cfd7e317535510">lighthouse performance report N 2</a><br>
example N°2 Emulated Nexus 5X, Throttled Fast 3G network,<br> Network throttling: 150 ms TCP RTT, 1.638,4 Kbps throughput (Simulated)<br>
CPU throttling: 4x slowdown (Simulated):<br>
<a href="https://googlechrome.github.io/lighthouse/viewer/?gist=b01c2975e469b0a2d36ea2224a78a84f">lighthouse performance report N 2</a><br><br>
example N°3 Emulated Nexus 5X, Throttled Fast 3G network,<br> Network throttling: 562,5 ms HTTP RTT, 1.474,6 Kbps down, 675 Kbps up (DevTools)<br>
CPU throttling: 4x slowdown (DevTools):<br>
<a href="https://googlechrome.github.io/lighthouse/viewer/?gist=44ee33c578e928a59d04f13a60f18675">lighthouse performance report N 3</a><br>
example N°3 Emulated Nexus 5X, Throttled Fast 3G network,<br> Network throttling: 150 ms TCP RTT, 1.638,4 Kbps throughput (Simulated)<br>
CPU throttling: 4x slowdown (Simulated):<br>
<a href="https://googlechrome.github.io/lighthouse/viewer/?gist=7d88e7348587aa49bc582e0e78375520">lighthouse performance report N 3</a></p>
<br><br>
<p class="monterrat"><strong>SIMPLE CLASS USAGE EXAMPLE N°1 FILE:INDEX.PHP (FONT-DISPLAY YES, NO SIMULTANEOUSLY CHECK,<br>
NO FONT FILES ARE STORED LOCALLY, .HTACCESS CACHE YES);</strong><br>
$ref= new Fontperformance;<br>
$font_1 = $ref->fontdisplay("link_to_font_api","fallback");<br>
$font_2 = $ref->fontdisplay("link_to_font_api","auto");<br>
Where param 1 is a string, is the link to external font resource, in this example through google font api.<br>
param 2 is a string, is the performance controlling option. Possible values are:<br>
auto | block | swap | fallback | optional<br><br>
<strong>ADVANCED CLASS USAGE EXAMPLE N°2 FILE:INDEX_2.PHP (FONT-DISPLAY YES, SIMULTANEOUSLY CHECK YES,<br>
ALL FONT FILES ARE STORED LOCALLY IF LOCALLY DO NOT EXIST, .HTACCESS CACHE YES);</strong><br>
$ref= new Fontperformance;<br>
$apilink = array("link_to_font_api_1","link_to_font_api_n", ....);<br>
$ref->multi_simul_fontdisplay($apilink,"fallback", <strong>true</strong> );<br>
where the params1 is an array with all links to the font api,<br> it's good, also, for only one font,<br>
and where the param 2 is a string, is the performance controlling option. Possible values are:<br>
auto | block | swap | fallback | optional <br>,
param 3: true o false, true for storing locally the exernal fonts, false for not storing, (default value is false),<br>
this will return an array with all fonts.<br><br>
For a complete reference guide about font-display descriptors please consult:<br>
<a href="https://developers.google.com/web/updates/2016/02/font-display">Controlling Font Performance with font-display
</a><br>
<a href="https://www.w3.org/TR/css-fonts-4/#font-display-font-feature-values">W3C font display</a><br><br>
<a href="https://api.whatsapp.com/send?phone=393315954155">info & contacts</a>
</p>
<p class="tangerine">Yours sincerely<br>Riccardo Castagna</p>
</body>
</html>