Search Results for 'pagespeed'

Google got really picky about the render blocking stuff on mobile, so by default it *is* about 20 points lower. That is “normal” unless you do some major hacking to WP.

Once you view my thread and do all you can, the last steps would be a bit complex for average user, which requires

a) unhooking loading Google fonts from the theme, and capturing the CSS from Google and putting that in your style.css file; or for fastest speed replace Google fonts with “web safe” font stack (requires unhooking Google fonts in theme main includes/function file AND search/replace main style.css to optimize fonts used by choosing web-safe font stacks)

b) un-enqueuing the style.css and loading in footer.php; then using criticalCSS generator to put above the fold CSS “inline” in the header.php file.

c) using wp-booster to move all JS to footer

What is “possible” ?

Well, the project I’m working on right now I have

Mobile = 98/100
Desktop = 99/100
UX = 100/100

This is without a caching plugin, using mod_pagespeed, with https, and with photo and user photo (loaded locally, not off gravatar.com)

For those who want to ‘speed tune’ for fastest page load time, separate from any pagespeed insights score, removing Google Fonts is a must ….

————-
I love OpenSans …

however for our new project (not using this theme), we actually chose NOT to use any Google fonts for page speed, not “rating” but actual page load time.

I’ve been tuning one project down from 1.9 sec with default theme, to 1.1 seconds (so far), with image, with https, with mod_pagespeed, but not yet using caching plugin …

for this project I’m using a web safe font stack like so in place of (sigh) Open Sans:

font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;

for the “alt” font, using this stack
'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;

I’m “getting used to it …” 🙂

For those interested, nice roundup of web safe “font stacks” here:
http://www.cssfontstack.com/

I love OpenSans …

however for our new project (not using this theme), we actually chose NOT to use any Google fonts for page speed, not “rating” but actual page load time.

I’ve been tuning one project down from 1.9 sec with default theme, to 1.1 seconds (so far), with image, with https, with mod_pagespeed, but not yet using caching plugin …

for this project I’m using a web safe font stack like so in place of (sigh) Open Sans:

font-family: 'Segoe UI', Frutiger, 'Frutiger Linotype', 'Dejavu Sans', 'Helvetica Neue', Arial, sans-serif;

for the “alt” font, using this stack
'Franklin Gothic Medium', 'Franklin Gothic', 'ITC Franklin Gothic', Arial, sans-serif;

I’m “getting used to it …” 🙂

For those interested, nice roundup of web safe “font stacks” here:
http://www.cssfontstack.com/

Welll…..

a) if you use the speed booster framework, you would put the code into the Speed Booster plugin settings per the docs for that and the example from Lucien; *and* likely any custom css into your style.css and not in theme panel; and ideally NOT use child theme, to mimize any flash of unstyled text

b) if you’re doing custom hacking of your site, you would put any functions for de/enqueue into the functions.php where all such WordPress “actions” go; then you’d manually put your style.css link in footer. The WordPress codex has good tutorial on how “enqueuing” (adding to queue) works in WP.

c) You would then use the critical CSS generator found in my thread, to put the above the fold CSS “inline” in the header.php file. This loads only the needed CSS for above the fold to load with page — no render blocking of CSS — and then the rest loads with remainder of page. — Trial and error on this stuff.

These efforts are toward solving the pesky lower score on Google PageSpeed Insights for mobile “above the fold render blocking…”

This is a bit “advanced” stuff most folks won’t tackle. But if you’ve got everything ELSE as optimized as possible, this is kind of the LAST thing to do.

And frankly, if you’re using the AMP system for mobile, for a lot of folks, this will be a non issue as Google products will be loading the AMP version vs the responsive mobile version anyway.

So, one could argue if you have a desktop score of 92 or higher, and you’re running “AMP” on your site for posts, you likely don’t need to stress as much as before on the mobile score on Google’s direct testing speed tool. 🙂

( rant over . . . ) 🙂

• This reply was modified 10 years by simchris.

Hi

The defer attribute tell the browser to load a specific file only after the entire document is loaded. Because of this you can’t add this attribute to the file which load theme’s js because in some situations there appear conflicts. There is a specific order in which scripts must be executed on the page and by adding the defer attribute this order change. When you exclude defer attribute main theme’s js, from tagdiv_theme.js file it’s executed before others js scripts from the theme, that’s why the page is loaded fine. The page would be loaded fine using defer attribute if this js: http://screencast.com/t/ZAbBZkZEOe does not depend by main theme’s js. To achieve that are required lots of customizations and I can’t provide a solution now.
You can red more about this attribute actions here: https://varvy.com/pagespeed/defer-loading-javascript.html

Keep in mind that improving site’s page speed it’s a task which require a bit of coding and some knowledge in this regard. We can only guide you trough the required steps and we always recommend to follow the steps indicated in our documentation. Any other implementation for page speed involve custom work and this falls beyond the support can offer you. If you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you.

Thanks for the message!

Just to share some experiences improving site speed for the many who post here to discuss…

What I’ve also done (My site is an independent ‘hyperlocal’ news site – slightly bigger than hyperlocal really) which I think is good practice given FB Instant Articles and AMP (Already on Apple News for almost a year now) is almost ‘forget the desktop’ exists.

Due to 75%+ mobile visitors it seems good practice (if a ‘live’ news site with say 100+ articles per week) to get the site as fast and safe as possible – this may help others

– I’ve removed all home page blocks except ‘ticker’ – a lightweight grid with no slider- and a sidebar
– Removed all plugins or deactivated ones no required all the time
– Implemented Chris S .htaccess and functions.php tips exactly as described – inc image resizing
– Paid Cloudflare with page rules to remove wp-admin etc- following TagDiv recommendation settings except RocketLoader ON – Mirage in ON
– Removed my subscriber pop-up and won’t use one – promote subscriptions via another route – FB ads – Twitter ads perhaps
– Removed SumoMe and anything that fetches CSS externally
– I do run UberMenu on main site and ShiftNav on mobile (for a better user experience) – But run NO mega menu or dropdowns
– Currently RocketLoader (Cloudflare) runs and doesn’t break anything
– Only added Google Analytics via YoastSEO not on Theme Panel box – it’s there and working
– ADDED a user text box to point people to how to navigate the site – believe it or not saying ‘Press load more or click coloured category labels or main menu’ actually gets visitors to do that!

Results –

Before – GTMetrix – PageSpeed B YSlow C Page size (Homepage) 3.2MB Requests – 187 – Load time – about 7-10 secs
Pingdom 5-7 seconds

After – Page Speed A (96%) YSlow B (82%) Page size (Homepage) 1.2MB Requests 96 – Load time – 2 secs
Pingdom 700ms-1.3 secs

The theme still looks great on desktop but it’s not worth getting caught up in the aesthetics if the visitors aren’t looking at the pretty views – it looks brilliant on mobile and that’s what matters.

westbridgfordwire.com

Hm. Prefer to do this as a function, by de-enqueuing the hook, and I think I “might” have that sorted. And of course we don’t want anything minified by a plugin as we do that properly for static files for both js and css ahead of time …

Good thought, though, THANKS — appreciate the feedback! 🙂

We will be using WP Super Cache for this particular in house project.

I think I might have it sorted by doing a de-enqueue function, de-register, in functions.php — so just need to test that.

Have 99% on GTMetrix and down to 1.1 sec with photo and https but no caching plugin! — but only 92 desktop and 78 mobile on Google’s PageSpeed Insights test directly, due to the pesky render blocking crap. If I can get that damn last css file to footer, I’ll be in the home stretch.

Trying really hard to get WordPress to be as fast as our static main part of site where we have 100/100 out of all 3 tests with Google PSI. I’ll get there!! 🙂

Hi

This code add a new attribute for the files with .js extension: http://screencast.com/t/nGNIekHRJAXZ When post template 8 or homepage post block from Visual Composer are used on the page there is an additional js loaded on the page which is not loaded from main js file of the theme. The above code does not apply the defer attribute for all js code and this seems to cause conflicts.
You can read more about how this attribute works at this url: https://developers.google.com/speed/pagespeed/service/DeferJavaScript#description

Unfortunately I can’t provide a solution now as are needed some researches in order to identify how this code will work properly with the theme. If you still need guidance on this or you’re not aware of the steps you need to take in this regard please consider hiring a developer or a freelancer to do this for you.

Thanks for the message!

a) on “most” servers, gzip/deflate must be “on” at server level – you have no access to that

b) on “some” servers you need to add text to the .htaccess file to enable (sound like your host is saying ‘no’ ?)

info/how to
https://varvy.com/pagespeed/enable-compression.html

You may find my tutorial info useful
https://forum.tagdiv.com/topic/tutorial-chriss-custom-optimizations-for-functions-php-etc/

(( I don’t work here … ))

gzip/deflate should be on for all sites on any hosting plan — if they don’t support it, get another host.

Basically gzip/deflate helps compress the content sent by server to web browser to make the packet smaller, and this alone is good for 20 points on pagespeed tests.

Heh. They gave me a little “red/gold crown” for helping out 😉

I usually pop in here for a little bit while waking up, or while waiting for something to FTP to server, and got sick of watching the “progress window” .. so little bit of a time waster / karma points / or whatever. (Right now I’m uploading bunch of mods to the CMS I’m working on for our corporate site trying to integrate a YOURLS shortcode system into ‘printing’ the code into the social share buttons “on template” …

I disappear for long periods, but since I have multiple sites, and have been doing webdev for 21 years and WordPress for 11-12 years now, I’m usually at the “front” of the line in delving into new stuff like mod_pagespeed, http/2, AMP, or whatever. I guess I was also one of the folks who helped make the “shim” happen for disabling visual composer that Radu did, since one horrible series of VC versions crashed our server. Been around here with them longer than most, I guess.

Anyway – sometimes I have a “highly experienced” comment based on having to deal with a problem for “years” that many here haven’t had to suffer. Of course, some people get mad when I disagree with their comments (whining?) — but not too many of those, thankfully.

So, anyway — gingerbread cookies accepted in my virtual tip jar!

Back to the salt mine!

• This reply was modified 10 years by simchris.
• This reply was modified 10 years by simchris.
• This reply was modified 10 years by simchris.

Make sure your thumbnails are all as compressed as possible; change default compression level in wp-config.php or use a plugin. All the little images on home page should be very compressed as they are just visual placeholders. Make sure things like logo is very compressed also (e.g., if it’s only 4 colors, use .png vs .jpg, etc.).

Make sure you have gzip/deflate running as this compresses page for web browser automatically.

ADVANCED:

For advanced uses, consider server side compression like mod_pagespeed, or a caching plugin that might also remove blank spaces, comments, to reduce the file size of the HTML. For super advanced use, consider web host that runs both http/2 and mod_pagespeed (MPS can remove all comments, double spaces, tabs/indents, comments, and other elements that pad the page on the fly, then cache it via server side caching like opcache).

Yah. I wasted the entire month of Jan. 2014 messing with CDN stuff before realizing that since we had dedicated server it only helped us with folks outside the US, which were not critical to our business anyway, and so dumped the CDN in favor of local hosting, with caching, mod_pagespeed, etc.

The CORS stuff is a pain. Additionally had to add stuff like “addtype” handlers to the htaccess as our system auto generates webp format images for Chrome and server didn’t know what that was (!). Augh.

Feel your pain. Sorry no better help from me — been awhile. So, not sure I’ve helped at all beyond moral support!

I analyzed your site using GTMetrix.com
Pagespeed – F (29%) and YSlow – C (76%)

YSlow, is doing fine, however, you can increase it with some more optimization.
The major issue is pagespeed, and it is pointing out to images (Try manually optimizing the images through photoshop), browser caching (Look at this), and GZip compression (This will help you).
.

Why not view the theme docs on how to speed up your site, and my long winded optimization thread?

See > theme docs (link right side page) > tutorials/DIY and “best of forum”

Pagespeed score of ’98’ is the best you can get with WordPress with any page containing images, and over 100kb total, by the way. Anything over 91 is very very good for desktop.

Anything over 88 mobile and 90 desktop is “in the zone.” Anything below 85 for both needs work.