Ok here’s the thing:
http://cherrykoks.de/wp-content/themes/Newspaper/images/demo/logo-footer.png (Dimensions: 275 x 58)
http://cherrykoks.de/wp-content/themes/Newspaper/images/icons/similar-right.png (Dimensions: 6 x 9)
http://cherrykoks.de/wp-content/uploads/2014/08/log300opt.jpg (
these Images are the problems for GTMetrix….
I swear, that I’ve googled about 2 hours. Every page says: yeah specify it…
(oh really) I’m new to this whole thing and I would like to correct these problems but:
I found nowhere, WHERE to add this :
(example)
When I open the css file – I cannot find these tags. (btw: do I only have to change this there?)
Hope you guys can help me!
Thank you very much 🙂
Well, the first one is obviously irrelevant as that’s not the logo for your site, so just delete it. Clear your site cache so it can’t be seen. You obviously installed the demo content, which was then cached and hence why that is still found. If you upload your own logos, then the Newspaper logo shouldn’t show up on your site anymore.
FYI, useful to include the link to your GTMetrix report 🙂
I think the logo is loaded from the header and footer files, or a dependent file loaded by one of those and not in the style.css. So, if you look att the header.php script, then look at the different use cases for the layout option you’re using, you should be able to find the right header element…
e.g.,
default:
// this is the default header configuration
// (logo + ad) + menu
locate_template('parts/header-style-1.php', true);
locate_template('parts/menu-header.php', true);
break;as so:
<a itemprop="url" href="<?php echo home_url(); ?>">
<img width="300" class="td-retina-data" data-retina="<?php echo htmlentities($td_customLogoR) ?>" src="<?php echo $td_customLogo?>" alt="<?php echo $td_logo_alt ?>"<?php echo $td_logo_title ?>/>
</a>If I’m not mistaken width is specified implicitly to hint the page rendering, and then height is set as “auto” via the theme CSS, which is now common practice.
Hope that helped a little 🙂
http://gtmetrix.com/reports/cherrykoks.de/3AuGe7Xh
sorry here it is
How can I prevent things like this and do I have to change code for every future image I upload or else?
and how can I find out, where the images( which are affected) are used (in which file?)
I’m no programmer 😉
thanks
Hi, I wouldn’t worry about those two images which are sized with CSS, as they may technically be false positives on GMetrix. Google doesn’t advise you about that, so the fact you have 92 desktop with the ads and fonts “on” isn’t too shabby.
I’d focus more on removing the versioning queries on stuff (blah?=version4.1) which can be done by editing functions.php file, or some plugin might help. I’d also minify the css and java that google recommends here:
https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fcherrykoks.de%2F&tab=desktop
Minifying http://cherrykoks.de/…ntent/themes/Newspaper/style.css?ver=4.1 could save 8.3KiB (19% reduction) after compression.
As a perfect example of how imperfect this adventure is, you’ll note most of the “errors” come from Google’s universe and not your site !
Turn off the revolution slider plugin if not using it, since it adds the two CSS style sheets Google cautions about, and recommends combining.
Most important however is your mobile score which is 75; and you want that 80 or higher. Right now the revolution slider CSS is hurting that, along with one image you uploaded which is not well optimized.
Compressing and resizing http://cherrykoks.de/…wp-content/uploads/2014/08/3-745x483.jpg could save 108.6KiB (87% reduction).
yeah thank you for this btw…
p.e
<img width="300" height="100" class="td-retina-data" data-retina="http://cherrykoks.de/wp-content/uploads/2014/08/log600.jpg" src="http://cherrykoks.de/wp-content/uploads/2014/08/log300opt.jpg" alt="CK LOGO "
Did I do this right- by writhing the height directly after width?
The Queries:
well actually I added a code via plug “Code Snippets” like this:
function remove_cssjs_ver( $src ) {
if( strpos( $src, ‘?ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );before I included this – I had this code inside functions.php
/** Remove Query strings from Static Resources. */
function _remove_script_version( $src ){
$parts = explode( ‘?’, $src );
return $parts[0];
}
add_filter( ‘script_loader_src’, ‘_remove_script_version’, 15, 1 );
add_filter( ‘style_loader_src’, ‘_remove_script_version’, 15, 1 );
<?php
}
add_action(‘print_media_templates’, ‘td_change_backbone_js_hook’);
Should I use one of this or use a plugin?
Minify: yeah have seen had, but don’t know how to do (again: I’m no programmer and I don’t know css oder js )
my Cloudflare should originally do this (installed today- will take some time) Will this be enough? (or got an idea for dizzy blondes? 😀
Will have to change all this on the weekend…sadly I like the slider, looks good, but if its causing all the problems … 🙁
Btw: I’m actually surprised that other “big” german blogs have way poorer results, despite all that : they’re famous with a huge readership.
Hi, well if you read through my posts on the Page Speed topic, I’ve noted the code I use in functions.php to remove the ? queries which I prefer to using plugin, which it seems you have okay, and also how to do the CSS and JS minification, which takes 5 minutes — just copy the code into the CSSminifier site, then copy out the minified version and then overwrite your css file on the server via FTP. Bam – you’re done 🙂
And of course optimizing your images prior to upload is super important, too.
For the size thing, you can certainly try adding the =”100″ to your header, and see if that improves your score or not. In my case it was a non-issue since I’m using mod_pagespeed on our server which adds image dimensions on the fly including for anything resized based on CSS percentage width images which is the cat’s pajamas as my grandma used to day 🙂
Well … remember audience comes from content — original content — not page speed. If you get above 90 for desktop and 80 for mobile you can move on with your life and concentrate on content, and then revisit this stuff as it comes up. (Now, I will admit I wasted the entire month of January 2014 on this adventure, so I can’t advise others about not getting obsessive …).
I don’t use Cloudflare – some people love it.
http://cssminifier.com/ like this? Didn’t know that something like this exists.
😀
you’re my personal angel tonight. Thank you a lot dear, I know I’ll have homework to do by no later than weekend 🙂
If there’s still something to talk about- I hope I can still ask you
Goin’ to bed now, have a nice day 🙂
Just for fun you might want to check out this topic, but work “backwards” for my later posts on stuff like mods, and tricks 🙂
https://forum.tagdiv.com/topic/pagespeed/
Also if you want a warm and fuzzy, be sure to test your site for “page speed” with all Google advertising “off” for the real score.
Hi Chris
Well I was searching for the exact code you were talking about for queries in the “pagespeed” thread, on which page is it? Can’t find it 🙁
btw: site with CF now :
Hi, easier for me to copy stuff from my functions.php than find it, I’ll admit!
Here is my custom code in my functions.php file … not all of this may apply to you or anyone, but it’s what we do for our sites:
(I put this at BOTTOM of the functions.php file — NOT the top!!!)
/*CHRISTOPHER'S CUSTOM MODS - 1.12.14 rev1 */
remove_action( 'wp_head', 'wp_generator' ) ;
remove_action( 'wp_head', 'wlwmanifest_link' ) ;
remove_action( 'wp_head', 'rsd_link' ) ;
remove_action( 'wp_head', 'feed_links', 2 );
remove_action( 'wp_head', 'feed_links_extra', 3 );
add_filter( 'pre_comment_content', 'wp_specialchars' );
function no_errors_please(){
return 'GET OFF MY LAWN !! RIGHT NOW !!';
}
add_filter( 'login_errors', 'no_errors_please' );
/* Disable YOAST SEO Admin Bar. */
function mytheme_admin_bar_render() {
global $wp_admin_bar;
$wp_admin_bar->remove_menu('wpseo-menu');
}
// and we hook our function via
add_action( 'wp_before_admin_bar_render', 'mytheme_admin_bar_render' );
function delete_enclosure(){
return '';
}
add_filter( 'get_enclosed', 'delete_enclosure' );
add_filter( 'rss_enclosure', 'delete_enclosure' );
add_filter( 'atom_enclosure', 'delete_enclosure' );
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'jpeg_quality', create_function( '', 'return 60;' ) );
function remove_pingback_url( $output, $show ) {
if ( $show == 'pingback_url' ) $output = '';
return $output;
}
add_filter( 'bloginfo_url', 'remove_pingback_url', 10, 2 );
function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
$src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );
ah yeah now I can see it 🙂
Hey Chris,
minified CSS- deleted Rev Slider.
I’m so glad you helped me: check this out.
http://gtmetrix.com/reports/cherrykoks.de/5VlGSdJX
and check my insights result for mobile…
only the desktop went from 92 to 89 :/
If you have any other ideas let me know 🙂
is it adviseable to minfy again the minfied version of stylesheet css or let it be like that?
Remember to clear cache on your CDN each time you upload something like a new version of the functions.php file or the minified style.css file … otherwise it may keep serving the old versions.
Also note my setting in the functions.php for optimizing the jpeg thumbnails from 90 to 60, is a good addition (no plugin needed!).
For the Google fonts item …
there is one trick I did, which is download that style sheet from Google being loaded for your pages, copy/paste the CSS from that file and put at bottom of your style sheet, and delete loading the Google fonts (I think you can comment that out in the functions.php file); this way the CSS is loaded as part of YOUR style sheet and NOT being loaded from Google. This saved me couple of points as one less download, and no worries about expirations or minification for the Google CSS for the fonts.
And remember to get your “real” Pagespeed from Google Insights turn off your AdSense stuff temporarily, as the errors from that you can’t do anything about, and are not technically part of your “real” score 🙂
Do you think I should minify my “minified” stylesheet again, because insight is still complaining about that.
For the Google fonts item …
there is one trick I did, which is download that style sheet from Google being loaded for your pages, copy/paste the CSS from that file and put at bottom of your style sheet, and delete loading the Google fonts (I think you can comment that out in the functions.php file); this way the CSS is loaded as part of YOUR style sheet and NOT being loaded from Google. This saved me couple of points as one less download, and no worries about expirations or minification for the Google CSS for the fonts.
Google Fonts?
Which file should I download from where?
Sorry didn’t get that 😀
There are 4 components that can be minified
inline <script> tag #5
inline <script> tag #9
inline <script> tag #15
inline <script> tag #19
Do you know where I can find these?
You shouldn’t need to minify the css file again, if you’ve cleared the cache on your CDN so that people are loading the new minified version vs the old non-minified version. Easy to test, point your browser at the file and download to see if it’s the right one being served.
One of the items in your GTMetrix report (click the little arrows to expand each item), shows this:
•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.1
Basically if you download that file and add it to the end of your style.css file, then remove the above code from your pages, you remove that issue reported in GTMetrix.
Also, I’m assuming you’ve not updated everything since the ?= versioning was still showing.
•http://cherrykoks.de/wp-content/plugins/contact-form-7/includes/css/styles.css?ver=4.1
•http://cherrykoks.de/wp-content/themes/Newspaper/includes/wp_booster/external/bootstrap/td-bootstrap.css?ver=4.1
•http://cherrykoks.de/wp-content/themes/Newspaper/style.css?ver=4.1ALSO: I don’t know why your posts have weird td-slug stuff vs the filenames based on pretty permalinks. That is so NOT normal, btw. Be sure to check your htaccess file to see that the block for your pretty permalinks is in there (or just resave your permalinks in wordpress general settings – and it will tell if you if the file is writable).
Hey.
Well – on which pages / files do I have to remove the google Fonts?
Actually I added your code into the functions.php like this:
`function remove_cssjs_ver( $src ) {
if( strpos( $src, ‘?ver=’ ) )
$src = remove_query_arg( ‘ver’, $src );
return $src;
}
add_filter( ‘style_loader_src’, ‘remove_cssjs_ver’, 10, 2 );
add_filter( ‘script_loader_src’, ‘remove_cssjs_ver’, 10, 2 );`
What code should I insert into the .htaccess?
My Permalinks are user definied :
/%category%/%postname%/
In my .htaccess :
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
When you set your permalink structure in the WP settings panel; it will write the proper code to your htaccess file for you, if the file is writable.
You have something funky with your pages, unless you’ve just been editing the demo content vs making new posts … e.g.,
this page
http://cherrykoks.de/allgemein/td_d_slug_44/
should be something like
http://cherrykoks.de/allgemein/name-of-my-story-goes-here/
So that is something wonky you should sort out soonest.
For the Google fonts; once you add the code for the fonts you want to your style.css file, you would delete or comment out the section on google fonts from the functions.php file. Search the forum for more on how to do that.
To use websafe fonts, you’d comment the google fonts out of the functions file and then select the fonts you want in the theme panel under fonts 🙂
Ok Comment out = deleting them from the functions.php and choosing the font in my theme panel like -> font family: Georgia, Times – right?
Nothing else to do?
Would like to start with content, but still hangin’ with optimizing stuff, grinds my gears 😀
are these websafe?
Any idea why I still have query strings although I added your code?
Can’t find a resolutin for this. 🙁
