Adlago

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

Did you put the code that I posted above? I do not currently see this code on your site. You now have 13 px for your body text. Put the code above in your Custom CSS

Share a link to your community please. Specify areas where your font needs to be changed. The code above does not affect the tablet. If you also ask for a tablet, change 767 to 979

Add in your Custom CSS @media screen and (max-width: 767px) .ipsType_normal, .ipsType_medium, body { font-size: 17px; }

When a site administrator gets used to not leaving "harmless" mistakes, ie. not to compromise - then this administrator will find any resource that creates a delay. There are too many methods to overcome delays on the net. For example - image preload, especially for mobile performance, "onload" of other images, font preload, etc. Of course, different cross-tests should be performed each time such techniques are used. This is a necessity because sometimes an improvement is good for a desktop, but it is bad for mobile performance, and so on. The process of loading speed analysis is time consuming enough to be underestimated. There is enough work on everything a site uses - before applying acceleration techniques.