Get the most out of your Centmin Mod LEMP stack
Become a Member

Forum Style Optimisation Tweaks

Discussion in 'Forum Feedback & Suggestions' started by eva2000, Jan 9, 2019.

  1. eva2000

    eva2000 Administrator Staff Member

    45,441
    10,313
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,995
    Local Time:
    1:20 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    Being a pagespeed obsessed addict, I decided to optimise my forum style's Fontawesome usage by reducing the size of the forum style's default Fontawesome css and web font sizes so that I only load the web fonts that my particular forum style uses. This is opposed to loading a heap of web fonts that come in default Fontawesome bundle which are never used by the forum style.

    End result is reducing web font sizes dramatically

    i.e.
    • woff2 font dropped from 76KB to 19.5KB and the bundled uncompressed css dropped from 31KB to 12KB.
    • woff font dropped from 96KB to 42KB
    • ttf font dropped from 162KB to 42KB
    • eot font dropped from 162KB to 42KB
    • otf front increased from 132KB to 157KB ??
    • svg font dropped from 434KB to 153KB

    default

    flatawesome-plus-default-01.png
    optimised

    flatawesome-plus-optimised-01.png

    webpagetest.org test shows optimised fontawesome.css is 2.2KB compressed !

    wpt-fontawesome-woff2-css-01.png

    Not sure if I managed replicate all forum style's Fontawesome referenced calls, so there maybe missing icons somewhere. If folks find such bugs, reply to this thread and let me know :) ;)
     
  2. eva2000

    eva2000 Administrator Staff Member

    45,441
    10,313
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,995
    Local Time:
    1:20 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    seems some of it's broken now LOL so switched back to previous version for now until figure out what went wrong :)

    edit: seems it's due to differences in CSS pseudo elements' referenced unicodes for updated font icons that need adjusting Font Awesome 5 CSS Pseudo-Elements. Will revisit this when I have more free time :)

    upload_2019-1-9_12-33-19.png

    upload_2019-1-9_12-33-36.png
     
    Last edited: Jan 9, 2019
  3. wmtech

    wmtech Active Member

    124
    37
    28
    Jul 22, 2017
    Ratings:
    +97
    Local Time:
    4:20 PM
    You can use iconify.design instead. Downloads just the icons you need.
     
  4. eva2000

    eva2000 Administrator Staff Member

    45,441
    10,313
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,995
    Local Time:
    1:20 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    interesting .. will check it out as well :)
     
  5. deltahf

    deltahf Premium Member Premium Member

    377
    175
    43
    Jun 8, 2014
    Ratings:
    +290
    Local Time:
    11:20 AM
    I was about to look into this as well as I begin to redesign my site for XF 2.1. Regardless, I think I definitely want to serve the icons from my own server (w/Cloudflare) to take advantage of HTTP/2 pipelining and to prevent yet another third-party CDN.

    Very interested to see your results, eva, and thanks for the suggestion about iconify.design, @wmtech. Definitely want to look into that more.
     
  6. Sunka

    Sunka Well-Known Member

    1,142
    313
    83
    Oct 31, 2015
    Pula, Croatia
    Ratings:
    +510
    Local Time:
    4:20 PM
    Nginx 1.17.9
    MariaDB 10.3.22
    It is Arty's work.
    He make addons to integrate his work into xenforo

    Beta - Iconify integration

    Beta - Iconify Custom Node Icons
     
  7. elargento

    elargento Member

    348
    17
    18
    Jan 4, 2016
    Ratings:
    +43
    Local Time:
    12:20 PM
    10
    how did you do that optimization? can you please share the steps?
     
  8. deltahf

    deltahf Premium Member Premium Member

    377
    175
    43
    Jun 8, 2014
    Ratings:
    +290
    Local Time:
    11:20 AM
    You can see my XenForo resource here for instructions to get you started. Of course, if you have a custom theme, you will need to modify the list of icons, but it's pretty easy to just specify the ones you want to suit any theme. :)

    Reduce FontAwesome icon font file size
     
  9. eva2000

    eva2000 Administrator Staff Member

    45,441
    10,313
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +15,995
    Local Time:
    1:20 AM
    Nginx 1.19.x
    MariaDB 5.5/10.x
    +1 a working solution unlike mine :D