PHP Classes

File: index_4.php

Recommend this page to a friend!
  Classes of riccardo castagna   PHP Font Face Performance Control   index_4.php   Download  
File: index_4.php
Role: Example script
Content type: text/plain
Description: Example script
Class: PHP Font Face Performance Control
Optimize the load of page fonts embedding into CSS
Author: By
Last change:
Date: 5 years ago
Size: 22,765 bytes
 

Contents

Class file image Download
<?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=Tangerine" ); $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_display; if($s==true){ list($url_1, $url_2) = $ref->fileurl; list($ext_1, $ext_2) = $ref->filext; } else { list($url_1, $url_2) = $apilink; } ?> <!DOCTYPE html> <html lang='it'> <head> <title>Controlling Font Performance with font-display</title> <meta charset='utf-8'> <meta name='description' content='Controlling Font Performance with font-display'> <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\">"; }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\">"; } ?> <style media="none" onload="if(media!='all')media='all'" > <?php echo $font_1, $font_2; ?> body { margin: 0px; padding: 0px; } h1,h2, .montserrat {font-family:"Montserrat Alternates";} .tangerine {font-family:"Tangerine";font-size: 40px;} h1{ font-size: 35px; text-align: center; } h2 {font-size: 28px;text-align: center;} p { font-size: 16px; } .title{ width:100%; } </style> </head> <body> <div class="title"> <h1 >Controlling Font Performance with font-display, example n&deg;4</h1> <h2 >FONT-DISPLAY:FALLBACK, SIMULTANEOUSLY EXTERNAL WEB FONTS LOADED WITH PHP cURL MULTI ,<br>ALL WEB FONTS FILES ARE STORED LOCALLY</h2> </div> <p class="montserrat"> 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><br><br> 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;}<br><br> 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><br><br> With this php class there is also the possibility (VIEW:ADVANCED CLASS USAGE EXAMPLE N&deg;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&deg;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.<br><br> 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&deg;1 with two fonts not loaded simultaneously,<br> example N&deg;2 with seven different fonts loaded and stored locally and<br>example N&deg;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&deg;2.<br><br> example N&deg;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&deg;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&deg;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&deg;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&deg;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&deg;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><br><br> <strong>SIMPLE CLASS USAGE EXAMPLE N&deg;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&deg;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>