Jump to content

Overview

About This Club

How to speed up loading IPS forums, our tips and offers
  1. What's new in this club
  2. Nophelet

    Wizcase - IP tools

    Полезен инструмент за определяне на собственото ви IP, а също така и на интересуващ ви сайт. Бърз и ненатоварен с реклами.
  3. If you are using an Apache server, you can Deny it in your htaccess file. Use this tool https://www.countryipblocks.net/acl.php Select which countries you want, and in the columne "Select Format" select Apache .htaccess Deny and click Create ACL Then Copy ACL to clipboard, and add this in your htaccess file.
  4. 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 this site and it works perfectly.
  5. 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(function(){ var bg = $(this).data('bg'); $(this).css('background-image','url(' + bg + ')'); }); });} window.onload = setTimeout(init, 600); </script> Now all your images will be loaded "onload" Note: If you don't understand these instructions or are looking for help, please contact me. Of course, I will help you, but for a fee.
  6. 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: {{developer code}%{{else}}xx%{{endif}};" data-bg="{{developer code}{{endif}}"> 2. Open the includeJS template and place the script in the template at the bottom. <script>$(function(){ $('[data-bg]').each(function(){ var bg = $(this).data('bg'); $(this).css('background-image','url(' + bg + ')'); }); });</script> That is all. Test with online servers and make sure you speed up your site. For example, use GtMetrix and open menu Waterfall - all your background images loading after red line (onload time). Also, PSI test stop warning your background images Note: If you are already using a script to defer images loaded with "img src=", then read an article about combined use of defer images.
  7. Nophelet

    Pleroad fonts

    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">
  8. 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/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" dota-src="{code ips images}" alt=""> 4. For articles image, find code in template <div class="cCmsRecord_image"> <a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}"><img class="ipsImage" src="{file="$record->_record_image_thumb" extension="cms_Records"}"></a> </div> and replace with this <div class="cCmsRecord_image"> <a href="{$record->url()}" title="{lang="read_more_about" sprintf="$record->_title"}"><img class="ipsImage" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" dota-src="{file="$record->_record_image_thumb" extension="cms_Records"}"></a> </div> 5. For avatars: Open template core_global_userPhoto, and replace everything with this code {{if $member->member_id and \IPS\Member::loggedIn()->canAccessModule( \IPS\Application\Module::get( 'core', 'members' ) )}} {{$memberURL = ( $warningRef ) ? $member->url()->setQueryString( 'wr', $warningRef ) : $member->url();}} <a href="{$memberURL}" {{if $hovercard}}data-ipsHover data-ipsHover-target="{$memberURL->setQueryString( 'do', 'hovercard' )}"{{endif}} class="ipsUserPhoto ipsUserPhoto_{$size}{{if $classes}} {$classes}{{endif}}" title="{lang="view_user_profile" sprintf="$member->name"}"> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" dota-src='{$member->photo}' alt='{$member->name}'></a> {{else}} <span class='ipsUserPhoto ipsUserPhoto_{$size} {{if $classes}}{$classes}{{endif}}'> <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" dota-src='{$member->photo}' alt='{$member->name}'></span> {{endif}} Note: If you are already using a script to defer images loaded with "background-image:url...", then read an article about combined use of defer images.
  9. Due to lack of interest, the default theme is not developed. If you are still interested in such a topic, please contact us via the contact form and we will offer you an offer.
  10. This validator checks the markup validity of Web documents in HTML, XHTML, SMIL, MathML, etc. If you wish to validate specific content such as RSS/Atom feeds or CSS stylesheets, MobileOK content, or to find broken links, there are other validators and tools available.
  11. Choose a color Click on the squares and paint your logo Download when you are finished Put the favicon.ico file into your webserver directory Optionally publish it under the CC (Creative Commons) license
  12. Supported image types: GIF, JPG, PNG Max file size: 30MB
  13. Nophelet

    CSS Compressor

    Use CSS Compressor to compress CSS (CSS 1, CSS 2, CSS 2.1 & CSS 3) to reduce CSS code size and make your website load faster. You can select from 4 levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. It is quick, easy and free!
  14. Nophelet

    Html compressor

    Safely reduce the size of your html code, javascript and css files, make your websites load faster, reduce mobile transfer costs and optimize storage on embed systems.
  15. Optimize your images with a perfect balance in quality and file size.
  16. Reducing the number of page components is the performance golden rule, the single most important thing when it comes to building faster pages. If you have time for only one performance optimization, focus on this one.
  17. Click UPLOAD FILES to choose up to 20 PNG images you want to compress. Wait for the upload and compression processes to complete. Click DOWNLOAD ALL to get all the compressed files at once, grouped in a ZIP archive. Or you can download each image individually.
  18. Nophelet

    B.I.R.M.E.

    BIRME is a flexible and easy to use batch image resizer. It can resize your images in bulk to any specific dimensions and crop your images proportionately if necessary. It's an online tool and that means you don't need to download or install anything on your computer. BIRME is absolutely free to use.
  19. Nophelet

    Resize photo

    Resize Photos is a free online photo tool for resizing and compressing your digital photos for posting on the web, in email or on forums. There is no software to download, just upload your pictures and begin applying effects like captions, borders, reflections, shadows, rounded corners, rotation, or view the exif data.
  20. Most sites lose half their visitors while loading.
  21. Nophelet

    Dareboost

    Get a new Performance and Quality report
  22. Nophelet

    Varvy Seo tools

    See how well a page follows the Google guidelines.
  23.  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.