MyListing Club

How to Host MyListing Material Icons Locally for Better Performance

Building better MyListing websites. One guide at a time.

Overview

Our How to Host MyListing Material Icons Locally for Better Performance guide shows how to easily host these icons locally to speed up your website.

If you’ve ever run your website through GTMetrix and noticed the Waterfall tab showing long load times for the Material Icons, then this guide is for you.

Out of the box, MyListing makes external calls (i.e. HTTP Requests) to pull down the Material Icons from the web, which further attributes to a slower website.

What to Look For

If you run your website through a website performance tool like GTMetrix, do you notice something similar to the screenshot below when looking at the Waterfall tab?

If so, or if you just want to load the icons from your local server to reduce another external call (i.e. HTTP Request), let’s continue on and get it under control.

Implementation

Implementation

  1. Browse to Google’s Material Icons page.
  2. Looking at the line that starts with ‘src: url(https://…’, copy the full URL. (e.g. https://fonts.gstatic.com/s/materialicons/v67/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2).
  3. Paste the full URL into your browser. (Note: This will automatically download the font file you need.).
  4. Rename the downloaded file to ‘mlmaterialfont.woff2‘.
  5. Using an FTP application like ‘FileZilla’ or a plugin like ‘File Manager’, create a folder at the ROOT of your WordPress install (i.e. root of the public folder) named ‘fonts’.
  6. Copy the renamed file to the new ‘fonts’ folder.
  7. Add the MyListing Material Icons CSS Package to your website.
  8. Follow our Prevent MyListing From Loading Material Icons guide.

Verify Success

  1. Run another GTmetrix test and compare it to the previous test you ran, looking to see if Material Icon entry has dropped out of the Waterfall tab and HTTP Requests have been reduced.
  2. If everything looks good with your tests, clear the cache on any page where Material Icons are used, such as a page with the MyListing Listing Feed widget where the arrow icons are Material Icons.
  3. Ensure the Material Icons are displaying properly.