Search Results for 'pagespeed'

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.

You need to *decide* what fonts you wish to use for the theme.

If all of this is beyond you, then you can simply stick with the standard font usage as most sites do. What we’re talking about here is somewhat advanced; and if it doesn’t make sense, then you should likely skip this and worry about other necessary site optimizations.

If you look at my code from functions.php in 4.4 version of theme, you will also need to comment out the line that calls the Google fonts (using // ):

/*  ----------------------------------------------------------------------------
    CSS - front end
 */

function td_load_css() {

    //google fonts
    if ((defined('TD_DEPLOY_MODE') and (TD_DEPLOY_MODE == 'demo' /*or TD_DEPLOY_MODE == 'dev' */)) or defined('TD_SPEED_BOOSTER')) { //on demo and dev we load only the latin fonts
        //modify this collection if you want to optimize the fonts loaded
        //collection url -> : http://www.google.com/fonts#ReviewPlace:refine/Collection:PT+Sans:400,700,400italic|Ubuntu:400,400italic|Open+Sans:400italic,400|Oswald:400,700|Roboto+Condensed:400italic,700italic,400,700
        //wp_enqueue_style('google-font-rest', td_global::$http_or_https . '://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'); //used on menus/small text
    }

and I deleted this

        $td_user_fonts_list = array();
        $td_user_fonts_db = td_util::get_option('td_fonts');
        if(!empty($td_user_fonts_db)) {
            foreach($td_user_fonts_db as $td_font_setting_key => $td_font_setting_val) {
                if(!empty($td_font_setting_val) and !empty($td_font_setting_val['font_family'])) {
                    $td_user_fonts_list[] = $td_font_setting_val['font_family'];
                }
            }
        }

        if(!in_array('g_438', $td_user_fonts_list)) {//'g_438', //Open Sans
            wp_enqueue_style('google-font-opensans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on menus/small text
        }

        if(!in_array('g_617', $td_user_fonts_list)) {//'g_617', //Ubuntu
            wp_enqueue_style('google-font-ubuntu', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_453', $td_user_fonts_list)) {//'g_453', //PT Sans
            wp_enqueue_style('google-font-pt-sans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=latin,cyrillic-ext,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_445', $td_user_fonts_list)) {//'g_445', //Oswald
            wp_enqueue_style('google-font-oswald', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext'); //used on content
        }

        if(!in_array('g_521', $td_user_fonts_list)) {//'g_521', //Roboto
            wp_enqueue_style('google-roboto-cond', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_639', $td_user_fonts_list)) {//'g_639', //Vollkorn
            wp_enqueue_style('google-vollkorn', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700'); //used on quoates classic
        }
    }

You would still need to search/replace all instances of Google fonts in your style.css as I stated to replace all font stacks with the Google fonts you wish to use. Or, you’d need to look at the fonts in there to use for grabbing the CSS from Google Fonts to put at bottom of your style.css file.

If I remove as you mentioned above

        $td_user_fonts_list = array();
        $td_user_fonts_db = td_util::get_option('td_fonts');
        if(!empty($td_user_fonts_db)) {
            foreach($td_user_fonts_db as $td_font_setting_key => $td_font_setting_val) {
                if(!empty($td_font_setting_val) and !empty($td_font_setting_val['font_family'])) {
                    $td_user_fonts_list[] = $td_font_setting_val['font_family'];
                }
            }
        }

        if(!in_array('g_438', $td_user_fonts_list)) {//'g_438', //Open Sans
            wp_enqueue_style('google-font-opensans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on menus/small text
        }

        if(!in_array('g_617', $td_user_fonts_list)) {//'g_617', //Ubuntu
            wp_enqueue_style('google-font-ubuntu', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_453', $td_user_fonts_list)) {//'g_453', //PT Sans
            wp_enqueue_style('google-font-pt-sans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=latin,cyrillic-ext,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_445', $td_user_fonts_list)) {//'g_445', //Oswald
            wp_enqueue_style('google-font-oswald', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext'); //used on content
        }

        if(!in_array('g_521', $td_user_fonts_list)) {//'g_521', //Roboto
            wp_enqueue_style('google-roboto-cond', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_639', $td_user_fonts_list)) {//'g_639', //Vollkorn
            wp_enqueue_style('google-vollkorn', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700'); //used on quoates classic
        }
    }

I get

Parse error: syntax error, unexpected $end in /home/site/public_html/wp-content/themes/Newspaper/functions.php on line 1505

How do I know what font I am using ?

I found the code. What to do here, to remove the fonts I don’t use ?

/*  ----------------------------------------------------------------------------
    CSS - front end
 */

function td_load_css() {

    //google fonts
    if ((defined('TD_DEPLOY_MODE') and (TD_DEPLOY_MODE == 'demo' /*or TD_DEPLOY_MODE == 'dev' */)) or defined('TD_SPEED_BOOSTER')) { //on demo and dev we load only the latin fonts
        //modify this collection if you want to optimize the fonts loaded
        //collection url -> : http://www.google.com/fonts#ReviewPlace:refine/Collection:PT+Sans:400,700,400italic|Ubuntu:400,400italic|Open+Sans:400italic,400|Oswald:400,700|Roboto+Condensed:400italic,700italic,400,700
        wp_enqueue_style('google-font-rest', td_global::$http_or_https . '://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'); //used on menus/small text
    } else {

        $td_user_fonts_list = array();
        $td_user_fonts_db = td_util::get_option('td_fonts');
        if(!empty($td_user_fonts_db)) {
            foreach($td_user_fonts_db as $td_font_setting_key => $td_font_setting_val) {
                if(!empty($td_font_setting_val) and !empty($td_font_setting_val['font_family'])) {
                    $td_user_fonts_list[] = $td_font_setting_val['font_family'];
                }
            }
        }

        if(!in_array('g_438', $td_user_fonts_list)) {//'g_438', //Open Sans
            wp_enqueue_style('google-font-opensans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on menus/small text
        }

        if(!in_array('g_617', $td_user_fonts_list)) {//'g_617', //Ubuntu
            wp_enqueue_style('google-font-ubuntu', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_453', $td_user_fonts_list)) {//'g_453', //PT Sans
            wp_enqueue_style('google-font-pt-sans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=latin,cyrillic-ext,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_445', $td_user_fonts_list)) {//'g_445', //Oswald
            wp_enqueue_style('google-font-oswald', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext'); //used on content
        }

        if(!in_array('g_521', $td_user_fonts_list)) {//'g_521', //Roboto
            wp_enqueue_style('google-roboto-cond', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_639', $td_user_fonts_list)) {//'g_639', //Vollkorn
            wp_enqueue_style('google-vollkorn', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700'); //used on quoates classic
        }
    }

    //add the google style link for fonts used by user
    $td_fonts_css_files = td_util::get_option('td_fonts_css_files');
    if(!empty($td_fonts_css_files)) {
        wp_enqueue_style('google-fonts-style', td_global::$http_or_https . $td_fonts_css_files);
    }

    //bootstrap - custom built - it was generated via compilation of /external/bootstrap-master/less/bootstrap.less

    wp_enqueue_style('td-bootstrap', get_template_directory_uri() . '/includes/wp_booster/external/bootstrap/td-bootstrap.css', '', TD_THEME_VERSION, 'all' );

    //main theme style - set the TD_DEBUG_USE_LESS flag in /includes/app/td_config.php and the theme will load the less files and compile them for you
    if (TD_DEBUG_USE_LESS) {
        wp_enqueue_style('td-theme', get_template_directory_uri() . '/td_less_style.css.php',  array('td-bootstrap'), TD_THEME_VERSION, 'all' );
        //wp_enqueue_style('td-theme', get_template_directory_uri() . '/style.less', array('td-bootstrap'), TD_THEME_VERSION, 'all' );
    } else {
        wp_enqueue_style('td-theme', get_stylesheet_uri(), array('td-bootstrap'), TD_THEME_VERSION, 'all' );
    }
}
add_action('wp_enqueue_scripts', 'td_load_css');

I had a real content but then I installed seo yoast and w3 total cache. Result was rss problem. I checked the solutions on the web all of them quite different and didnt worked. Thats the reason I start from beginning.

Now my plan is to make the website ok and increase the pagespeed if I can. when everything is fine, add the content. I spend much time to create the content. I dont want to lose them all with a silly problem. This is my first wordpress site. So I dont know the issues. I’m reading your posts about pagespeed and try to understand but it is not easy for me.

Feed does not work. I checked it with no plugins at first but it was same.
How can I start without any problem? What I need? I created new database, new wordpress and new theme.

Google is a great search tool… as this is a common practice easily researched which has nothing to do with this theme. Learning these kinds of tricks is part of basic web development using Google fonts. 😉

However, the basics are

1) search/replace all font mentions in the style.css to use the Google font you wish to use; in my case ‘Open Sans’

2) go to the Google fonts site, and find the font you want in the weights you want, in my case ‘Open Sans’ and get the code from them to place into your website
https://www.google.com/fonts#UsePlace:use/Collection:Open+Sans
in my case, normal, normal italic, bold, bold italic

3) choosing the above gives you code you’d normally place in the head of your web doc, or footer for some setups
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,400,700' rel='stylesheet' type='text/css'>

The above is essentially what the theme loads except has various hooks and functions to let you select those in the admin panel; however you want to actually instead, take that CSS and put at bottom of your own style.css file and it can be done after minification (if you’re doing that) so you don’t minify this code.

So, basically take that URL and open in a web browser; which should download it to your hard drive;

4) then, open that and it will give you the CSS

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 400;
  src: local('Open Sans'), local('OpenSans'), url(http://fonts.gstatic.com/s/opensans/v10/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 700;
  src: local('Open Sans Bold'), local('OpenSans-Bold'), url(http://fonts.gstatic.com/s/opensans/v10/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 400;
  src: local('Open Sans Italic'), local('OpenSans-Italic'), url(http://fonts.gstatic.com/s/opensans/v10/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff) format('woff');
}
@font-face {
  font-family: 'Open Sans';
  font-style: italic;
  font-weight: 700;
  src: local('Open Sans Bold Italic'), local('OpenSans-BoldItalic'), url(http://fonts.gstatic.com/s/opensans/v10/PRmiXeptR36kaC0GEAetxjqR_3kx9_hJXbbyU8S6IN0.woff) format('woff');
}

PLACE the above, or comparable code for the fonts you’re using, into bottom of your CSS file. If you’re running your site as https, then change URL to https.

5) using the info from my previous post in this thread; remove the section in the functions.php file which loads the Google fonts – so the old “calls” to the Google fonts won’t “print” on your HTML pages.

6) finally, if necessary, make sure you have all the font selections in the theme panel set to “default” as choosing any Google font won’t work, obviously

And obviously you would want to ensure your caching is off, mod_Pagespeed is ‘off’ if using that, and you’d likely need to clear your cache in your web browser and hit refresh couple of times to see the site properly with the change.

Kaboom! Mischief managed.

Actually … if I may chime in …

if you use my trick to edit the wp-config.php file, as I suggested, to put in the directive to state the site is https:// you don’t need to do any redirect as WordPress will do that automatically as a redirect for http:// requests. QED.

For instance this also fixes it so that when you go to
WP admin > settings > general settings –
the URL will now show https://yoursite

You can see this “in action” where I did this last week here:
http://www.send2press.com/guru/

note the soft redirect to https, with the theme (I think this is v4.2.2)

ALSO: Google *does* want the ENTIRE site to be https, not just the home page. The idea is to make the web more “trusted” with encrypted connections.

So, if you have a service information page on your site, that needs to be https also. The idea being for a ranking signal, that if you and your competitor both have the same perceived value, if one is https and one is http, the https site will rank a dot higher.

To properly secure your site you do need an SSL certificate installed on your domain. A self-signed cert “might” work for Google’s purposes, but this has not yet been fully acknowledged, although mod_pagespeed does support self-signed certs for pulling http content over https, although we’re doing it using the static paths method.

Christopher Simmons, and how to do that ?

Chris how about this render blocking warning? 🙁
https://developers.google.com/speed/pagespeed/insights/?url=www.styzic.com

Yes, you need to load the google fonts css at end of your style.css file and remove calls to google from your functions.php file

I can totally understand your pain …. https is going to really tricky …. mod_pagespeed and good server has replaced the cdn for now …. have you thought of tuning the responsive side of the theme yet?

Eliminate render-blocking JavaScript and CSS in above-the-fold content

Your page has 6 blocking CSS resources. This causes a delay in rendering your page.
None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronously load blocking resources, or inline the critical portions of those resources directly in the HTML.
Optimize CSS Delivery of the following:
http://fonts.googleapis.com/…-ext,greek,vietnamese,latin-ext,cyrillic
http://fonts.googleapis.com/…c-ext,greek-ext,greek,latin-ext,cyrillic
http://fonts.googleapis.com/…et=latin,cyrillic-ext,latin-ext,cyrillic
http://fonts.googleapis.com/…swald:400,300,700&subset=latin,latin-ext
http://fonts.googleapis.com/…-ext,greek,vietnamese,latin-ext,cyrillic
http://fonts.googleapis.com/…ily=Vollkorn:400italic,700italic,400,700

How To fix this ?

Sorry, but you should without question use a cache. It will only mess things up for your visitors if you use the wrong settings. W3 Total Cache without minifying javascript or CSS is safe. This issue has been brought up and this solution recommended in Newspaper’s docs and the forum many times. 🙂 It will pretty much do a page cache, expiry headers, and basic (but highly necessary) compression.

W3 Total Cache can also be combined with a service like Cloudflare, which serves your site to visitors from its servers rather than your own. It speeds up delivery of some resources and helps with your server response time. (Pagespeed reports that your server responded in a massive 3.7 seconds.) I use this setup too.

A plugin like EWWW Image Optimizer will help with your optimize images problem. Note that you’ll want to do a one-time bulk optimization of your media library, which will take a long time, but after that it should just optimize on upload.

Feel free to ask for more details on the above steps. Once you try all of them, check your scores again. They will have greatly improved.

These are the steps that require little or no technical knowledge, but uf you still need more, start reading the excellent posts by Christopher Simmons and others in the sticky Pagespeed thread.

Best of luck!

<LOL>
welcome to my world; I did the same thing!

I might switch it back on at some point, but right now I found with good optimizations, mod_pagespeed, and decent speed server, the CDN caused more problems. My fave was the CSS not loading for FontAwesome in IE11/Win7-64 totally randomly. (sigh)

Some people have great success with using a CDN, though. It gets even tricker when going to https, which we’re doing now, where you need SSL cert for CDN, wildcard SSL cert for your domain to use a subdomain like cdn.mysite.xyz with A/C name record, and then sharding and/or domain origin mapping with mod_pagespeed …. ouch!

(for those tuning in …. not responsible for your head exploding reading that last paragraph! 🙂 )

Review the docs on mod_pagespeed and your CDN.

The theme creates the thumbnails when *not* using CDN wiht mod_pagespeed; the theme creates thumbnails when using mod_pagespeed, so I’d suspect you have an issue where you’re creating thumbs not locally but perhaps on your CDN and then the theme doesn’t know where they are. Or, your setup isn’t configured as to where to create thumbs, and then mod_pagespeed doesn’t know where they are to optimize them, etc.

Seems like you need to go through the steps of researching

theme assets -> CDN/thumbnails
mod_pagespeed <- CDN/thumbnails

* Did you setup mod_pagespeed to work with your CDN ?

You have to setup sharding or origin domain settings for mod_pagespeed to work with a CDN.
https://developers.google.com/speed/pagespeed/module/domains#mapping_origin

* Also, check to see if the thumbnails are actually being written in your images directory.

Did you regenerate all your thumbnails for the theme when switching to it, so that the thumbnails are actually there?

Either of those would be my first suggestion.

Hi Christopher,

I tried almost everything. But the issue is either theme or mod_pagespeed is scaling images from css and not using thumbnails.

What should i do?

Maddy

@mrpb
make sure you experiment with the best mod_pagespeed settings, perhaps using some of my own settings for apache based servers from the page speed sticky at top of forum.

The theme has no settings for mod_pagspeed — that is managed by you via your htaccess file and the server config file.

I am having the same issue from last few days. My page size went up from 1mb to 2.5 mb. This started happening when i got mod_pagespeed enabled on server. Please check http://gtmetrix.com/reports/www.moviereviewpreview.com/hgGcN1aA

As to the “most efficient” way to load the images; you’d have to play with that yourself and figure out what works the best for “all uses” … I don’t know how much of a tradeoff it would be to have to constantly do if/then loading of different images based on the mobile size with gallery type layouts. Lot of queries.

But, my personal thing would be to actually turn off the images for mobile except for the single featured image on the page, and for home page just show tiny thumbnails 100×100 or whatever for the list of stories.

So, on posts you’d see ONLY the single small 300px image and no other images, much like the Apple “reader” mode except with a single image (featured image).

I never test speed of “home page” as that isn’t relevant for most SERPS anyway, since the content is changing and you want your posts found under the topics not the home page anyway.