Basically what I’ve done for my site is
(not using child themes as they add CSS redirects bad for SEO/speed)
a) search/replace all instances of fonts I don’t want to load from Google in my style.css file; using common font stacks for fallback such as 'Open Sans',Arial,sans-serif
(if you don’t know what font stacks are, see: http://cssfontstack.com/
b) set all my fonts in theme panel to ‘default’ so there is no code if/then trying to insert any custom fonts into header/footer/speedbooster
c) commented out the code in functions.php which loads google fonts on the page; and also removed the section of code which has the various links to theme fonts on google I won’t be using; no need to have if/then code asking to load fonts from google if I’m never going to do that via theme code (as per examples in my prior posts in this thread); need to both or you will get error. Same code in 4.22, 4.3 and 4.4 versions of theme.
d) I grabbed the link from google fonts website for the font I wish to use (as per my example above in this thread), then pulled the actual css from that link so I won’t be loading the links to the fonts from their CSS file (one less CSS file loaded on page); placed this at bottom of my own style.css file after the minified code, so that it lives in its own section after theme styles.
All of this was done with caching off, mod_pagespeed off, so that changes are picked up immediately. When editing my files I use either TextPad on the PC, or BBEdit on the Mac, to ensure my files have Linux/Unix line breaks since I’m using Linux web server. Some PC editors will put “Windows line breaks” in files, which are bad for Linux servers, in some cases, and can cause parsing errors. So, helps to know what you’re doing if editing core files for a web server.
PURPOSE OF ALL OF THIS:
1) speed up website
2) remove intermediate call to CSS style sheet on google, which may not have proper expiration headers/TTL, and may show “advisory” from testing GTMetrix,PageSpeed Insights, etc. – may help “rating” by removing one so-called issue caused by Google’s own system.
You do *NOT* need to do this, unless you have ALL OTHER optimizations in place. Many sites load their fonts from Google using their function call as it’s essentially loading from a CDN. However, “hacking” the theme for this purpose can help advanced users resolve those last couple of ratings issues, and also those obsessed with micro-optimizations.
WARNING
this hack must be done EVERY time you update the theme; so if not willing to do that, best to skip this whole subject and get on with creating great content which is better for SEO and SERPS than saving a couple of milliseconds on font loading.
Chris, I get the 3 css files as render blocking, is there any way out for them? :/
I did as you said. I still had the error because I forgot
else {
All I did was editing function php. I use default fonts on site, I did no change in theme panel. That means I use default, so no google ? It works. 🙂 Thank you !!!
I got rid of some js codes, from g+, stat counter, etc. now I have 94/100 or 95/100.
Prioritize visible content
Your page requires additional network round trips to render the above-the-fold content. For best performance, reduce the amount of HTML needed to render above-the-fold content.
The entire HTML response was not sufficient to render the above-the-fold content. This usually indicates that additional resources, loaded after HTML parsing, were required to render above-the-fold content. Prioritize visible content that is needed for rendering above-the-fold by including it directly in the HTML response.
None of the final above-the-fold content could be rendered even with the full HTML response.This error only. Any more idea how to fix ? I have:
– W3 TOTAL CACHE
Page cache: enable, disk enhanced.
Minify : AUTO
– HTML minify settings: all checked except Line break removal
– JS: ENABLE … ADDED 3 js scripts from site, using minify and NON BLOCKING USING ASYNC.
– CSS: no
Database cache – enabled.
Browser cache enabled.
– Async JS and CSS
Load Javascript asynchronously
Load CSS asynchronously
Minify CSS
– Speed Booster Pack
All general options
55% image compression
Load CSS asynchronously
Minify all CSS styles
NO tagDiv speed booster (INACTIVE)…
Thanks for the previous video on site. I hope my settings help others. If anyone can help with my last issue, I would be gratefull.
To get rid of fonts by editing function.php made my site ugly. I reverted back the code in function.php. Better without 6 points than ugly site. I don’t understand how to manually add all the default fonts on site.
@cstyn
Re: custom fonts, and custom font loading …. simply removing code from functions.php is just *one* step as I outlined in detail. That step is only part of it to remove the theme calling on Google to load the fonts. If you don’t do all the other elements, like picking the NICE fonts you want and actually adding the CSS to your style.css file, then it serves no purpose. If it’s beyond you, then as I said, it’s best to stick with the built in theme functions until you get more adept at “hacking” WordPress and WP themes, which takes some time (I’ve been doing it a looooong time, and I still get lost on stuff!). 🙂
Theme says default… and doesn’t say what fonts actually use…
@cstyn
as I said, you need to *choose* which fonts you want to use on your site, as I did with Open Sans. In my examples, you would choose the fonts you want, search/replace those in the stlyes.css file, then grab CSS from Google for those chosen fonts, then put the CSS at bottom of your style.css; then hack the functions.php to no longer pull the stock fonts from Google since you’re loading your custom fonts.
Best to stick with built in theme font selectors, in your case, at this time. If you don’t yet know the purpose of the style.css, then this will be beyond you for the time being.
Best wishes, and sorry I couldn’t make that all any simpler.
UPDATE ON MY MOD_SPDY PLUS MOD_PAGESPEED ADVENTURE
for those of you doing the more arcane stuff with mod_pagespeed and perhaps looking to use mod_SPDY to speed up your site if moving to https, here is what we found over past 2 weeks of testing.
1) connecting mod_pagespeed to mod_SPDY caused Apache to stop/start every 3-5 hours. Not good.
2) using relative paths to static file directories in mod_pagespeed .conf file was the way to go; this allows pagespeed to load the files via /relative/paths/ vs sorting out what to load via http or https (via spdy)
3) running mod_SPDY without pagespeed connection seems to work quite well. (so far)
Anybody not doing any of the above can simply IGNORE this post as it won’t relate to you.
Thank you for your tips, Christopher. I appreciate your support here. I read all the things you posted.
I choosed open sans for all font styles in style.css and removed google fonts from functions.php like you said. It worked for chrome and Iexplorer but firefox do not show open sans. Is there any solution for this?
And I found that I need to change the font in td-bootstrap.css also. There is a PT Sans in it which is post content text. ??
Did you put the calls to Google for the open sans font at bottom of the style.css file?
That would likely be reason for the lack of fonts in Firefox.
I didn’t have the issue with td-bootstrap.css since if PT Sans isn’t being loaded from Google, it falls back to sans serif anyway. I suppose there might be a post type which uses that … but I didn’t end up having issue with it.
I don’t think I mentioned anywhere that in my style.css I also put open sans font stack in the first body class so it would be “default” font if no other font specified.
In case I didn’t include this previously:
In your WordPress Settings, you specify the WordPress address and the site address. Those are added in your database, and every time the developer calls it in the template, it is running a database query.
define('WP_HOME', 'http://www.wpsitez123.com');
define('WP_SITEURL', 'http://www.wpsitez123.com');
define('TEMPLATEPATH', '/absolute/path/to/wp-content/themes/active-theme');
define('STYLESHEETPATH', '/absolute/path/to/wp-content/themes/active-theme');By adding these in your wp-config.php, you are reducing the number of database queries thus increasing your site’s performance.
These settings are also useful if converting your website to “https” once you have SSL cert installed as WordPress can ‘soft-redirect’ any query for http://yourpage to https://yourpage; and it updates the WP Settings general page showing URL, and YOAST SEO picks this up for writing canonical links for https.
In case anybody is on to the more hard core optimization of WP.
Hi there, I wanted to give something back to the forum. For those who are struggling with the image size in mobiles I found an easy and practice solution. Just go to http://adaptive-images.com and follow their instructions. To sum up, what this hack do is recognize the user resolution and if it is smaller than the image it creates a new image to fit that size. It has a few cons: The image are only created once the user access your site with a smaller resolution. Google PageSpeed Test dont recognize this change, so you will be getting low scores for mobile.
On other subject, I am getting the following problem: Compressing https://platform.twitter.com/widgets.js could save 71.6KiB (69% reduction).
Anyone could solve this? I could find anything on Google.
Thanks in advance!
You cannot optimize code running on twitter’s servers unfortunately.
Hi everyone, our hunt for 95+ on desktop ( I have 96 now 😉 ) and 90+ on mobile ( I have 75 now 🙁 ) goes on.
I just found out a way to detect critical above fold css and inline it. And I put all other css in the footer. I got desktop score of 97 and mobile score of 92.
But, there’s a problem with it, there’s a flash of unstyled content (since the main css files are at bottom, and if we move that to top we’ll get render blocking warning).
So anyone who can help me and then everyone reading this thread get rid of that flash of unstyled content? 🙂
Desktop 97 and Mobile 92 coming soon, if this one gets solved. 😛
Shahshank your site is fast and checked it out on Google page speed so great job! My site is struggling to get up to 85 but thats mainly because of the plugins i have which include buddypress and bbpress. Was wondering what speed plugins your using?
Thanks to jetpack.css, my desktop score went from 96 to 90!
Thakksy I use only tagDiv speed booster and some custom editings in htaccess and functions.php, which you can find while reading this thread — thanks to chris, steven etc.
Not even W3 Total Cache! wow thats good.
Who told that I don’t use total cache? 😛 I of course need something for page cache or static html cache, although I keep changing plugins daily. 😀
Like I just moved to super cache! Any update on that flash of unstyled content?
@anna1986
you may find this useful
https://forum.tagdiv.com/how-to-make-the-site-faster/
generally you don’t want to use ANY of the minify functions of W3, as it will break things.
I guessed you didnt use w3 cache. I’ve just improved my score up to 85 and thats with buddypress, bbpress, disqus and a load of others! Used w3 cache, speed booster pack and leverage browser caching ninja. Also use cloudflare. Made some changes to .htaccess too. But dont think i should spend any more time on speeding up as I will buy the new theme once it’s out.
Does anyone know how to speed up the following under leverage browser caching?
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 minutes)
http://pagead2.googlesyndication.com/pagead/osd.js (60 minutes)
http://www.google-analytics.com/analytics.js (2 hours)
http://www.google-analytics.com/ga.js (2 hours)
You cannot change anything hosted on Google’s servers.
cheers, it’s so easy to get carried away trying to get site faster!
Hi Guys,
My Site score is too bad: https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fimprogrammer.net&tab=mobile: It is only 54 / 100
I followed This all steps: https://forum.tagdiv.com/how-to-make-the-site-faster/
I also followed Step “4. Remove render blocking css/js – using the TagDiv Speed Boosterplugin (Advanced Users)”
but i am not getting id of that file in my text file. It is not showing all blocked file id.
What i have to do ?
And also Minify HTML Which plugin i have to use ?
Thank you so much Please help me
Hi guys,
I’m getting on GTmetrix this “High priority” error to fix:
“Add Expires headers”:
There are 2 static components without a far-future expiration date.
http://fonts.googleapis.com/css?family=Roboto+Condensed%3A400%2C700%7CArimo%3A400%2C700%7CRoboto%3A400%2C700%7CChivo%3A400%2C700%7CAlex+Brush%3A400%2C700%7CRokkitt%3A400%2C700&ver=4.0
http://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic|Ubuntu:400,400italic|Open+Sans:400italic,400|Oswald:400,700|Roboto+Condensed:400italic,700italic,400,700?ver=4.4
Aren’t these part of the theme? Any way to fix that?
Thanks!
