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.
Related
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
I'm trying to optimize a website (gntac.com) but not sure how to proceed further. It's hosted on Litespeed server and I'm using the Litespeed Cache Plugin for Wordpress. I have enabled webp images, combined and minified javascript, minified css, and enabled quick.cloud CDN. I'm also using Modernizr for webp replacement in css but Insights doesn't seem to recognize the change.
There are also a lot of DOM elements (presumably due to Elementor). Some of the theme elements are hidden with css on mobile. I tried to use Mobile_Detect to only load those elements for desktop but the cache seems to be static and is either generated for mobile OR desktop but not both so the Mobile_Detect code is useless. None of this seems to have made any difference in Pagespeed Insights with tests still at around 11 for mobile and 42 for desktop.
Could anyone please provide some pointers on where to go from here? I know a little web development and SEO/optimization but this is beyond me at the moment.
You can try to deactivate the cache, do the Lighthouse Check again, try to get ride of the unused script and styles and activate the cache tool again.
You should combine your css to, not only js.
The Front Page is well cached, but te product are loading up to 6 secs - which is way to long. Maybe yout server is to slow and you should upgrade.
Webpage speed optimization is an art itself. On advanced levels, we look into every piece of code for optimization.
At the beginner level, I would suggest you to use Cloudflare CDN (Free Subscription) and configure Cache and Speed settings.
Second, instead of using PageSpeed Insights, use Solarwinds Pingdom to check the speed of the website.
Third, make sure that all the unnecessary plugins and themes are deleted. Clean up as much as you can. WordPress themes are the usual culprit of a slow website, use the lightest possible theme which is regularly updated and optimized.
Make sure to address Render Blocking Elements (inline critical elements or deffer) and Server Response Time (better web hosting).
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.
How toeliminate render-blocking javascript and CSS in above-the-fold content in wordpress. If any one can please help me.
Looks like there is a wordpress plugin called autoptimize that will do a lot of the work for you. I believe it also enables compression. Once you install the plugin, navigate to settings => autoptimize and check optimize CSS code as well as optimize JavaScript code.
I woudn't use a plugin.
First of all merge CSS files into one file.
Next use https://jonassebastianohlsson.com/criticalpathcssgenerator/ .
You'll get some css code - insert it inline in header.
Then you can load rest of the CSS via JS ( https://github.com/filamentgroup/loadCSS ).
Many ways. The ways to pass over 85/100 are -
You can use Pagespeed module
Use a third party service to deliver optimised frontend. Google had such service which is closed now.
Or follow traditional way of backend optimisation.
Nowadays, good websites pass through another service or another server as reverse proxy which automatically optimises the frontend. Thats it.
Traditional way :
That is one server one website and tweak on main server.
Your server's response time higher is most important. First pass it. Test on webpagetest.org.
Then give priority to visible content.
Then leverage cache.
Render blocking matter is after making them great.
Those optimisations are after you have passed server security, time to first byte, uptime etc. There is no plugin that can make 100% perfect with few clicks for all sites.
You should read (see WordPress doc) and load scripts asynchronously on footer or body via plugins like Header and Footer and ask on WordPress forum when you face difficult. Many times many technology websites discussed it in details. There are really very good old blog websites like CSS Tricks. You should find all articles on the topic and read from old to new. It is impossible to give an easy way. Loading Js is more complicated browser, device matter. Furthermore there is W3TC like cache plugin on normal websites.
Known problems of traditional way :
It is not odd to open up a security flaw with some snippets. With HTTP/2 push, many new things, recent security matters of WordPress during February forcing not to talk about odd plugin and snippets. None really can perform security audit. That is why I talked about it 2 years back about render-blocking javascript and CSS, not later . There I have shown settings of WordPress free Async js and css plugin. That WordPress plugin gives options for CSS, JS getting automatically loaded as inline or load asynchronously. You can try. Inline, Async all has own demerit.
It is technically difficult work than the plugins descriptions will say. Such plugins decrease the manual work but does not eliminate the need of hand coding, trial. It is part of page speed optimisation. You have to slowly learn yourself and plan according to budget.
Do at own risk at dev site with A+ score on SSL labs, add various security headers.
As you possibly a commercial website security is of more importance, followed by page loading speed.
As end tip, you should arrange to host on unmanaged server to optimise the backend. Your site is slower at present which is problem out of host.
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.