How to Host MyListing Material Icons Locally for Better Performance
Get the knowledge your business needs to succeed.
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.
Put Everything In Place
- Browse to Google’s Material Icons page.
- Copy the entire contents to your clipboard.
- Using your preferred method of adding CSS to your website (Code Snippets plugin, WordPress Customizer, etc.), paste in the contents of the page.
- 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).
- Paste the full URL into your browser. (Note: This will automatically download the font file you need.).
- Rename the downloaded file to something you’ll easily recognize in the future (e.g. mlmaterialfont.woff2).
- 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’.
- Copy the renamed file to the new ‘fonts’ folder.
- Edit your CSS from step #3, replacing the ‘src: url(https://…’ line with ‘src: url(/fonts/mlmaterialfont.woff2) format(‘woff2’);‘.
- 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.
- 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.
- Ensure the Material Icons are displaying properly.