Search Results for 'css'

Pagespeed mod test update: settings 0.4

Google Pagespeed 93/100 on main GPS Insight
page: http://ga-ga.com/1262/fiction-area-code-666-part-18-del-arton/
– google adsense – no ads for test
– addthis plugin replace social media buttons with single button ‘on’
– gravatar loaded dynamic over network for author box

todo:
1) load author image locally either with plugin, or add field to functions.php to add new user datafield, then call user meta for the field instead of gravatar code.
2) reduce server response time — typical is 0.32 seconds (320msec) up to 4 seconds; but Google now saying <200msec is the “ideal” — not sure tradeoff on optimizations for everything else; but I did see a post the other day about server tweaks to speed up “first byte” load of WordPress pages to deal with that so called “error.” Solving this would negate the penalize from Google AdSense being on.
3) super annoying “reder blocking” CSS almost “quashed” and ironically the error is from mod_pagespeed trying to fix:

Optimize CSS Delivery of the following:http://ga-ga.com/…ootstrap.css.pagespeed.cf.n0P3fhMJJz.css
http://ga-ga.com/…/A.style.css.pagespeed.cf.JAYrGYtjNo.css

– so in typical GPS fashion, one Google product complains about another Google product which is designed to fix the complaint in first place (ARGH!). This one will take some playing around with the “filters” which is where I got stuck this past weekend.

Hope this is entertaining somebody 🙂

and I forgot to mention here is the code I’m using in my htaccess file for mod_pagespeed testing, in addition to CoreFilters being on from the main .conf file at server level, eventually this would be a <directory> directive in the .conf and not in htaccess for better optimization.

<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters move_css_to_head
ModPagespeedEnableFilters combine_css
ModPagespeedEnableFilters remove_comments
ModPagespeedEnableFilters rewrite_images
ModPagespeedEnableFilters insert_dns_prefetch
</IfModule>

CHANGE to my prior htaccess code for expire headers to solve one javascript file for comments in the core wp code:

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>

I also added these to the end of the htaccess after the cache control headers, to solve the ETag problem and also the damn spammers hitting my ping script.

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

AS EVER: do not make changes to any of your files/settings unless you have backups done.
THis is all experimental at this point; when I have a solid Apache-friendly setup, I will share all the settings in all the files for those interested in this discussion. 🙂

Cheers,
Christopher Simmons
member: PRSA, ASCAP
CEO, Neotrope®
Torrance, CA, USA
(please don’t call me asking for help on anything at this point in time; I will resume my consulting biz once I have my own ducks back in a row, as it were!)

• This reply was modified 12 years by simchris.

OH:
in case anybody is curious about my misadventures in

JANUARY TWEAK FEST
– tagdiv speed booster to enqueue stuff
– google font calls removed from functions.php; style.css mod to change default fonts to:
font-family:Segoe,"Segoe UI","DejaVu Sans","Trebuchet MS",Verdana,sans-serif
– mod_pagespeed corefilters on, layz load images off until page load
– manual mod_pagespeed “switch on” via htaccess to test impact
– optimizations in htaccess (remove “collisions” for typical mod-deflate call, taken care of by mod_pagespeed)
– optimizations in wp-config.php
– optimizations in functions.php

using GTNetrix for the testing right now
(6pm PST 1/16/14)
http://gtmetrix.com/reports/ga-ga.com/MJRvlvaL

TESTING THIS PAGE:
http://ga-ga.com/518/discwatcher-blu-ray-movie-review-prince-of-persia-the-sands-of-time/

mix of images, thumbs, youtube video, addthis social button, aysnc google ad

GTMETRIX ENGINE SCORE with my “0.03 settings” I’m up to tonight
98/PS and 82/YSLOW
Page load time: 2.30s
Total page size: 1.02MB
Total number of requests: 53

I AM NOT USING ANY WP CACHING PLUGIN, NOT USING ANY MINIFICATION PLUGIN; beyond mod_pagespeed and server side functions for these tests.

With the main Google PageSpeed Insights page,
score is: 89/100 desktop and 77/100 mobile

Oddly for current Google main speed testing, turning ads off completely along with turning author box off to remove gravatar pull, also didn’t actually increase initial rank. Nor did turning off the addthis button. More testing underway!

A page without youtube video, with addthis on, google advert off, author box on for live gravatar ( http://ga-ga.com/492/growing-older-in-a-youth-oriented-society/ ) ; pagespeed 91/100 desktop and big jump for mobile to 83/100. YouTube really is a suck for the PS rank.

Some our sites generate 2+ million page views per month and have been online 14 years with 230,000 inbound sites for pagerank. We have been managing our own servers since 1996, and ran a hosting company from 1996-2005. We did Oprah Winfrey’s ecom solution for her “Begin with Love” videos a decade ago. Pretty savvy. We are also PCI-DSS certified, and have weathered serious server attacks so have complex security stuff in place. ‘=)

We do use nginx along with Apache 2.2 – for instance phpmyadmin runs on nginx. 32GB of RAM, dedicated 1GB switch at SoftLayer in Texas. Power to burn. Replaced our 2008 server with 12GB RAM and 8 cores. Wild times compared to the days of, say Cobalt RaQ4 (google it).

Still playing with mod_pagespeed stuff as they have lots of cool things like “inline_google_font_css” (Inlines small CSS files used by fonts.googleapis.com into the HTML document.) which I’ve not yet been able to get working. Defer javasceript is another one built-in which is cool.

Stable version from November, edge version from January, and you can’t mix ’em.

Anyway… I’m trying to find the balance of the traditional hacks
1) mods to the wp-config.php
2) mods to functions.php
3) mods to htaccess (Apache)
4) manual optimization of css file if a rewrite system breaks it
5) upload best practice optimized images to begin with; generate smaller thumbs to start with using built-in compression of WordPress vs plugin for initial files; remove duplicate sizes in media setup to match theme size

6) use mod_pagespeed to manage cache (with memcache, eAccelerator, APC, etc.); rewrite on the fly to cache copies with comments removed, delete white space (instant minification!); combine CSS, combine JS, etc.

6) when all that fails to keep a “92” dump the CSS/JS onto the CDN, keep images local.

This is my mission for January. Once done, I’ll have a better sense of what actually works and what is truly a fool’s errand.

BTW: my friends at GTMetrix have a nice plugin for WordPress for testing/tracking pagespeed adventures (recommended!).

MOre later in the pagespeed “forum” here 🙂

I will probably end up doing some kind of ebook for this whole shenanigans.

Chris

• This reply was modified 12 years by simchris.

We own our own server, so we’re running mod_pagespeed on Plesk[ne Parallels]11/CentOS6.5 in order to solve some things across different types of content sites (not all WordPress). Being able to defer javascript with WP is helpful. Being able to recompress images at server level, combine small PNGs to sprites, etc. mean we don’t have to use Smush.it, EWWWW, etc. for most things. Using the built-in WordPress compression level function to make thumnbails generate at “50” vs “80” also a big help before anything else is done. Idea is trying to run stuff at server level above the PHP stuff where possible vs having plugins being called as each page renders. Nice thing with mod_pagespeed is also inserted image dimensions for “responsive” images for faster page render. E.g., on one of our sites the images are 400×300, but render on page at 70% of the column “width” via CSS — mod_pagespeed will actually rewrite the actual size on page (e.g., 431xNNN) for faster page load. Some really interesting stuff. We run memcache and are storing cached elements in RAM and on the disk, before the page write – so, in theory, this is a level above using a cache “plugin” in some ways (although end result is same probably).

Still testing 🙂 Just got a good working version across all sites as of Tues. night (two days ago). 10 days of “try this, nope. try that, nope. WTf? Oh! What? Hey! Oh. Okay…” … 😉

Seems like you should already be able to minify the .css for the main style sheet if you know all that stuff ! Kind of surprised Super Cache isn’t able to minify.

But sounds like you’re an above average user, so likely you’ll be able to come up with a solution for the CSS minification if you don’t want to do it manually.

I’m suffering an 82/100 desktop at the moment due to addthis, google syndication/adsense, and youtube video on a page. 92+ with that noise off and no cache plugin (!).

We stripped out the Google font calls entirely, and did search/replace in style.css for default fonts. Got rid of the stupid Google insights “error” for their own stupid fonts.

It’s a process. Since we have a shiny new 12 core Xeon server, been trying to get this tweaked to do as much as possible at top. Considering adding Varnish, but another pain in the butt to sort out. Day 16 of the “how much can the server do to fix stuff on the fly” adventure. Would be nice if Google fixed their own crap for Insights to at least give a reasonable speed grade taking into account THEIR problems.

No magic bullet. Funny how some “experts” who claim 100 pagespeed are running sites with plain text, no graphics and one ad on page, and then try to give advice for those running newspaper/magazine sites which by nature are very complex.

I second this emotion. I was actually trying to make the post story titles 48px and was limited to the 40px. I suppose simple fix is just adding css adjust for that at bottom of the main style.css ?

Since we’re not using a child theme, where *is* the best place to insert custom CSS ? I don’t think there is a hook to put custom style inline with the head to override the main style. I tried to over-ride something by putting at bottom of the main style.css, but I guess I need to do mods for each viewport section.

Thanks Christopher. I took a look at mod_pagespeed, but it doesnt look like it could do anything for me at this point. I’m already on a VPS that runs Plesk 11 with nginx as a reverse proxy. I’m letting nginx handle all php scripts and serve static and dynamic content. Gzip compression is enabled and i enabled browser caching through nginx with the expiration set to two weeks. I’m running WP Super Cache as well to create pre cached pages and i use EWWWW Image Optimizer to optimize all images. I also optimazed all theme and plugin images with that plugin. You might want to look it up, imo it really is a better plugin than smush.it and so. I use the simple minify plugin to minify all javascripts and i my pagespeed currently toggles between 85 en 92 for desktop, depending on my server response time and between 70 and 80 for mobile. The only red warning i still get is to defer javascript and css (moste google fonts, and 3 theme css files: bootstrap, style.css and child theme style.css) to below the fold, but i have no experience on how to do that. Im really pleased with the pagespeed right now, but more tips (besides using a CDN) are welcome!

Thanks for you responce anyway 🙂

Note to all, we found it’s better to manually minify the main style.css file each update.

HERE IS HOW TO:

The easy way to minify your main style.css file, is to
1) in your theme folder, make a copy of the style.css file (rename style-bak.css or whatever)
2) take the style.css file and open in a text editor (NOT a word processor), like Notepad or TextPad on Windows, or similar.
3) copy and paste all the text from the file into a minifcation online tool like one of these:
– http://refresh-sf.com/yui/
– http://cssminifier.com/
4) copy the “minified” output into a new style.css file
5) upload via FTP to over-write the style.css file in your theme root

Now when you run PageSpeed Insights it won’t bug you anymore. I do this and works just fine.

r1kay
to clarify, mod_pagespeed is not a WordPress plugin, but is used at the server level and is being used by many “speed oriented” web hosting providers now, including many that specialize in WP hosting specifically (and larger folk like GoDaddy, etc.).

The easy way to minify your main style.css file, is to
1) in your theme folder, make a copy of the style.css file (rename style-bak.css or whatever)
2) take the style.css file and open in a text editor (NOT a word processor), like Notepad or TextPad on Windows, or similar.
3) copy and paste all the text from the file into a minifcation online tool like one of these:
– http://refresh-sf.com/yui/
– http://cssminifier.com/
4) copy the “minified” output into a new style.css file
5) upload via FTP to over-write the style.css file in your theme root

Now when you run PageSpeed Insights it won’t bug you anymore. I do this and works just fine.

If none of that is remotely possible for you to do, then don’t stress over it. You only gain maybe a point for doing this, along with a couple of other things. Image optimization is far more important, and limiting use of plugins which “dial out” from your site to load things on the page beyond your content (social media “counters” for instance – plain buttons load faster).

You likely haven’t seen mention of mod_pagespeed as you have not been looking through the “pinned” topic at top of forum on “Pagespeed” issues.

Note when minifying the css file, it will save 20% of the space, but it doesn’t speed anything up by 20% or improve rating by 20%. If it saves more than 20kb then it’s worth it. If it saves less than 20kb may not be worth the trouble.

ALSO: be aware each time you update theme you will need to re-compress the style sheet using one of the tools above.

Hope that helped.

And how about css? Pagespeed said that i could save 20% by minifying style.css, but no minify plugin will minify the themes css file. Is the tagDiv Speed Booster plugin included in the version 2.2? And i never seen anyone mention mod_pagespeed plugin on this forum, what does it so?

Hello,

someone use W3 Total Cache, Minify option?

I am trying to optimize my site using the Minify option, but is not about simple. Any option break the layout, so I trying to use “Manual” minify, and add what “js” and “css” minify and combine.

Someone who use this method, can tell me how files optimize?

Thanks!

“Suggestion for adding if single in frond of the ads code? It prevents ads from showing up on category pages, the homepage and other pages”

The advertisement only shows up on the homepage for me and I hide it using CSS.

“Is it possible to add author info and tags to this function? Because all things in the footer like tags, source and author info will show beneath the sharing buttons and comment box.”

No the author info and tags will show above the comment box and under the content.

Hi, Radu!

I’m just glad you figured out a way to do the async ads (remember my post way back in the “coding” category). That is one tricky beast!

By the way … one way to make a quick and easy “web safe fonts” methodology for folks would be to change the default fonts in your main style.css to something like this:

font-family: Segoe, "Segoe UI", "DejaVu Sans", "Trebuchet MS", Verdana, sans-serif

font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif

and then by default folks could simply leave fonts as “default” in the theme customizer; -or- switch on the Google fonts if they needed them.

This would be a super simple way for you to answer everybody’s thing about fallback to web-safe fonts without having to recode.

Just use the above in your style vs the Google fonts, and then let people turn “on” the Google fonts to match your demo.

OR: you could provide an alt-stlye.css using above replacement, and then tell folks in docs to rename to style.css to use web safe fonts.

Just an idea 🙂 (I was playing around with that).

Of course, this doesn’t solve the load of the fonts in the functions.php file by default, but a savvy person could strip that out if they knew they only wanted to use web fonts.

I could post a how-to on this ‘hack’ but I’m going to presume at some point it would be better to have the Google fonts be optional “all off” and “don’t load in header the pulls to Google CDN” vs doing hacks.

Thinking out loud. 🙂

Hi Marius,

I tested a block in the visual composer in which you can add text. In this block I added a blockquote. The text was huge and blue. I tried to change it with in the style.css as you suggested.
It didn’t work. Tested it in 2 browsers as I figured it maybe could be a browser caching issue.

So it’s not about the category, I don’t use that.

Maybe you have a another good suggestion? Thanks!