
About This Club
How to speed up loading IPS forums, our tips and offers
- What's new in this club
-
Websiteplanet
Nophelet posted a post in a topic in Speed up IPS's Web tests
-
Wizcase - IP tools
Nophelet posted a post in a topic in Speed up IPS's Web testsПолезен инструмент за определяне на собственото ви IP, а също така и на интересуващ ви сайт. Бърз и ненатоварен с реклами.
-
Sustainability one year later
Nophelet posted a post in a topic in Speed up IPS's My tests
- Restrict access to your site from a country
Nophelet posted a post in a topic in Speed up IPS's Online toolsIf 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.- Render-blocking CSS - removing
Nophelet posted a post in a topic in Speed up IPS's Little tricksCode 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.- Defer images combined
Nophelet posted a post in a topic in Speed up IPS's Little tricksIf 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.- Defer background images
Nophelet posted a post in a topic in Speed up IPS's Little tricksPlugin 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.- Pleroad fonts
Nophelet posted a post in a topic in Speed up IPS's Little tricksAccelerate 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">- Defer offscreen images
Nophelet posted a post in a topic in Speed up IPS's Little tricksThis 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.- Security Headers
Nophelet posted a post in a topic in Speed up IPS's Online tools- HTTP 2 test online
Nophelet posted a post in a topic in Speed up IPS's Online tools- Dareboost test 12.01.2018
Nophelet posted a post in a topic in Speed up IPS's My tests- Default_speed 1.0.3
Nophelet posted a post in a topic in Speed up IPS's Critical CSSDue 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.- Html5 Validation
Nophelet posted a post in a topic in Speed up IPS's Online toolsThis 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.- favicon ico generator
Nophelet posted a post in a topic in Speed up IPS's Online toolsChoose 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- Gif and other img optimizator
Nophelet posted a post in a topic in Speed up IPS's Online tools- CSS Compressor
Nophelet posted a post in a topic in Speed up IPS's Online toolsUse 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!- Html compressor
Nophelet posted a post in a topic in Speed up IPS's Online toolsSafely 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.- Smart PNG and JPEG compression
Nophelet posted a post in a topic in Speed up IPS's Online tools- CSS Sprites Generator
Nophelet posted a post in a topic in Speed up IPS's Online toolsReducing 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.- Compress png jpeg and pdf
Nophelet posted a post in a topic in Speed up IPS's Online toolsClick 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.- B.I.R.M.E.
Nophelet posted a post in a topic in Speed up IPS's Online toolsBIRME 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.- Resize photo
Nophelet posted a post in a topic in Speed up IPS's Online toolsResize 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.- Google mobile speed
Nophelet posted a post in a topic in Speed up IPS's Web tests- Dareboost
Nophelet posted a post in a topic in Speed up IPS's Web tests - Restrict access to your site from a country