Join the community today
Become a Member

Forum Style Optimisation Tweaks

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

  1. eva2000

    eva2000 Administrator Staff Member

    37,710
    8,254
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,710
    Local Time:
    7:39 PM
    Nginx 1.15.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 :) ;)
     
    • Winner Winner x 1
    • Informative Informative x 1
  2. eva2000

    eva2000 Administrator Staff Member

    37,710
    8,254
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,710
    Local Time:
    7:39 PM
    Nginx 1.15.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
    • Funny Funny x 1
  3. wmtech

    wmtech Premium Member Premium Member

    79
    21
    8
    Jul 22, 2017
    Ratings:
    +51
    Local Time:
    10:39 AM
    You can use iconify.design instead. Downloads just the icons you need.
     
    • Informative Informative x 3
  4. eva2000

    eva2000 Administrator Staff Member

    37,710
    8,254
    113
    May 24, 2014
    Brisbane, Australia
    Ratings:
    +12,710
    Local Time:
    7:39 PM
    Nginx 1.15.x
    MariaDB 5.5/10.x
    interesting .. will check it out as well :)
     
  5. deltahf

    deltahf Premium Member Premium Member

    304
    137
    43
    Jun 8, 2014
    Ratings:
    +221
    Local Time:
    4:39 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.
     
    • Like Like x 1
  6. Sunka

    Sunka Well-Known Member

    1,055
    290
    83
    Oct 31, 2015
    Rijeka, Croatia
    Ratings:
    +469
    Local Time:
    10:39 AM
    Nginx 1.15.0
    MariaDB 10.2.15
    It is Arty's work.
    He make addons to integrate his work into xenforo

    Beta - Iconify integration

    Beta - Iconify Custom Node Icons
     
    • Like Like x 1
    • Informative Informative x 1
..