Search Results for 'pagespeed'

Dear Lucian
Thanks for your response. but it sounds like an auto response sent to everyone with this query. Render blocking Javascripts include

1. contact-form-7/includes/js/jquery.form.min.js (should not be there as it is part of theme package)
2. contact-form-7/includes/js/scripts.js (should not be there as it is part of theme package)
3. http://s0.wp.com/wp-content/js/devicepx-jetpack.js
4. /wp-content/themes/Newspaper/js/td_external.js (should not be there as it is part of theme package)
5. /wp-content/themes/Newspaper/min/site.min.js (should not be there as it is part of theme package)
6. /wp-includes/js/thickbox/thickbox.js
7. /wp-content/plugins/Js_composer/assets/js/js_composer_front.js (should not be there as it is part of theme package)
8. /wp-includes/js/comment-reply.min.js

You might have noticed above that I have in fact added ID’s of blocking styles and Js at the appropriate place in speedbooster plugin but these are still appearing in Pagespeed insights results.

Can you please guide to resolve the matter as suggested solution is assumingly not working

Sure you could hack that with CSS, but it’s still not going to be proportionally correct. And Google will ding you for “resizing” the image vs serving the image “at actual size” in pagespeed insights.

All the plugin does is re-enable the function that wordpress SHOULD have but they disable; which allows a new image to be written to fill the space and crop to fit.

Okay. And ?

The htaccess file does nothing whatsoever related to “render blocking” CSS/JS; that is not its purpose.

The htaccess file gives directives for the server, running “above” the site for caching, expiration, redirects, etc.

Mod_Pagespeed settings won’t do anything unless your server has that.

Obviously your permalink structure for WordPress should be in your file (missing from your example).

You don’t need two sets of expire headers (!).

All of the above is to help with optimization of page loading — nothing to do with HOW the content loads on the page (aside from mod_pagespeed of course).

The only way to optimize for the CSS/JS render blocking is to build custom site without all the bells and whistles and custom load content in groups; and you can optimize some of that with the tagdiv speed booster plugin.

this is my htaccess file

<IfModule mod_deflate.c>
<filesMatch "\.(js|css|html|php)$">
SetOutputFilter DEFLATE
</filesMatch>
</IfModule>
# Pagespeed Module
<IfModule pagespeed_module>
ModPagespeed on
ModPagespeedEnableFilters collapse_whitespace
ModPagespeedEnableFilters remove_comments
ModPagespeedEnableFilters rewrite_images
ModPagespeedEnableFilters insert_dns_prefetch
</IfModule>
# Pagespeed Module
# BEGIN Expire headers
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 5 seconds"
ExpiresByType image/x-icon "access plus 604800 seconds"
ExpiresByType image/jpeg "access plus 604800 seconds"
ExpiresByType image/png "access plus 604800 seconds"
ExpiresByType image/gif "access plus 604800 seconds"
ExpiresByType application/x-shockwave-flash "access plus 604800 seconds"
ExpiresByType text/css "access plus 604800 seconds"
ExpiresByType application/x-font-woff "access plus 604800 seconds"
ExpiresByType text/javascript "access plus 604800 seconds"
ExpiresByType application/javascript "access plus 604800 seconds"
ExpiresByType application/x-javascript "access plus 604800 seconds"
#ExpiresByType text/html "access plus 600 seconds"
#ExpiresByType application/xhtml+xml "access plus 600 seconds"
</ifModule>
# END Expire headers

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


This is a recent development this year with insights; kind of annoying; and why you get higher score with GTmetrix than insights score. With “responsive” design, images are often resized vs serving an entirely new image as traditionally it was actually faster since the server caches images, especially high request images. However, now the insights score is based on a “mobile user loading the content” as part of the “mobile first” movement, and so it seems there is going to need to be some kind of element added to all themes which load images much like the ad banners used to load the past few years prior to Google adding responsive ad units …

basically…
if viewport large = load big image
if viewport small = load thumbnail

Dumb thing is that in many cases, the larger image being loaded on mobile, e.g., iPad actually works better as a “resized” image, since it effectively makes a 640×400 96dpi image into a 340×200 200dpi image for retina displays by having larger pixel density when the large size is reduced on screen — hence why the images look so good on retina mobile devices without having to reload a “retina image…”

So….. stupidly, they are looking at “bandwidth” not “quality”…

Themes are basically going to have to be re-engineered to “by default” always make something like a 50% thumbnail and serve that on mobile devices.

Even stupider requirement because not all mobile devices have same viewport, and so it’s not practical for every page to constantly load 10 different size “featured images” based on viewport — this is what responsive design partially solved.

Upshot — you can live with suffering the warning for now — everybody is getting this — everywhere.

Not sure how TagDiv will address this, or if some super clever person comes up with plugin.

In our case we’re running mod_pagespeed and just updated last Friday (week ago), in hopes it would have solution for this as part of the “resize images” function (well, subset of “rewrite images”), and that isn’t even doing that with Google’s own technology!

(argh)….

Sorry for editorial. I started trying to deal with this April 1, and was super annoyed by the “actuality” of the issue.

Basically a featured image now has to be treated as an “ad module” and load a different size main image based on desktop v mobile. Show me any themes doing that right now. Nope. Annoying.

Hope that helped in some way …. main thing is to ensure the main images you’re uploading are as compressed as possible. I’ve been trying to make sure our larger images are no more than 25kb vs 32kb. If you have an image with 120kb that can be removed, it might be too big to start with.

No simple answer.

Made the change but it doesn’t have any effect. Pagespeed Insight give still the above recommendations.

If the “td-inspect-scripts” in functions.php indicates;

google-font-rest |
td-bootstrap |
td-theme |


Doesn’t it mean that those CSS style are moved to the footer? (the fact that it indicates the ID but after the | no further reference)

I’ve added compression and browser caching to .htaccess I’ve ran another pagespeed test and now it shows “only”;
http://fonts.googleapis.com/…ed:400italic,700italic,400,700?ver=4.6.2
http://<mydomain>.com/…nal/bootstrap/td-bootstrap.css?ver=4.6.2
http://<mydomain>.com/…ent/themes/Newspaper/style.css?ver=4.6.2

So forget my remarks above about JS but how do I get rid of the css’s above the line? Especially that google-font thing is annoying me;-)

Lucian,

The instructions are clear and it works. Thanks for your help.

But still I’m wondering why the following code isn’t moved to the footer. Below a snapshot of what pagespeed insight is saying;
http://ajax.googleapis.com/…s/jquery/1.11.1/jquery.min.js?ver=1.11.1
http://<mydomain>.com/…es/Newspaper/js/td_external.js?ver=4.6.2
http://<mydomain>.com/…s/Newspaper/js/min/site.min.js?ver=4.6.2
http://<mydomain>.com/…cludes/js/comment-reply.min.js?ver=4.1.1

http://fonts.googleapis.com/…ed:400italic,700italic,400,700?ver=4.6.2
http://<mydomain>.com/…nal/bootstrap/td-bootstrap.css?ver=4.6.2
http://<mydomain>.com/…ent/themes/Newspaper/style.css?ver=4.6.2
http://<mydomain>.com/…ssets/css/essb-sidebar.min.css?ver=4.6.2
http://fb.creoworx.com/…lat-retina/easy-social-share-buttons.css


I’ve identified the ID’s added the ID’s to the Speed-Booster “move-to” instruction plugin.

The screenshot after the adaptations in functions.php shows:
registered scripts
admin-bar | /wp-includes/js/admin-bar.min.js
td-external | http://<mydomain>.com/wp-content/themes/Newspaper/js/td_external.js
td-site-min | http://<mydomain>.com/wp-content/themes/Newspaper/js/min/site.min.js
jquery | http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js
registered styles
admin-bar | /wp-includes/css/admin-bar.min.css
easy-social-share-buttons-sidebar |
boxes | http://<mydomain>.com/wp-content/plugins/wordpress-seo/css/adminbar.min.css
google-font-rest |
td-bootstrap |
td-theme |

But Pagespeed Insight is still complaining about it. To me it seems that the JS code isn’t moved even-though I’ve added it to the speed-booster plugin php. “easy-social-share-buttons-sidebar” and “td-bootstrap” are moved but still pagespeed is mentioning it. What can I do?

Hi Marius,

Please look at wefundex.com
Apparently the CSS was not moved to the footer. If you check Google Pagespeed Insight on my domain, you will notice the remarks about a.) moving css to footer and b.) reduce css, js, html code.

Thx!

For those specific folk using mod_pagsepeed

you may start seeing some oddities with Pagespeed Insights, where Google now telling you that stuff like a .js file or .webp file doesn’t have an expiration header over 5 minutes; where basically MPS is “intercepting” the file to serve on page build, and so a few oddities ignore the .htaccess file TTL settings (!).

The fix I discovered yesterday is adding a config line to the master pagespeed.conf file, and looks like this:

ModPagespeedImplicitCacheTtlMs 604800000

Basically this will over-ride the MPS default time to live (TTL) from 5 minutes to whatever time you want, such as a week. Note that the number is in msec not seconds (!). So, typically you need to work out that time using online converter (Google has built in function for that … !).

This was driving us nuts the other day, and this was the solution.

Depending on your server you might also need to actually add the webp MIME type to your apache mime setup file.

Hope that helped somebody!

Guys,

I’m quite new to all of this but I’m trying to improve site speed. And have 2 blocking css sources. (have read all the relevant posts, have followed Chris ‘s advice)

I’m trying to move the easy-social-share-button css files but it doesn’t seem to work. I’ve inserted below code in td-speed-booster.php

$this->move_style_to_footer('easy-social-share-buttons-css');
$this->move_style_to_footer('easy-social-share-buttons-sidebar-css');

As newspaper footer I’m using a new-made footer menu called “basis-footer”. Does that make any difference?

—

On top of above the pagespeed insight tool is suggesting to reduce CSS, JS and HTML code.

Newspaper/style.css (saving 18%)
Newspaper/td_external.js?ver=4.6.2 (saving 10%)
http://<domain&gt; (saving 18%)

Hope you can help me. Thx in advance