Archived topic
render blocking resources
3 replies · Started by Streater on July 24, 2021
My site with GP is soooo much faster (even without trying to speed it up with plugins) than my DIVI site ever was (doing everything possible to speed it up)...
BUT my render blocking time is still not good 320ms and time to Interactive is bad for mobile at 8.1ms (Desktop is great) and largest contentful paint is bad at 4.1s... based on Lighthouse. I did GTmetrix but it doesn't show mobile.
I tried these suggestions including the one user who used Autoptimize and WP Rocket together:
https://generatepress.com/forums/topic/mobile-performance-less-than-great/
https://docs.generatepress.com/article/configuring-autoptimize/
I found that using them both makes my site time slower so I disabled WP Rocket and I get my fastest time. But it's still not where I want it.
GTmetrix says my WP Posts plugin (which is yours) is render blocking but that is only adding 810ms on mobile.
I do have my Google Font Baloo Chettan 2 loading in the head... that adds 800ms.
Any ideas?
Hi there,
looking at the site - my focus would be these 3 things to begin with;
1. Font Awesome icons - you're loading an entire font set for probably just a few icons. Not sure what plugin is using them - but if its the offical FA plugin they have an option to Load SVGs. Which is far more effecient.
2. Vimeo videos - if you don't need autoplay - look for a lazy loader plugin that defers Vimeo files.
https://en-gb.wordpress.org/plugins/lazy-load-for-videos/
3. Fonts - Options:
Uncheck any variants you're not using to minimise request:
https://docs.generatepress.com/article/google-font-variants/
Look at Locally loading the fonts.
https://docs.generatepress.com/article/adding-local-fonts/
You're right... I disabled Font Awesome plugin and removed the custom Google fonts from my header.php file and I have the fastest site I've ever had... but I still needs those icons and fonts.
I appreciate your help here... the SVGs suggestion sent me down a long rabbit hole... that is definitely the direction to go from everything I've read now... I've struggled here to figure out how to properly add Font Awesome... all I find is posts saying not to load the whole library with no explanation how other than it is done with PHP:
https://wordpress.org/support/topic/unused-css-4/
Tried Tom's code here and I don't think it loads the icons I want, just something called essentials:
https://generatepress.com/forums/topic/font-awesome-vs-svg/
https://generatepress.com/forums/topic/font-awesome-vs-svg/#post-204923
Is there PHP to load just the icons I want? I can check with their support too... just wondering if there is a GP way first.
Hi there,
Tried Tom’s code here and I don’t think it loads the icons I want, just something called essentials:
https://generatepress.com/forums/topic/font-awesome-vs-svg/
https://generatepress.com/forums/topic/font-awesome-vs-svg/#post-204923
These ones are pretty old. I don't recommend using them.
Is there PHP to load just the icons I want? I can check with their support too… just wondering if there is a GP way first.
Not exactly sure what you mean here. But if you're worried if any SVGs added on your site loads even when it's not in use:
The page doesn't call any entire SVG set like in font file for just 1 SVG icon because each SVG is its own individual thing, independent from any other SVG icons. It's pretty much an image file but in vector form.
Learn more about GP and SVG usage here
https://docs.generatepress.com/article/svg-icons/
https://docs.generatepress.com/article/generate_svg_icon/
https://docs.generatepress.com/article/generate_svg_icon_element/
