Adlago

I use a webp logo - it works well for me. I use this in a template logo <a href='{setting="base_url"}' id='elLogo' accesskey='1'><div class='mylogo' title="mylogo"></div></a> And I load a logo through a custom CSS.

Did you consider this? Thanks

This addition removes the PSI report, but it does not speed up your site. Check out this test - https://www.webpagetest.org/result/210113_DiWQ_fa63b920353923e9e4245a191ee25087/1/details/ your mobile images are loaded ahead of time "onload" - and the point of delaying loading images is when images are loaded after "onload" time ... Lazy load that is embedded has a fixed delay time loading images - which is enough and works well for desktops, but not enough time for mobile. This mobile time should be greater than 2 seconds for mobile image loading to be effective. Also - there are many errors in your templates when validating html5 - https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.clubedohardware.com.br%2F You are using CDN, but in order for your site to run much faster for your visitors, I think you need to follow these steps: 1. Stop the CDN 2. Remove all errors when validation html5 3. Optimize your site - as much as possible (there are many techniques you can do). 4. When you achieve good results from PSI (over 65 for mobile) - you will have a fast enough site. 5. Activate CDN - it will be even better. If I'm in your place, so I would do ...

ACP - Support - Something isn't working correctly and Continue

Contact the author of your theme - there are incorrectly used style elements.

PS. The only unpleasant thing about using the data-src is that the IPS has fixed the delay time in javascript. My experiments report that the time that IPS has fixed, for the data-src, is ideal for desktop, but it is a bit for mobile ... I will be happy if IPS takes this time as an option in ACP, so that the administrator can increase / reduces this time for different devices. Moreover, this time should be longer for sites using ads, and less for sites without ads ... It is especially important for mobile .

This is a good idea - but not everything is accepted by html5 validation. I've experimented with much better performance attributes, but unfortunately validation html5 makes them errors

IPS for delayed loading images uses data-src in java script. I apply the following for a user photo on my site - in a template userPhoto I replace this <img src='{$member->photo}' alt='{$member->name}'> with <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='{$member->photo}' alt='{$member->name}'> For react like in a template reactionOverview I replace <img src='{$reaction->_icon->url}' alt="{lang="reaction_title_{$reaction->id}" escape="true"}"> with <img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src='{$reaction->_icon->url}' alt="{lang="reaction_title_{$reaction->id}" escape="true"}"> This works well on my site.

Yes, it's best to create your own template and put your Critical CSS in it.

Critical CSS is an inline presented CSS. This CSS rules is tagged ... <style> your Critical CSS rules </style> and placed in a head site before closing the tag head. (</head>)

I have done too many experiments and analyzes. The location I mentioned for this preload link, at least in my community, provides the best speed-efficiency balance.

You will have some improvement in site loading speed if you use a preload font. Font awesome loads a file size of 75 kb and this creates a certain delay. Try and paste the code below, into your global template, after close the footer tag (</footer>) <link rel="preload" href="/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">

No, that has nothing to do with it. The main delay in your site is long time FCP Your CLS is negligibly small.

For starters - eliminate all errors https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.clubedohardware.com.br%2F

Please share a link to your community for tests.

Now I saw that you are using a forum directory for your site. Use this code <link rel="preload" href="/forum/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">

Try to find the best place for this code. For me, it works well after a mobileNavigation template, before a java script template. You can also try to put it in your head before loading the css code

Add preload fonts in your global template, after closing tag footer (</footer>), or this code <link rel="preload" href="/applications/core/interface/font/fontawesome-webfont.woff2?v=4.7.0" as="font" type="font/woff2" crossorigin="anonymous">

For logo Open template core_front_global / logo, and change <a href='{setting="base_url"}'... with <a href ='www.mysite.com/welcome'... For Home button, open template core_front_global / breadcrumb, find and change <ul data-role="breadcrumbList"><li><a title="{lang="home"}" href='{setting="base_url"}'> with <ul data-role="breadcrumbList"><li><a title="{lang="home"}" href='www.mysite.com/welcome'>

Nope, no one was interested in that. I have no idea how IPS will solve issues with speed improvements.

Preload CSS from a few months ago is not evaluated by test servers, incl. and from PSI. The effect of preload loading CSS to improve loading speed is very small and not worth using. What removes CSS render-blocking is only critical CSS. But creating a working well-critical CSS takes a lot of time and this increases the budget maintenance of the site. For several months I have been working on a project where I move a large volume of external CSS to the end of a global template before loading a java script. I also use and create my own critical css in the head, tailored to my content and the most important css rules. Of course, all these changes that I make are related to many tests on the site, both with different test servers and direct tests with different browsers. However, a good site visitor experience is more important than a site loading speed. For now, the tests on my site have an average mobile loading speed of 75 and 97 for the desktop in PSI tests. But I still have a lot of work and analysis ... Specific advice for your site, for improvement, I can write, but if you share a link to your community.

Use @username

See this

When the rule is removed in the misc.css file .ipsCoverPhoto_photo { width: 100%; /*opacity: 0.0001;*/ } cover photo is now displayed correctly in the mobile app. Please review this.

In some template you have an inline style of 11 px. Check out your forum templates and edit it