I'm trying to find out which one loads faster. Upon checking the audit tab in Chrome both approach result in a slow First meaningful paint. I'm using googleapi font to render fonts in my site. Below are the codes I'm comparing
<link href='https://fonts.googleapis.com/css?family=Montserrat&subset=latin' rel='stylesheet'>
vs
#font-face {
font-family: 'Montserrat';
src: url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
Now it seems that hosting the font on my local directory loads slower. I'm not sure if what I'm doing is correct. Any idea which one is faster and what is the best way to implement this?
I'm just trying to cut down the First meaningful paint down to half. I used the link in to reference the googleapi but upon checking the audit its taking 1,500ms just to load this from googleapi site.
Everything you put inside the <head> tag will be loaded before everything else.
So the <head> first loads the css file, after that it loads the #font-face.
If load the font inside the <head> using <link>, the browser will first load the font, then the css file.
So <link> will be faster in terms of performance. Not that it will be a huge / notable difference.
Also:
In your example there is also a difference with loading it with from google's cdn or serve it from your local server.
Cdn's are meant to serve files really fast. Depending what server you have, Im pretty sure google's servers are way, way fasterf. So google's option loading it with the <link> tag is the recommended way to go.
See also this SO question, its about #import. But its just the same as #font-face { src: ... ; }
Including Google Web Fonts link or import?
Very misleading answer above.
The <link> loads a CSS with #font-face inside. It is verifiably slower.
We should design code so that web pages load fast; however, a user's device can affect slow down the loading of web pages. For this reason, I take into account how slow a web page could load for some users when designing and coding my web pages. Linking to the font in the HTML will quicken the font face being displayed before other styles. However, I would rather styles for images and the like to be displayed as soon as possible. Changes in such elements can be rather jarring, so I use #font-face in my main CSS file instead of linking to font files in the HTML.
Related
I have to fix some issues at a wordpress site which another developer has set up with a custom theme. The theme includes a style.css file which is referencing a font file in the same theme:
#font-face {
font-family: 'foo';
src: url('fonts/foo and bar.eot');
url('fonts/foo and bar.woff') format('woff'),
url('fonts/foo and bar.ttf') format('truetype'),
url('fonts/foo and bar.svg#svgFontName') format('svg');
}
Without minification the style.css files gets loaded and fonts pointing to <base-url>/wp-content/themes/<theme-name>/fonts. When the CSS minfy feature is enabled the site fails to load the font files as the relative links are still the same and are now pointing to <base-url>/wp-content/cache/minify/fonts . The fonts folder does not exist in that location.
I've tried uploading the themes fonts/ folder to wp-content/cache/minify which did not work long as either the font files got renamed to .old files or the whole folder got removed serverside. Don't know if this is the doing of W3 Total Cache or another process.
CDN support is not enabled. Configuration of the CSS minfy feature looks like this:
As I am pretty new to Wordpress I would appreciate any hint to a solution or approach I can look into.
I know I could try to embed the font files directly into the css file, but that approach is not wanted due to file size. So I am basically looking for the default way how to handle this with the W3 Total Cache extension.
Note: Replacing the relative urls with absolute urls is not an option as the site is used in different environments with sub directories and on main domain level.
UPDATE I have figured out that the issue seems to be a bug inside the plugin which is related to using files names including whitespaces. Have updated the reference code above. Version of W3 Total Cache is 0.9.6
I'm dealing exactly with the same problem, the version of W3 Total Cache I'm dealing with is 0.9.7 and I don't use whitespaces for the files name.
The only solution I have found is to use Font Awesome free CDN, for example:
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.4/css/all.css" integrity="sha384-DmABxgPhJN5jlTwituIyzIUk6oqyzf3+XuP7q3VfcWA2unxgim7OSSZKKf0KSsnh" crossorigin="anonymous">
You can include it in header.php. In this way, you will avoid any W3 Total Cache interference.
Which is the fastest way to load the CSS
By using a link ref in the header or by using an #import in the CSS file.
e.g.
<link rel='stylesheet' type='text/css' href='//fonts.googleapis.com/css?family=Gudea:400,700'>
Or
#import url("//fonts.googleapis.com/css?family=Gudea:400,700");
I have run some speed tests but nothing is conclusive.
But including the link this file is seen as render blocking, so even though the link separate file should be faster I can't find out if it actually is..
Including a CSS file via HTML link tag should give faster results, as the browser can load the font file even before having loaded the CSS file. In theory the browser should load both files parallel. You can invesatigate this using the brwoser developer tools network tab.
As I'm sure many of you know, Google PageSpeed Insights will sometimes complain about what it calls "render blocking css" when you test your sites.
Their suggestion is to render only "necessary" CSS inline in the HEAD. If you have CSS in an external file (as most everyone does), the recommendation is to load this after the page loads. This seems pretty extreme, but that's the recommendation. It appears to be a big blocker to improving one's Mobile PageSpeed scores as well...
You can use the PageSpeed Module for Apache or nginx to help you identify which CSS is actually "necessary". Again, one can argue about the relative value of doing this, but it is Google's current recommendation.
I had a notion to use javascript to "Lazy Load" the CSS file by having a small script fire in the footer of my theme, injecting the CSS into the head. You can see an example of this technique here: https://bensmann.no - This is NOT my site. I'm basically looking to replicate or copy what he's done with his minified CSS - Load it into the HEAD after the page has loaded via Javascript contained at the bottom of the page
I would then put <!-- W3TC-include-css -->
inside a <noscript> tag, thereby suppressing the placement of the minified CSS, as well as ensuring it appears for non JS browsers.
So, the issue is I need to get the location of the minified CSS file somehow, as well as the hash used to name the file (for an ID for the element). Anyone know how one can access the location of minified CSS file with PHP in the footer?
While this post does not give you the solution, it might bring you closer to moving the css where you want it:
http://freetheweb.tumblr.com/post/12482217372/w3-total-cache-better-css-js-placement
You'll have to learn about Critical Path CSS, which is a slippery slope, and truly, nobody really knows for sure which CSS is critical or not.
In the interim (or as a permanent solution), installing a plugin like Autoptimize and playing around with it will greatly improve your Page Speed Insights scores.
Remember to tick Show Advanced Options when going to the settings. I'd personally suggest to just inline all CSS and use that option, but that's just me.
If any plugins are broken after implementing this, just untick the Optimize CSS code, find the plugin's CSS file, and add that to the exception list.
Recently we have experienced the problem of browsers caching the css files, so that when we move code to another web server we get unexpected and unwanted results.
Having read various solutions it occurred to me that the css file could be included in the template. Rather than write
<link href="/static/css/parentx.css" rel="stylesheet" type="text/css">
we could put
<style>{% include "static/css/parent.css" %}</style>
which would embed the css in the html. It has the added benefit of reducing the number of calls back to the server for the css file but the disadvantage of not caching the css at all and not allowing the web server to provide the static files. However, these files are quite small, typically about 12K.
I propose this as a temporary measure as I have just discovered the existence of asset management plugins that look to do a better job.
I have never seen the use of the 'include' template command to get css (and javascript) files so perhaps there is a drawback of which I am unaware?
Not caching the CSS file at all will slow page loading though it's unnecessary.
Cache your CSS as long as possible and necessary and when you need to invalidate cache, a sure way is to load another file, I mean the same file with another name. It could be parent1391234565.css or parent-v003.css or parent130307.css or parent-4e6ca1437f2d.css. If you told browsers to download parent-v002.css, you're pretty certain they don't have parent-v003.css in their cache!
I have just installed a custom WordPress theme (this is my first time working with WordPress, so I'm still learning a lot) and I need to make the font of the blog match the font for the rest of the web site, which is a Google Web Font.
I went to the custom theme's stylesheet editor in the WordPress Dashboard and added the font via #import. So it currently looks like this:
/* Make all custom CSS changes BELOW this line
-----------------------------------------------------------*/
#import url("http://fonts.googleapis.com/css?family=Questrial:700,400");
body { font-family: Questrial, sans-serif; }
But that didn't change the font in the blog. Am I not implementing the web font correctly? Is there some better/other way to do what I'm trying to accomplish?
Thanks for anyone's help!
Well, it looks like you are implementing the font correctly.
Try using a tool like Firebug for Firefox or Google Chrome's built in developer tools to see if the HTTP Request is coming back OK from the Google Fonts server.
If it's properly loading the CSS file, your problem may lie within CSS inheritance. Because of the 'Cascading' part of the Cascading Style Sheets, there may be a rule that is higher on the list of importance. You'll just have to hunt through and find it. Again you can use Firebug or Chrome developer tools for this as well.
The most simple solution may be simply adding an font-family: Questrial, sans-serif !important;