Support » Plugin: Autoptimize » Google fonts and analytics

  • Resolved Piani

    (@webbmasterpianise)


    I have tweaked my sites to almost perfection with the help of Autoptimizer. Thanks again for this superb plugin Futtta!

    Now I only have 2 anoying errors left. Im searching the web for tips but do not figure out if im suppose to solve this or just let them be left there.

    In theme Twenty Twelve I get this.

    This CSS is blocking rendering of the page:
    https://fonts.googleapis.com/…700italic,400,700&subset=latin,latin-ext
    (Im not sure if this is the best way to have fonts working?)

    This have a bad cashe time:
    http://www.google-analytics.com/ga.js (2 hours)
    (I find some info that there is a new analytics to use, analytics.js? Or should i try remove this completley?)

    Looks like Google stuff thats suppose to be there but can this also be adressed and tuned? Is this in official TwentyTwelve theme or is it old leftovers? Please advice or post links that explain this.

    https://wordpress.org/plugins/autoptimize/

Viewing 15 replies - 1 through 15 (of 19 total)
  • Plugin Author Frank Goossens

    (@futtta)

    The best way to do fonts is not to use them. The second best way is using Google’s fontloader js solution 🙂

    For Google analytics there’s no easy fix that I know of I’m afraid.

    Frank

    Thread Starter Piani

    (@webbmasterpianise)

    Its funny how Google testing tool have most problems of accepting their own Google fonts and Google analytics 😉

    https://developers.google.com/speed/pagespeed/insights/

    Thread Starter Piani

    (@webbmasterpianise)

    Here is my fix for Google fonts in Twenty Twelve. Now I have 99% in page test and only have the ga.js left to solve 🙂

    There is lots of plugins that can fix this for you and for more advanced sites that is maby a good choice. You can by this metod choose any font family you want but you need to tweak manually, and you dont need that with a font plugin.

    See some nice font familys to choose from here: http://www.webdesigndev.com/16-gorgeous-web-safe-fonts-to-use-with-css/

    First add this in your child functions.php:

    //Remove google fonts open sans
    function mytheme_dequeue_fonts(){
    wp_dequeue_style( 'twentytwelve-fonts' );
    }
    add_action( 'wp_enqueue_scripts', 'mytheme_dequeue_fonts', 11 );

    Then add the basic font choice in your child style.css:

    /* New basic fonts */
    
    body {
    	font-family: Verdana, Verdana, Geneva, sans-serif;
    }
    
    body.custom-font-enabled {
    	font-family: Verdana, Verdana, Geneva, sans-serif;
    }

    You can if you want tweak h1, h2 and so on but if you want major changes and control i suggest you try some font-plugin.

    Plugin Author Frank Goossens

    (@futtta)

    dequeuing the twentytwelve-fonts suffices, actually, as twentytwelve’s style.css has the fallback-fonts available:

    body {
    	font-size: 14px;
    	font-size: 1rem;
    	font-family: Helvetica, Arial, sans-serif;
    	text-rendering: optimizeLegibility;
    	color: #444;
    }
    body.custom-font-enabled {
    	font-family: "Open Sans", Helvetica, Arial, sans-serif;
    }

    even if body has “custom-font-enabled” class active, as open sans isn’t available the fallback-fonts are used.

    except if you absolutely want Verdana as well, off course 😉

    frank

    Thread Starter Piani

    (@webbmasterpianise)

    Since i cashe my WP site I cant really see any difference in speed with removing Google fonts. The rating on Google Page test went up from 78 to 99 thow.

    The Google analytics as far as I know shuld be left untouched. Tt dont affect speed or rating that much.

    I happy with the tweaking for now. 99% rating and superfast should be enough 😉

    Ramanan

    (@superpoincare)

    There’s this plugin.

    https://wordpress.org/plugins/google-webfont-optimizer/

    Works well with Twenty Twelve and Autoptimize.

    Thread Starter Piani

    (@webbmasterpianise)

    Tnx for the tips. I will try it out.

    Thread Starter Piani

    (@webbmasterpianise)

    @superpoincare

    Thanks! That plugin makes exactly what you said and what I wanted so now I can use google fonts with no problem.

    Ramanan

    (@superpoincare)

    Piani,

    I think although the GWF Optimizer gets better page speed score (like 100 for me!), it isn’t faster in reality.

    It first downloads the webfontloader file from Google and then requests a CSS file from Google which in turn gets the fonts from Google’s servers.

    (I just changed my theme yesterday to Twenty Twelve, so my views may not be so correct).

    Plugin Author Frank Goossens

    (@futtta)

    I guess the main difference is that by virtue of webfontloader the fonts are loaded without being render blocking, although in that case you’ll either have a repaint when the fonts are loaded (you’ll see the fonts change) or the page will remain un-displayed until the fonts are there.

    So in the end it is still better (from a perf. point of view) to just use native fonts 😉

    frank

    Thread Starter Piani

    (@webbmasterpianise)

    After some more testing of GWFO i found a anoying side effect. The text fonts “bumps” after the first load even if I have cashed site. Its a small adjustment bump of the fonts and it looks stupid even if its a small change but as you wrote it also dont help the site loading speed so I will stick to my fist fix of static font familys.

    body {
    font-family: Helvetica, Arial, sans-serif;
    }

    body.custom-font-enabled {
    font-family: ‘Open Sans’, Helvetica, Arial, sans-serif;
    }

    Ramanan

    (@superpoincare)

    Yeah that’s called FOUT.

    It’s possible to smoothen the FOUT by using webfontloader using classes etc.

    https://github.com/typekit/webfontloader

    but involves some work.

    Plugin Author Frank Goossens

    (@futtta)

    It’s possible to smoothen the FOUT

    well, you can pick your poison really;

    • the font is loaded before the page is rendered, which makes it render blocking
    • the page is shown asap, postponing the download of the font and applying font after download, in which case you have FOUT (which will most probably always be visible)
    • you don’t use webfonts

    frank

    Frank is correct.

    You either have to host the (google) font(s) locally and know how to apply them inline, not use it/them; or, be willing to pay the performance price for using Web/Google fonts.

    As of the time stamp on this post, there are no other options.

    Typography in an important aesthetic and something everyone needs to decide on themselves. That said, even the most complex typography can indeed be optimized to be highly performant.

    Be well,
    AJ

    …one (?) other thing.

    PageSpeed Insights – this is what is being referred to here, yes? – does not report “errors“. Nothing that PSI reports to the user of the tool is in “error“.

    While PSI has a “speed” grade, PSI does not actually measure speed. Unlike Google’s real-world performance testing platform WebpageTest, you’re not given any actual metrics because PSI doesn’t measure any…

    PageSpeed Insights is an exceedingly generic best practices program; a grouping of if-then algorithms that assume if x, y and z are in place and a,b and c are not, that it can give certain grades. In Google’s defense, they’ve never claimed otherwise; nonetheless, an entire mythology has evolved around this very simple tool.

    All online best practices tools like PSI are in some way synthetic, dramatically oversimplify the nature of performance optimization (doing so for ease of use by the layman), are highly prone to false-positives; and, are in no way designed to provide rich diagnostic information.

    And no: Google in no way, shape or form utilises a site’s PSI grades for ranking purposes, precisely for the reasons stated above. Google makes use of RUM (Real User Monitoring) and takes into account – first and foremost – user experience centered performance metrics such as Time to First Byte, Start Render, First Paint, Time to Interaction, Time to Above the Fold (Visual) Completion, page-to-page render times; and, primarily, one’s site’s Speed Index relative to that site’s competitors‘ Speed Index.

    (Note: Further information intended solely as helpful was linked to in this post; but, for a reason known only to the unknown censoring moderator, was deleted.)

    Be well,
    AJ

Viewing 15 replies - 1 through 15 (of 19 total)
  • The topic ‘Google fonts and analytics’ is closed to new replies.