Search Results for 'css'

Hi Lucian,

Thank you for getting back to me quickly.

The excerpt font is fine, however, the post title is in a different font “Roboto Condensed” and I could not see how to modify this with the typography panel. Do I have to modify the style.css to achieve this:

.td_mod_wrap .entry-title a {
color: #222222;
font-family: ‘open-sans’,sans-serif;
font-weight: normal;
}

Tried it, and no dice!

CSS seems to be the only way I’m going to be able to do it so it upscales automatically.

Hopefully someone will be able to shine some light on it for me!!!

@Lucian, there’s also this issue of the original css loading first (fonts and colors) and then the custom css. Makes for a bad user experience in my opinion.

No prob. As I think I said, I spent an entire month (January 2014) messing with this stuff, and a mix of Amazon’s CDN, our new server, mod_pagespeed, etc.

I think I mentioned someplace the flaw in Google’s speed algorithm, where one of my test pages got a 91/100 with 47% of page rendering due to blocking elements; combined some files, now only have one blocking element, but less than 1% is considered able to render before loading the main CSS file, and the score went up to 97/100 for desktop and 91/100 mobile with user UX score of 85/100, and the items for the UX score are stupid.

(Test this page, which doesn’t use CDN, doesn’t use WordPress:
http://www.send2press.com/services/ez_price_list.shtml

You can drive yourself to drink with this stuff.

And the super annoying thing is the new expectation by Google for all pages to load via https, which requires SSL cert, and to possibly enably mod_SPDY on server since https is inherently slower than http. But … that’s another story, and the one I’m suffering with now. (Sigh.)

thank you – I’ll do that.

After all, I’m fed up with all this, will try to optimize these last things (best as I could p.e minify the main css) and then focus on another things. (as you maybe notice I’m to focused in that)

sorry for all my questions by the way. I’m pretty new to this.

Hi Cherry
you might want to keep ONE thread, vs starting three or more regarding your site and pagespeed. Basically if you get all the things updated already covered in your other two threads, then mobile speed will also increase.

Again, as I’ve noted previously, you can’t do anything about the external ads being served which impact speed. Not sure how you’re loading ads on a demo site anyway, frankly. You should turn ads OFF for testing your “actual” speed. So the “errors” for mobile for the javascript and images from Google ads and advertisement browser caching, are impacting your score but nothing you can address and are false positives vis a vis the site and theme.

You *can* minify the main .css file which is showing as NOT minfied, as we’ve already covered in your prior threads.
Minifying http://cherrykoks.de/…ntent/themes/Newspaper/style.css?ver=4.1 could save 7.1KiB (16% reduction) after compression.

And basically don’t use contact form 7 unless you actually need it. Since you don’t have a live site, why would you need somebody to contact you anyway at this stage of your playing with the theme and setup without actual content. If you’re planning to use that, then you could presumably add its css to bottom of the main style.css, then hack the plugin to not write its own CSS into the head of the theme; or this would be example of where — as you’d asked elsewhere — you would add the plugin to the speedbooster plugin code to get it dumped at bottom of theme and optimized.

And remember best to test a post page for score not home page, since most people do NOT land on a site home page, but “surf in” to content from a social media link/share, or search result page, etc. — home page will always be a trickier prospect since it’s not indicative of the rest of the site, using sliders, modules, more photos, ajax loads, etc.

Also be aware you cannot get a 100/100 score with a WordPress site running numerous photos, plugins, ads, social media hooks, etc. Only people who have accomplished this have done custom sites without images, using CDN, and custom coding to maximize above the fold content load separate from below the fold content.

If you get above 80 on mobile and above 90 on desktop, you can really get on with your life and worry about content and marketing.

• This reply was modified 12 years by simchris.

Hi Christopher,

thanks for the advice. Is it enough to have the p tag or do I have to have two blockquote expressions in the Custom CSS?

Hi, I think you need the p tag in there with this theme (remember CSS changes need to match the classes used on the theme, not plain HTML which you’re writing from scratch).

For example I modified my own blockquote by putting this CSS into the custom CSS box in the theme admin panel:

blockquote p {
   font-size:20px !important;  line-height:26px !important;  text-align: left !important; padding-left:20px;
}

• This reply was modified 12 years by simchris.

Hi,
fyi if your server is setup properly you don’t need to put the gzip/deflate element in your htacess as it’s set at the server level as always on; unless you need that for your CDN – but that is more likely to have gzip/deflate on for speed anyway.

For plugins modification/addition to the speedbooster; obviously this only applies to the js and css related stuff which is purpose of tagdiv speedbooster. You don’t need to mess with an image optimization plugin, for example.

The world won’t end if you don’t remove the query strings, btw. Most WP sites leave that as-is and are successful due to content and marketing, not the query strings. Also note it might be an incremental “conflict” with this dot revision of theme and speed booster; meaning the benefit of the speed booster being on is greater than losing the query strings. Google uses them, so you can too. It’s “ideal” to remove them but that might not even improve stuff by one point, particularly if you test that with Pagespeed Insights directly vs GTMetrix.

However, you are correct, it would seem like you could remove the "?ver=" and test. Why not try it ? You’re not running a live site, obviously, so if you crash, no biggie. Just remove the plugin, and put it back.

I use a plugin to actually upscale the image to new image block size, vs simply “resizing via CSS” — might not be what you want, but try “Thumbnail Upscale” plugin in the WP repository.

Has anyone a suggestion for better Mobile Speed?
https://developers.google.com/speed/pagespeed/insights/?url=cherrykoks.de

already minified these- and still not good enough – on desktop it’s “acceptable”

http://gtmetrix.com/reports/cherrykoks.de/MAxHG3vb

Was thinkin’ about to combine the 3 css files into 1 – (p.e everything in stylesheet.css) but don’t know how where to change the “calls” for html. (which file and which code there? )

Is it useful to combine? The internet community is torn about that issue.

• This reply was modified 12 years by Cherry.

Ok FYI if interested, I reinstalled again yesterday because of the things Steven told me.

Well Chris- I still use the W3 Cache (page only) and wrote the rest of .htaccess by myself, like u posted in another thread. (little bit proud on myself that it did not crash 😀 )
Is everything ok with that or have any other suggestion?

See my current htaccess here:

# BEGIN W3TC Page Cache core
<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{HTTPS} =on
    RewriteRule .* - [E=W3TC_SSL:_ssl]
    RewriteCond %{SERVER_PORT} =443
    RewriteRule .* - [E=W3TC_SSL:_ssl]
    RewriteCond %{HTTP:Accept-Encoding} gzip
    RewriteRule .* - [E=W3TC_ENC:_gzip]
    RewriteCond %{HTTP_COOKIE} w3tc_preview [NC]
    RewriteRule .* - [E=W3TC_PREVIEW:_preview]
    RewriteCond %{REQUEST_METHOD} !=POST
    RewriteCond %{QUERY_STRING} =""
    RewriteCond %{HTTP_COOKIE} !(comment_author|wp\-postpass|w3tc_logged_out|wptouch_switch_toggle) [NC]
    RewriteCond "%{DOCUMENT_ROOT}/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_SSL}%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" -f
    RewriteRule .* "/wp-content/cache/page_enhanced/%{HTTP_HOST}/%{REQUEST_URI}/_index%{ENV:W3TC_SSL}%{ENV:W3TC_PREVIEW}.html%{ENV:W3TC_ENC}" [L]
</IfModule>
# END W3TC Page Cache core
# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>
# END WordPress
AddType text/javascript .js

# BEGIN Expire headers
<IfModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 2500000 seconds"
ExpiresByType image/jpeg "access plus 2500000 seconds"
ExpiresByType image/png "access plus 2500000 seconds"
ExpiresByType image/gif "access plus 2500000 seconds"
ExpiresByType application/x-shockwave-flash "access plus 2500000 seconds"
ExpiresByType text/css "access plus 700000 seconds"
ExpiresByType text/javascript "access plus 700000 seconds"
ExpiresByType application/javascript "access plus 700000 seconds"
ExpiresByType application/x-javascript "access plus 700000 seconds"
ExpiresByType text/html "access plus 600 seconds"
ExpiresByType application/xhtml+xml "access plus 600 seconds"
</IfModule>
# END Expire headers

# BEGIN Cache-Control Headers
<IfModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</IfModule>
# END Cache-Control Headers

<IfModule mod_headers.c>
    Header unset ETag
</IfModule>
<IfModule mod_alias.c>
RedirectMatch 403 /xmlrpc.php
</IfModule>

# pass the default character set
AddDefaultCharset utf-8
# BEGIN Keep-Alive
<ifModule mod_headers.c>
Header set Connection keep-alive
</ifModule>
# END Keep-Alive

#BEGIN GZIP 
<IfModule mod_deflate.c>
<filesMatch "\.(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
#END GZIP

#BEGIN CF ALLOW
Allow from 2400:cb00::/32
Allow from 2606:4700::/32
Allow from 2803:f800::/32
Allow from 2405:b500::/32
Allow from 2405:8100::/32
#END CF ALLOW

As you can see I had to add the keep-alive code and other stuff like gzip- because otherwise GTMetrix would complain about that.

http://gtmetrix.com/reports/cherrykoks.de/4DKTK3Af I guess I can not influence the the both points about cloudflare?

The only thing I’m little bit confused about, is the fact that the mentioned code

 foreach ($this->styles_for_footer as $style_id => $style_src) {
            echo "<link rel='stylesheet' id='" . $style_id . "-css'  href='" . $style_src . "?ver=" . $current_theme_version . "' type='text/css' media='all' />\n";

in the booster plugin causes my strings. Can I change that?

And:

in the Pagespeed guide from tagdiv I read this:

The plugin will move the theme and recommended plugins js and css at the page bottom. If you have other plugins installed you have to modify the Speed Booster plugin file so it will also move those files at end of the page. In the next section you will learn how to accomplish this.
4.2 To get the list of registered css and js add the following code at the end of the functions.php file:
function td_inspect_scripts() {
global $wp_scripts, $wp_styles;
echo ‘registered scripts<br>’;
foreach ($wp_scripts->queue as $handle) {
echo $handle . ‘ | ‘ . $wp_scripts->registered[$handle]->src . ‘<br>’;
}
echo ‘registered styles<br>’;
foreach ($wp_styles->queue as $handle) {
echo $handle . ‘ | ‘ . $wp_styles->registered[$handle]->src . ‘<br>’;
}
}
add_action( ‘wp_print_scripts’, ‘td_inspect_scripts’ );

SpeedBooster plugin ist runnin as you know, do I have to change that as advised?

The sentence with “If you have other plugins installed you have to modify plugin so it will also move those files”

Other plugins means = every plugin I’m using? No problem to add this code to functions.php – just wanna make sure if this is right.

• This reply was modified 12 years by Cherry.
• This reply was modified 12 years by Cherry.

   foreach ($this->styles_for_footer as $style_id => $style_src) {
            echo "<link rel='stylesheet' id='" . $style_id . "-css'  href='" . $style_src . "?ver=" . $current_theme_version . "' type='text/css' media='all' />\n";

I think this one right here in the td-speed-booster.php is causing the strings.

When I deactivate the plugin- I have no strings.

Any resolution to avoid that right here?

@Cherry don’t use this plugin “Async JS and CSS” any more since the team updated the speedbooster plugin to handle those things you don’t need that plugin any more so don’t used it are it going cause you a lot of headaches…

Hi,
first you can’t do anything about the cache validation or anything with fonts loading off of google’s website, or anything loading from jetpack (or adsense, or addthis, or disqus, etc.) — as those elements live on somebody else’s server. Only solution is to remove them or workaround them (e.g., load google fonts on your site or CDN, or load the CSS from your own style sheet — you can google how to do this, as it’s a trick which has been used for couple of years — simply grab the CSS you’re loading from google for the fonts, then put it into your own CSS, then remove the “call” to that CSS from your style.css and/or functions.php).

For the remove query strings I would suggest this:
1) turn off all your plugins
2) make sure you put the remove query code at bottom of your functions.php file and have uploaded to server properly, replacing original file
3) test a post page and see if it’s working – it should work, unless you have conflicting element re-writing your code. Or, you didn’t put the code in right place with something else you’ve added to the functions.php file, or you have a missing or extra closing bracket (bad syntax). There are couple of ways to do this, but again – double check your code/syntax, which is #1 reason something doesn’t work – be careful what you copy/paste FROM … always use a proper plain text editor so it won’t introduce garbage characters.
4) start turning on plugins: pay close attention to any SEO plugin which may try to rewrite the css and js “positions” in the file
5) avoid using plugins which do the same thing – seo plugin with sitemap, and other sitemap plugin; seo plugin which rewrites location of your js and css and the tagdiv speed booster
6) once you find the conflicting plugin, you can sort out what to do for the version removal to work (and don’t have that in functions *and* use a version removal plugin at same time, AND an SEO plugin that rewrites your code AND the tagdiv speedbooster).

This is normal process to “debug” why something doesn’t work.