/ Register

Discover Centmin Mod today
Register Now

Forum Style Optimisation Tweaks

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

Tags:
Previous Thread Next Thread
Loading...
  1. Jan 9, 2019 #1
    eva2000

    eva2000 Administrator Staff Member

    53,530
    12,134
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,677
    Local Time:
    8:21 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    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. Jan 9, 2019 #2
    eva2000

    eva2000 Administrator Staff Member

    53,530
    12,134
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,677
    Local Time:
    8:21 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    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. Jan 10, 2019 #3
    wmtech

    wmtech Active Member

    167
    44
    28
    Jul 22, 2017
    Ratings:
    +125
    Local Time:
    12:21 AM
    You can use iconify.design instead. Downloads just the icons you need.
     
  4. Jan 10, 2019 #4
    eva2000

    eva2000 Administrator Staff Member

    53,530
    12,134
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,677
    Local Time:
    8:21 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    interesting .. will check it out as well :)
     
  5. Jan 14, 2019 #5
    deltahf

    deltahf Premium Member Premium Member

    582
    264
    63
    Jun 8, 2014
    Ratings:
    +483
    Local Time:
    6:21 PM
    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. Jan 14, 2019 #6
    Sunka

    Sunka Well-Known Member

    1,150
    325
    83
    Oct 31, 2015
    Pula, Croatia
    Ratings:
    +525
    Local Time:
    12:21 AM
    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. Aug 5, 2020 #7
    elargento

    elargento Member

    352
    17
    18
    Jan 4, 2016
    Ratings:
    +44
    Local Time:
    7:21 PM
    10
    how did you do that optimization? can you please share the steps?
     
  8. Aug 5, 2020 #8
    deltahf

    deltahf Premium Member Premium Member

    582
    264
    63
    Jun 8, 2014
    Ratings:
    +483
    Local Time:
    6:21 PM
    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. Aug 5, 2020 #9
    eva2000

    eva2000 Administrator Staff Member

    53,530
    12,134
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +18,677
    Local Time:
    8:21 AM
    Nginx 1.27.x
    MariaDB 10.x/11.4+
    +1 a working solution unlike mine :D
     
Previous Thread Next Thread
Loading...

.