Support » Plugin: WP Social Chat » Why load font just for one icon?

  • Resolved Jaro

    (@pixtweaks)


    Hello,
    I’m specialised in speed optimization and working on client’s website. I found out that your plugin is loading the whole font just to display one icon. That’s not a good practice from speed optimization point. My question is: Can you load SVG image for the icon and remove loading this font? And if you inline it as base64 image it may be even better. Thank you very much!
    Best Regards,
    Jaro

    • This topic was modified 1 year, 2 months ago by  Jaro.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Hello Jairo.
    First version of this plugin we had a option to choose your own image, but seems a lot of people had a issue with that so I changed.

    About your performance concerns you should know that font icon is faster, better browser support and easier to manipulate than svg inline.

    I just test a website using my plugin in Pingdom tools and took 14ms to receive for example. It’s probably won’t be something to really worry about.

    You should also know that font icon are based on svg, you notice that if you open ttf file.

    I’ll give you another example that how you get better performance with font icon:

    Case one:
    If you preload the font request you could use header cache it would load just once no matter how many pages users visit.
    You cannot cache inline svg same way.

    Case two:
    Using shortcode version in 2 differents place plus the floating icon…
    If you use font icon you just need to load once.
    If you’re using svg inline it will load same image 3 times because it would be part of HTML.

    Nevertheless we really don’t need the whole font for this, I could edit ttf file next update.

    Hope it clears a little bit.

    If you want to chat with me about performance, I work with high performance hosting server and would be glad to help.

    Jaro

    (@pixtweaks)

    Thank you for your response. I know that on Pingdom loading another font is trivial but I have to optimize it on 3G network and there every kb counts. If you can edit this font that I think will be great.
    Thank you so much!

    Best Regards,
    Jaro

    Well you could edit css to change :before content. Would be something like this:
    #wacht-dark-round a:before {
    content: ‘url(https://yoursite.com/image.png.webp)!important’;
    }
    But font still would be loading.

    Than maybe is possible to stop font loading with a function in wp_head.

    But to be honest, if you need to custom everything it will probably better create your own version.
    You just need to use https://api.whatsapp.com/send?phone=00000000&text=your-message
    Than you need to define style via css to make it float wherever you want.
    Maybe just copy my css and change before content.

    But again been honest, if you really need every kb and your main goal is 3g networking you definitely should give up wordpress and build a full customize amp version without any javascript.
    A good wordpress configuration would give you 600ms to 1s loading time if you don’t need to many external integration to request.
    A good amp can easily bit this with 200ms~400ms and pages would be much lighter.

    Jaro

    (@pixtweaks)

    Hello,
    sorry for late reply but I was busy. I just looked at it today and what I did to solve it is to disable loading the font file and then change in /css/style.css class #wacht-baixo a:before to following

    #wacht-baixo a:before {content: url(‘data:image/bmp;base64,Qk14AgAAAAAAADYAAAAoAAAAEgAAABAAAAABABAAAAAAAEICAAASCwAAEgsAAAAAAAAAAAAAsSLdZ9l3cmMJP+8imVPdb/57/nvce5Rr5kqmIqYipiKmIqYipiK+U/9//3//f/9//n/be5ZrmV/db/97/n+0c6Y6piKmIqYipiJ6I/1/LGN1R3Rf5kKmIqYipiKmIu8ivFP/e9V7pjqmIqYipiL1Iv9vjHOmIqYipiKmIqYipiKmIqYipiJ5O/97sXumLqYipiIWI/9zkHumIqYipiKmIqoid0fda9t7bWOmIp1H/X8mY6YipiKdR/p/5lamIqYipiI2L99v/3//f/9/+3+mWvMi/2uye6YirCLfX7R/piKmIqYiWC//d9t/T1+9T/1/lG+mOqYivlPYf6ZKsSLfZ7F7piKmIhUj/2/Yf+ZKpiKpIuYupiKmIqYinDv7f6ZasSLfZ7F7piKpIr5T/X8mZ6YipiKmIqYipiKmIqYifC/7f6ZaryLfY7R/piK1Iv9v/3+0e6YipiKmIqYipiKmIqYivUvYf6ZKpiK9S/p/5lK0Iv9v/3+Mc6YipiKmIqYipiKmIrIi/2uze6YipiI4I/93jXOmIno72nsGW6YipiKmIqYipiKmInw7/X9GZ6YipiKpIr1L/X9JZ6YipiKmIqYipiKmIqYipiI3L/9ztHumLqYipiKmIvAi3l/9f3BvpjKmIqYipiKmIqkieUP/d9h/5kqmIqYipiKmIqYi7yK9V/9//X+3b3Zfdl+7X/93/3+2e+ZKpiKmIqYipiKmIqYipiKmIjMzvV//e/9//3/9f7h3SlumIqYipiKmIqYiAAA=’)
    !important; margin-left: 5px; margin-right: 5px}

    Works fine and no need to load the whole font. Do you think it’s good long-term solution? Thank you!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Why load font just for one icon?’ is closed to new replies.