For some reason, a huge list of fonts is being downloaded from Google Fonts on my Wordpress website (staging site is linked), and Google PageSpeed Insights identifies it as Render-blocking resources.
The thing is I would basically just need the Poppins 300, 500, 600 on Italics and Regular, so I had embedded the fonts as Google states, linking to them on the header of the site, but I deleted that link and realized that the fonts are still working, so I assume that the Wordpress Theme must be the one responsible for this.
My question is, how could I reduce the amount of fonts so that only the truly necessary ones are downloaded and thus minimize those render-blocking resources?
Thanks a lot for your help and time!
If you are able to install a plugin you can select which fonts you use (including the font-weight) by this lightweight plugin and it will also combine - minimize the rest of the fonts so you will have less DNS requests for a faster web page.
Regenerate the embed link by selecting only the fonts you need:
https://fonts.google.com/specimen/Poppins?selection.family=Caveat
Related
After testing my site speed on GTMetrix, I noticed that my fonts are the ones that are slowing it down.
I use TypeKit and the webfont Averta that I purchased online.
Does someone know how I could possibly reduce the load time of these fonts?
Ps*: I'm a rookie at coding and I used Elementor to build my website and to implement my fonts.
Just preload those fonts with Autoptimize or WP rocket copy the URLs fo all fonts and past those URL in preload section in autoptimize advance tab.
We purchased a WP theme and did some customized changes in php and html
to bring the design where we wanted...
We are almost done with the design of the website and construction
and we are about to deliver to client
but for some reason the website is responding very slow on the first visitor..
and we cannot find the problem, what conflicts with what..
Are there any WP experts in here that could have a look and maybe identify the problem..?
Thank you in advance..
Click here to view the website
Enable gzip compression
Leverage browser caching
Optimize images
Defer parsing of JavaScript
Minify CSS, JS
Analyze your site using GTmetrix and Google PageSpeed Insight, and follow the recommendations that you get from this systems.
It's not that slow? I can get a directory listing from your wp-includes directory just fine. Joking aside, looks like there are two different versions of jquery being loaded in, that's never good for things (view source, line:435) and the homepage makes about 179 requests which is a bit bonkers.
Try a caching plugin. As others have said better configured hosting helps, especially those that use caching technologies such as varnish/redis. A CDN will help with geographic speed. Compress images with WP Smush or similar. Good luck!
There could be multiple issues behind a slow wp website:
Using multiple plugins can slow down a wp website.
A poor web server that is not able to respond quickly.
Some configuration issues.
What i can see is that your website is resource intensive, CSS and JS script files are too heavy, even heavier than all images on the home page.
Try:
Minify the css and js files.
Compress images and the size would come down to less than 1 mb (use tinypng.com)
Use Google page speed to see the flow of the resources of your website and other related details.
Hope this helps.
Google's page speed is telling me to optimize my CSS delivery for the following and I am confused.
http://*******.***/css/styles.css
https://maxcdn.bootstrapcdn.com/…t-awesome/4.5.0/css/font-awesome.min.css
https://fonts.googleapis.com/…ntserrat|Montserrat+Alternates|Open+Sans
The first one is my own css, the others are via some CDN systems. I thought using cdn for font awesome would be better than hosting it myself, and same for google fonts.
As for my own css how can I do any better than hosting it as a separate file? It is already minimized. Wouldn't it be worse to inline the whole css file for every page view?
The answers given here (Css optimization for google pagespeed insight) seems like a hack to trick the pagespeed insights.
What advice can you give me or insight to understanding what they mean would be appreciated.
Yes it'd be worse to go inline with your css as it cannot be cached. The whole point of CDN is that as many people uses them (google ones at least) it's high likely users will have them precached, hence better than hosting them at your server unrecognized by the url on the new http request.
Also I'm not sure why the SSL would matter but from your example, your server is the only one without the certificate.
I am using google font on my site. Some clients in china said that the site load very slow. I checked it, it is causing by the google fonts. I looked the google font faq, they said it will download the font file to the customer's computer before loading the site. Are there any way to fixed this slow loading issue?
This was a known issue... Google Fonts were slow loading in China. Previously you could serve mirrors of the fonts through Qihoo 360 CDN servers in China. However, as of August 2016 the problem has been fixed. At the same time Qihoo 360 has stopped fonts.useso.com and all mirrored fonts hosted under fonts.useso.com stop working now. Details are described here.
Google has fixed Google Fonts, which now directly serves the css and
font files from Google’s servers in Beijing, which means Google Fonts
are much more stable and faster to users in China now.
I recommend all webmasters who have been using fonts.useso.com switch
back to the original Google Fonts as soon as possible.
I figured a way to fixed it. Instead of loading it with link tag, I changed to load the font with javascript and load it async, it is fine now. much faster
I am using the #import method as answered here by #ModernDesigner to import a Google Font to my Magento theme.
My question is, how does font importing work? Will the browser sit waiting to download the font on every page load, or is this just going to be loaded once and then following pages will just use a cached version?
What happens if the google server is down and the font can't be loaded? Will it completely block my site or will the browser continue and use the best fit alternative font?
I'd also like to add that I removed the http: from the url as the same css file is used for the checkout pages and using http breaks the https security status. Is this ok?
Thanks in advance!
Fonts will be cached, so they are just loaded once.
In case Googles CDN server should ever be offline, the fallback fonts of your CSS are used. Your site won't be blocked.
Just use :// instead of https:// or http://
But keep in mind:
You are exposing every user who's visiting your site to Google. I know this might sound a bit paranoid, but I feel like more people should see this as a disadvantage and care about the requests of their sites. Especially in times where intelligence services have gone crazy.