[Resolved] Source Map Error

[Paul]

Hi,

I see this error in the developer console:

DevTools failed to parse SourceMap: https://www.trademarkinteriors.com/wp-content/plugins/elementor/assets/lib/swiper/swiper.min.js.map

Thoughts?

[David]

Hi there,

thats a missing .map file in the elementor plugin….. reported here on their GitHub:

https://github.com/elementor/elementor/issues/7082

No conclusive answer to it but see last users comment re: Regenerating CSS and Syncing Libraries fixes it.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Hi David,

I gave it a try, it corrected the error! I was looking around trying to see if something was slowing our pages down, I’m seeing a fully loaded mobile page speed around the 3 second mark, this was better previously – is there anything that stands out to you that I could do (or have done) that could be slowing things down?? Thanks for the insight!

[David]

Hmmm – most of the delay is font related.
The easiest one is the GP icon font. In Customizer > General > Icon Type – switch this to SVG.

Then if you kept all your fonts in the customizer you can remove some of the unused variants:

https://docs.generatepress.com/article/google-font-variants/

The original bold site used:

Merriweather 700, 900 and Italics
Montserrat 500, Bold and Italic

So theres quite a few you can uncheck.

Last one is FontAwesome icons – not much to suggest there apart from finding a replacement icon library….

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Ok. So I would go into typography (body, header, ect) and remove the items not being used?

Is FontAwesome not so awesome?

[David]

Yeah you will need to edit the Typography > Body and Typography > Headings variants. Just click the x aside each of the ones you’re not using.

FA Icons add a large overhead – around 75kb for each font – thats one for Brands, one for Solids etc.. plus the CSS with it – so before you know it 4 or 5 icons cost you 200kb. Whereas the actual SVGs would be around 3kb lol

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

WOW! Good to know for sure. Ok, I took care of those items. Fully loaded page speed did drop to just under 3sec. BTW, in retesting I see the source map error is back!

I see this come up in the testing, thoughts?

Consider using <link rel=preload> to prioritize fetching resources that are currently requested later in page load. Learn more.
URL
Potential Savings
…webfonts/fa-solid-900.woff2(www.trademarkinteriors.com)
2,250 ms
…webfonts/fa-brands-400.woff2(www.trademarkinteriors.com)
2,250 ms

[David]

No sure about preload on FA icons – may not improve site loading just delay the time for the page to be visible.

Not sure if you’re using Elementor Pro – but i saw that you can upload your own SVGs which may be a better solution then using FA icons:

https://elementor.com/blog/introducing-icon-library/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

OK – would you know a reliable / safe source to download some SVGs?

[David]

Try:

https://icomoon.io/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Thank you! That saved about 200kb!!

How would I go about converting my header logo to an svg and then applying it?

[David]

You would need a vector editing application that supports the SVG format. Some choices:

Free app: InkScape – ok for free.
Market Leader: Adobe Illustrator – requires subscription.
Next best thing: Affinity Designer – one off license.

All of those support the .svg file format.

Then to import it into WordPress requires this plugin as by default WP doesn’t allow them:

https://en-gb.wordpress.org/plugins/safe-svg/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Thanks! I was able to get those done. Final thought, what is your opinion on adding an AMP plugin to close the gap in performance?

[David]

You’re welcome.
AMP great for your Blog – not sure about the static pages though – you effectively have to ‘rebuild’ those in the AMP plugin.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Paul]

Well, my Blog pages score in the 90’s now so I’m not sure I’d go thru the effort to do that.

Is there another way to remove unused CSS https://www.trademarkinteriors.com/wp-content/cache/min/1/9332eaa8c96d7a2eb928768b34716ede.css

[Author]

Posts