Adlago

For several days I've introduced another experiment to my live site. I've created another template, preload_js with content: {{foreach array_unique( array_filter( \IPS\Output::i()->jsFiles ), SORT_STRING ) as $js}} {{$js = \IPS\Http\Url::external( $js );}} <link rel="preload" href='{{if $js->data["host"] == parse_url( \IPS\Settings::i()->base_url, PHP_URL_HOST )}}{expression="$js->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}{{else}}{expression="$js"}{{endif}}' as="script"> {{endforeach}} and I put a template after the template preload_css in global templates. My original template includeJS loads before closing body tag. This improves the speed loading site, as well as time First paint and DOM loaded. If someone wants to test on their site and share results.

For IE status In Development https://developer.microsoft.com/en-us/microsoft-edge/platform/status/preload/ For FF after v.56 incl. https://platform-status.mozilla.org/#link-rel-preload For Android Browser - Works. It is important to note - if a browser client does not support the preload function, the site will continue to load as before. CSS are loading with rel='stylesheet' and the use of rel = "preload" creates only priority in CSS processing and this removes render-blocking.

I have written a lot about this subject, incl. and i have a design to use the critical CSS to remove the Render-blocking CSS. Yes, it works, but it takes a lot of time to analyze and develop a good critical CSS. For a few days I've been exploring another idea that came to my mind. Code in IncludeCSS works perfectly and this code tells the browser - download all those CSS and use them to represent the site. But this code does not tell the browser when and how to use them. The idea I'm using right now is - I created a new template that I put before closing the tag head. In my experiment, this template looks like this: {template="preload_css" app="core" location="global" group="analysis" params=""} In this template I placed this code {{foreach array_unique( \IPS\Output::i()->cssFiles, SORT_STRING ) as $file}} <link rel='preload' href='{expression="\IPS\Http\Url::external( $file )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style"> {{endforeach}} {{$customCss = \IPS\Theme::i()->css( 'custom.css', 'core', 'front' );}} {{foreach $customCss as $css}} <link rel='preload' href='{expression="\IPS\Http\Url::external( $css )->setQueryString( 'v', \IPS\CACHEBUST_KEY )"}' as="style"> {{endforeach}} Now, besides a browser command to download all CSS, I send the browser a command - use these CSS as a matter of priority. And the result of over 100 my tests - no render-blocking CSS ... There are no side effects or any other bad impact. I've installed it on my live site and it works perfectly. If a development team wishes, let him test it and apply it in later releases. This will speed up all sites using this really good platform.

Add in your globalTemplate before </head> <link rel="preload" href="https://your site/applications/core/interface/font/icomoon.woff?v=-29n77j" as="font" type="font/woff" crossorigin="anonymous"> <link rel="preload" href="https://your site/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">

For a normal users - you are right. Cache works correctly. But when a speed test is done by a machine - incl. and these Google machines, these machines do not use cache. The http/2 protocol speeds up CSS and JS, but font awesome slow down a browser. Here are three concurrent tests from different test server- all reflect this delay.

This test I do on this site as a guest - as every online tool does a test. Such an estimate speed makes and Google when analyzing the sites in which it publishes advertisements. This reduces the price paid by site owners. Of course, users who logged into a site do not have this issue. But when it comes to money - any delay in loading site is bad. And I see many sites that rely on this ...

I agree that using data: image must also be refined and very carefully used. And here we have a reasonable compromise. But I think there should be quicker decisions - I'm also looking for them.

Pay attention - how late is the loading font awesome well after basic resources have been loaded - and the browser waits - that slows site rendering. More curious is that this delay reduces the value of ads, of course for anyone who expects money from Google. I'm not worried about myself - I do not use ads. But I think the font awesome is a poor place in the suite. The same delay, unfortunately, is also observed in 4.4 alpha.

yes, but the added weight is incomparably less. Font awesome causes a download of 65kB file and this slows rendering.

Font awesome is not the best solution. Why - because it provides a delay in loading site ... And the more new things create the more you will be delayed loading site. I personally got tired of watching empty squares at the loading site. Perhaps it is good to look for other solutions. For example - the three icons that load in mobile version navigation, I replaced with data images. Loading instantly ...

Yes, guest page after refresh time, Chrome browser and IE do not load the exact CSS key. Therefore, CSS does not download to these browsers on a this page. Clear cache manually on nginx caching temporarily fixes this. Therefore, it is better not to use this guest page.

If you've turned on Cache page output for guests , turn it off.

If you using Memcached or Redis - MySQL Database storage method provides the best performance. If your caching method is "No caching" - use you for Data Storage Method - File System.

Yes, it's fine now. And there is no longer a defer parsing and first byte is OK

Now it's in the right place, but change the code. Now your code loads like this <script type="text/javascript" data-cfasync="false"> var _foxpush = _foxpush || []; _foxpush.push(['_setDomain', 'carnitycom']); (function(){ var foxscript = document.createElement('script'); foxscript.src = '//cdn.foxpush.net/sdk/foxpush_SDK_min.js'; foxscript.type = 'text/javascript'; foxscript.async = 'true'; var fox_s = document.getElementsByTagName('script')[0]; fox_s.parentNode.insertBefore(foxscript, fox_s);})(); </script> <div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element'); } </script> Do it this way <div id="google_translate_element"></div><script type="text/javascript"> function googleTranslateElementInit() { new google.translate.TranslateElement({pageLanguage: 'en', includedLanguages: 'ar', layout: google.translate.TranslateElement.InlineLayout.HORIZONTAL}, 'google_translate_element'); } </script> <script type="text/javascript" data-cfasync="false"> var _foxpush = _foxpush || []; _foxpush.push(['_setDomain', 'carnitycom']); (function(){ var foxscript = document.createElement('script'); foxscript.src = '//cdn.foxpush.net/sdk/foxpush_SDK_min.js'; foxscript.type = 'text/javascript'; foxscript.async = 'true'; var fox_s = document.getElementsByTagName('script')[0]; fox_s.parentNode.insertBefore(foxscript, fox_s);})(); </script> Or, move the first script here after the second

Now you have placed between the footer closures and the div id elMobileDrawer That's wrong. When there is a html code between a JavaScript, it causes a deferring parsing.

Not in the head, Move it bottom global template, before {template="includeJS" if="theme.js_include == 'footer'" app="core" group="global" location="global" params=""} {template="viglink" if="settings.viglink_enabled" app="core" group="global" params=""}

This <div id="google_translate_element"> provokes your defer parsing. Move it before the JavaScript code for loading, along with the google translate script.

Result of several quick tests 1. Many validation errors html5 https://validator.w3.org/nu/?doc=https%3A%2F%2Fcarnity.com%2F 2. Errors in validation CSS Level 3 http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fcarnity.com%2F&amp;profile=css3svg&amp;usermedium=all&amp;warning=1&amp;vextwarning=&amp;lang=bg 3. Complete report of resources in your site. Each row with a click shows more information. https://yellowlab.tools/result/f6sg7azukt 4. For a GtMetrix report - you use a cloudflare - this makes analysis difficult. Perhaps it is good to stop a cloudflare, to do a good optimization of everything your site uses, then to activate cloudflare. 5. Also, see Lighthouse report your performance.

Check your default theme. It is possible that the theme you are using may have some limitations. Observed bad indicators - you are using a jam.js with protocol http 1.1 - this slows down -You have the wrong setting in the X-XXS Protection server - Many validation errors html5 https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.polar-chat.de%2Fhunde%2F - 8 errors CSS level 3 + SVG http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.polar-chat.de%2Fhunde%2F&amp;profile=css3svg&amp;usermedium=all&amp;warning=1&amp;vextwarning=&amp;lang=bg Remove these errors and I'm sure your site works better.

If you have any text entered in the Search templates field, you will not see all css. I will do a few test your site and later I will write what i found.

What @rfcontrerasadvises is in a CSS file fonts I tested it and work. But I removed the use of this code because the validator html5 reported an error. On my site this report Lighthouse test disappeared after a few optimizations - but I'm not sure which optimization I eliminated from this report. Maybe if you share a link to your site, I can write some advice to you.

Thanks

Even when you do not use these icons, this font is loaded. Read my first sentence on this topic.