Jump to content

Font Icomoon - delay


Adlago
 Share

Recommended Posts

Load initiator - root.library.js

Delay load site -> 1300 - 1400 ms

This is a bad decision. This font loads a few little images and slows a lot loading site.
Please modify the initiator loading, as well as the font Awesome for example - from the index.

Lighthouse test recommends, for example, a use 'link-rel preload'

2013510653_Screenshotat2018-08-04013951.thumb.png.bde12c1f647418c52b33d9f31f4d84db.png

Link to comment
Share on other sites

  • 2 months later...

Hi Adlago

You can edit css to solve this. Search for icomoon (or woff and woff2) in CSS on your theme and add font-display: swap;   this will solve the lighthouse suggestion. 

https://css-tricks.com/almanac/properties/f/font-display/

Below an example..

@font-face {
  font-family: 'icomoon';
  font-display: swap;
  src:url('{url="applications/core/interface/font/icomoon.eot?v=-29n77j" base="none" noprotocol="true"}');
  src:url('{url="applications/core/interface/font/icomoon.eot?#iefix-29n77j" base="none" noprotocol="true"}') format('embedded-opentype'),
    url('{url="applications/core/interface/font/icomoon.woff?v=-29n77j" base="none" noprotocol="true"}') format('woff'),
    url('{url="applications/core/interface/font/icomoon.ttf?v=-29n77j" base="none" noprotocol="true"}') format('truetype'),
    url('{url="applications/core/interface/font/icomoon.svg?v=-29n77j#icomoon" base="none" noprotocol="true"}') format('svg');
  font-weight: normal;
  font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
  font-family: 'icomoon';
  font-display: swap;
  speak: none;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;

 

Link to comment
Share on other sites

  • 1 month later...
1 hour ago, mark007 said:

@Adlago

How did you solve this big problem?

What @rfcontrerasadvises is in a CSS file fonts

1266282735_Screenshotat2018-11-16213759.thumb.png.c0f3dd109a870990b7f124c28a0b5fb7.png

I tested it and work. But I removed the use of this code because the validator html5 reported an error.

On my site this report Lighthouse test  disappeared after a few optimizations - but I'm not sure which optimization I eliminated from this report.

Maybe if you share a link to your site, I can write some advice to you.

Link to comment
Share on other sites

28 minutes ago, mark007 said:

Very strange, I don't have the possibility to edit fonts.css ... there ist no fonts.css (it is not displayed) 

If you have any text entered in the Search templates field, you will not see all css.
I will do a few test  your site and later I will write what i found.

Link to comment
Share on other sites

3 minutes ago, Adlago said:

If you have any text entered in the Search templates field, you will not see all css.

no text ... that's really strange

3 minutes ago, Adlago said:

I will do a few test  your site and later I will write what i found.

Thank you very much !!

Link to comment
Share on other sites

2 minutes ago, mark007 said:

no text ... that's really strange

Check your default theme. It is possible that the theme you are using may have some limitations.

Observed bad indicators
- you are using a jam.js with protocol http 1.1 - this slows down

85418997_Screenshotat2018-11-16224055.thumb.png.8ecb6a3052a77e89c173b3a48d5c1282.png

-You have the wrong setting in the X-XXS Protection server

2061821911_Screenshotat2018-11-16225011.thumb.png.cf9cdac7ccd3643c4c3a2a91a77f48ef.png

- Many validation errors html5

https://validator.w3.org/nu/?doc=https%3A%2F%2Fwww.polar-chat.de%2Fhunde%2F

- 8 errors CSS level 3 + SVG

http://jigsaw.w3.org/css-validator/validator?uri=https%3A%2F%2Fwww.polar-chat.de%2Fhunde%2F&profile=css3svg&usermedium=all&warning=1&vextwarning=&lang=bg

Remove these errors and I'm sure your site works better.

Link to comment
Share on other sites

  • 2 years later...
Posted (edited)

It seems to me that IcoMoon is now only used for installation / update and in development mode. 

Admin

  • admin\install\css\fonts.css 
  • admin\install\css\misc.css
  • admin\install\font\icomoon.eot
  • admin\install\font\icomoon.svg
  • admin\install\font\icomoon.ttf
  • admin\install\font\icomoon.woff
  • admin\upgrade\css\fonts.css
  • admin\upgrade\css\misc.css 
  • admin\upgrade\font\icomoon.eot
  • admin\upgrade\font\icomoon.svg
  • admin\upgrade\font\icomoon.ttf
  • admin\upgrade\font\icomoon.woff 

Dev

  • applications\core\dev\codemirror\mode\sass\test.js

CKEditor

  • applications\core\interface\font\icomoon.eot
  • applications\core\interface\font\icomoon.svg 
  • applications\core\interface\font\icomoon.ttf 
  • applications\core\interface\font\icomoon.woff
Edited by SeNioR-
Link to comment
Share on other sites

1 hour ago, Maxxius said:

@AdlagoI wonder how could we completely remove the icomoon from IPS 4.4 version?

Where that font is it used exactly?

Time to upgrade! 😉

From the 4.5 changelog:

Quote

- Removed icomoon dependency from css. The icons which were created using this font have been replaced with FontAwesome and pure css equivalents. The icomoon files are still present, so they can be imported using custom.css if necessary.


 

Link to comment
Share on other sites

19 hours ago, SeNioR- said:

It seems to me that IcoMoon is now only used for installation / update and in development mode. 

Admin

  • admin\install\css\fonts.css 
  • admin\install\css\misc.css
  • admin\install\font\icomoon.eot
  • admin\install\font\icomoon.svg
  • admin\install\font\icomoon.ttf
  • admin\install\font\icomoon.woff
  • admin\upgrade\css\fonts.css
  • admin\upgrade\css\misc.css 
  • admin\upgrade\font\icomoon.eot
  • admin\upgrade\font\icomoon.svg
  • admin\upgrade\font\icomoon.ttf
  • admin\upgrade\font\icomoon.woff 

Dev

  • applications\core\dev\codemirror\mode\sass\test.js

CKEditor

  • applications\core\interface\font\icomoon.eot
  • applications\core\interface\font\icomoon.svg 
  • applications\core\interface\font\icomoon.ttf 
  • applications\core\interface\font\icomoon.woff

I also noticed that it is used as an unread content icon, which can be easily replaced and then as a spinner icons when browsing notifications/PM in head menu and in PM page when selecting different conversations.

Strange thing I went to applications/core/data/javascript.xml and replaced all instances of icon-spinner2 ipsLoading_tinyIcon with fa fa-spinner fa-pulse fa-fw and recached the skin. However javascript created in uploads/javascript_global/root_framework file still contains the old code 🤔

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...