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
Related
I built a website with the help of Next.js. The website contains images and videos. The videos are autoplayed which means they are fetched immediately. The website has been deployed on Vercel. I experience big issues with the loading times of all assets not only the videos:
Chrome Dev Tools showing loading times of assets
It seems like the assets are served one after another and since some of the videos are quite big ~10Mb other resources are blocked for quite a while.
Is it normal that Vercel does only serve one asset at a time? I thought that multiple videos or images could be served simultaneously.
Also, I am wondering why it does take so long in the first place. My internet connection is roughly 100Mbit/s and I do not experience any issues on other websites I have deployed to Vercel. Just this one is incredibly slow and has issues serving the assets.
Does anyone know what's happening?
I already thought the problem was that there were too many and too big videos on the website which is why I reduced the size of each video and added a lazy loading functionality to the videos so they are just loaded when needed. However, this didn't solve the issue.
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
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'm using a couple of custom fonts in my site, one from google fonts and another that I uploaded along side the index.html. All properly declared in the css file.
When I preview the site throught the HTML Editor (Sublime Text 3) it shows just fine with all the custom fonts in place, but once I upload it to the server and acess the site through the internet all the fonts change to arial, I believe. This also happens in Internet Explorer. I looked the CSS file and its all good. The fonts are declared in the right elements and there is no overwrite.
Now the wierd part is that when I open the site in Inconito Mode from Chrome, the fonts load just fine. Which makes me think that there is no problem with the css. When I inspect the element thought the browser it shows as crossed out.
Have no idea what is causing this, anyone have ever seen something like this?
I'm having the same problem, not only with google fonts but also with fonts I made myself and are uploaded to the same server; In my case it was because I installed the chrome app disable web fonts (without knowing that I did that), and this app isn't working in incognito mode.
Make sure to clear the cache of your browser. If your using google font, i guess your reference is made to the google site. Make sure the server can access the google site.
I have already experienced a delay for the font to load because of the external reference.
Hope this help.
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.