Little tricks

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 )"}' a…

If you are using loading images from type "img src=" and the background images on your site, what should you do: - Use image code editing that loads with "img sec=" as described in the article here - Use image code editing that loads with background images as described in the article here - Remove a script if you have already used one or the other method - Place only this script <script> function init() { var imgDefer = document.getElementsByTagName('img'); for (var i=0; i<imgDefer.length; i++) { if(imgDefer[i].getAttribute('dota-src')) { imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('dota-src')); } } $(function(){ $('[data-bg]').each(funct…

Plugin developers often use loading images directly into the html template, for example: <div class="ipsType_developer class" style="padding-bottom: {{developer code}%{{else}}xx%{{endif}}; background-image:url('{{developer code}');{{endif}}"> This solution works very well, but the presence of many images that load, provides a delay in loading a site. Lazy loading accelerates speed site, but this method has many disadvantages and I personally do not use it. I offer you a relatively easy solution for loading background images after time "onload". 1. Edit the code listed above <div class="ipsType_developer class" style="padding-bottom: {{de…

Accelerate easy loading of your fonts. 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">

This is an easy way to load images after time onload. 1. Open template -> core_global_global_includeJS 2. Add this script at the bottom <script> function init() { var imgDefer = document.getElementsByTagName('img'); for (var i=0; i<imgDefer.length; i++) { if(imgDefer[i].getAttribute('dota-src')) { imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('dota-src')); } } } window.onload = init; </script> 3. For your images which you want loads after that time onload, change to a template code img src. If your code is type for example <img src = "{code ips images}" alt=""> change the code so <img src="data:image/pn…