Search Results for 'pagespeed'

Still cracks me up that response time of 0.22 seconds is “slow” …. sheesh.

So, one aspect of “responsive” design (good and bad), is that it’s better to load a 25kb image once than load the 25kb image once and the 12kb image together and switch those out on viewport. Better to load the 25kb image ONCE, then resize to fit the aspect you’re looking at when you look at it.

I agree it’s best to load the image only once. All I’m saying (and is what I believe Google Pagespeed is saying) is that we should request the version of the image that is best fit to the screen at it’s current orientation, and then if the device changes the viewport, the image will be resized locally, which is essentially what newspaper does now at a certain level.

For example, if I load my homepage and resize the browser window down to 767 pixels, I see this image which is only 326px wide being displayed at over 700 px wide WITHOUT reloading the image, as seen in the screenshot below, second image down:

Does that make sense? If someone really was bothered by the pixelated images, they’d probably realize that they could simply re-orient their device to how they loaded the page or simply reload the page. It seems terribly inefficient to me to have every single person download a high-resolution image on the off-chance that they will flip from portrait to landscape while viewing the page…

The other benefit of using the larger image is for retina/HD displays on a mobile device which have higher pixel count than desktop; so again, if you do the pixel math, a 700×500 image on a screen with double the pixel count, loaded half size, would still provide the same number of pixels when shown half size — without having to load alternate retina/HD version of image or use “image stacks.”

I agree, it does look nice on “Retina” phone screens, which is why I disabled my retina plugin on mobile devices. I think it would simply be a better solution to have Newspaper serve a 300 px wide image, and then allow the retina plugin to substitute the @2x version, rather than serving everyone the hi-res image.

Doesn’t that seem more efficient?

Well, basically it is serving up an image at smaller size and so caches the “scaled” size as part of the “rewrite” images module.

Sometimes it doesn’t work if the optimized image would be larger in size than the original, which is funny since I usually optimize stuff very much in the extreme.

But:

ModPagespeedEnableFilters resize_images

This attempts to resize any image that is larger than the size called for by the width= and height= attributes on the tag or an inline style= attribute. The original image is replaced only if the image file is smaller after resizing. Image resizing is lossy by nature, regardless of image file format.

Note: It also strips color profiles and metadata even if strip_image_color_profile and strip_image_meta_data are disabled.

Note: If both resize_images and resize_rendered_image_dimensions are enabled then resize_rendered_image_dimensions takes precedence.

Partnered with:

ModPagespeedEnableFilters insert_image_dimensions

This flag inserts width= and height= attributes into tags that lack them and sets them to the image’s width and height. Note that this can cause image stretching or shrinking if CSS rules specify only one image dimension (see Risks below).

So, one of those things to play with for super advanced users, like removing width=500 height=375 and simply using style=”width:90%;height:auto” can do some interesting things.

Eventually this stuff will be built in to everything, since rewrites on the fly solve numerous responsive design issues.

AND: we just now got mod_spdy and mod_pagespeed working together!!!! WOOHOOOOO!!! Doom will ensue! (kidding)

This is actually one of the cool things about mod_pagespeed … if you have an image loading over and over at 80% size, it will cache the image at THAT SIZE and serve up the smaller image to people who keep requesting it vs loading the larger image and scaling it.

So let’s say an iPhone is requesting that 745 pixel wide image, with mod_pagespeed, it will know that the iPhone can only display a 640 px wide image and then serve it a new thumbnail?

That’s pretty cool if true. Thanks!

That was a great answer! It makes my 3GB SSD server with 2 cores look like a slowpoke.

I think Google thinks anything above a 70 score is pretty good, and they are just nitpicking when you get up in the 90’s. Sounds like you have a pretty intense job with that server – good luck!

@tcdraper
the general reason themes don’t make multiple thumbnails for the sizes you’re talking about, is that when an iPad changes from portrait to landscape it’s not technically reloading the page, just refreshing the viewport and the cached stylesheet is applied; otherwise it would be *worse* for mobile since the images would need to actually be reloaded — ever carry an iPad across the room in unlock mode and have it flip back and forth from portrait to landscape; well, you’d be reloading the images in different sizes more than once.

So, one aspect of “responsive” design (good and bad), is that it’s better to load a 25kb image once than load the 25kb image once and the 12kb image together and switch those out on viewport. Better to load the 25kb image ONCE, then resize to fit the aspect you’re looking at when you look at it.

The other benefit of using the larger image is for retina/HD displays on a mobile device which have higher pixel count than desktop; so again, if you do the pixel math, a 700×500 image on a screen with double the pixel count, loaded half size, would still provide the same number of pixels when shown half size — without having to load alternate retina/HD version of image or use “image stacks.”

This is actually one of the cool things about mod_pagespeed … if you have an image loading over and over at 80% size, it will cache the image at THAT SIZE and serve up the smaller image to people who keep requesting it vs loading the larger image and scaling it.

That was mostly anecdotal … but just some techie crap in case you were curious 🙂

@tcdraper
we’re running PHP Version5.4.22; apache, centos 6x, plesk/parallels, all the built in modern accelerators, apc/memcache, mod_pagespeed, and just last night got “mod_spdy” working on Plesk, which was fun since my data folk had never done it before and was team effort.

We’re right now (literally) working to connect mod_pagespeed to SPDY properly so we can have mod_pagespeed load and compress/cache images and other https elements when the pages are loaded 100% https.

Not using Amazon S3 CDN at moment as I can’t mentally deal with the sharding setup when all of us working on this project have never done this before and there is *NOT* a simple “how to” book on this!

I think we were getting something like 330 msec or something, and Google thinks initial response should be under 200-300. (Sigh.) We have a 300kb static page with 10 elements loading dynamically via server side includes in 1.3 seconds total, and pagespeed of 96 without CDN or caching application, and that’s not good enough? BAH!

So, far the https optimizations built into server seem to work fine for desktop, lose a point, page load goes from 1.4 to 1.5 seconds total. So, will be testing that with mod_spdy active, and then with mod_spdy PLUS mod_pagespeed to see if we can enhance the times overall.

ANyway… kind of rambling there. No real advice for you. We have a dedicated multicore XEON server, 32GB RAM, with its own gigabit switch so we don’t have to deal with a lot of the shenanigans of VPS and shared hosting. But, $650/mo. isn’t exactly cheap, either.

That wasn’t a very good answer, was it ? 🙂

• This reply was modified 11 years by simchris.

@Christopher – What php are you running? I’m using suphp and it is incompatible with eaccelerator. Do you think that I would get much of an improvement if I switched to DSO? Liquidweb is willing to do this for me, and they said they could revert back if there’s any problems.

I’m wondering if you think I would gain much in terms of server response time, or if I should just leave well enough alone. My server response time is usually around 500 ms, which Google seems to not like…

@Shashank

I don’t think Google wants us to have awful image quality on our sites. I think they just want images to be as small as they can be at their current quality and sized correctly for the display device.

For example, the theme is serving 700 pixel wide images on smartphones where the viewport is 320 css pixels, which Google doesn’t like.

The other thing they don’t like is having wasted bytes in an image. I am compressing all of my images at JPEG quality 90 in pixelmator. I then run them through JPEGOptim, jpegtran, and jpegrescan at a quality of 90 and the file size drops by about half. Then I upload them and Google tells me they can still be a few KB smaller… I don’t care about that so much as I care about serving the wrong dimension of thumbnails to visitors.

I wish the theme made different thumbnails for iPad landscape, iPad portrait, and mobile phone so that we wouldn’t be serving oversized images, which Google hates, take a look at the image below:

When I had the retina plugin enabled for mobiles, it was trying to serve a 1490×966 image on the mobile phone. I had to disable that plugin for mobiles, because newspaper is delivering an image larger than a standard 2x retina image for all mobile phones regardless of whether or not they have the pixels to display the entire image.

I guess I’ll focus on the other things I can do something about, but I wish this would be addressed in a theme update if it’s possible with the bootstrap framework…

I try to add some cache to my site. Using QUICK CACHE or WP FASTEST CACHE i get 42/100 on mobile and 50/100 on desktop on both, and without cache plugin too on google page speed test.

adding

add_filter( ‘jpeg_quality’, create_function( ”, ‘return 50;’ ) );

in functions.php as recommended i get.

Parse error: syntax error, unexpected T_LNUMBER in /home/site/public_html/wp-content/themes/Newspaper/functions.php on line 1553

So I installed W3 total cache.

Following the video from anterior posts https://www.youtube.com/watch?v=u0G6pk2mX4M when i enable minify with newspaper 4.4 i get blanc page. Hard times today… with only page cache from W3 I still have 49 / 100 … pff.

I disabled W3, installed speed-booster-pack.2.6 adn disabled td-speed-booster. Like in the video, when I activate Load CSS asincronius and I load site… guess what. Problems. Is loading with tabs list or something, can’t explain, and then loads. Issue anyway… will try more settings.

• This reply was modified 11 years by cstyn.
• This reply was modified 11 years by cstyn.

We don’t use jetpack as it’s a major slowdown to the site, waiting for all that stuff to load from automattic’s servers. But some cool stuff. Mainly it’s a way of adding features from wordpress.com to self hosted sites. But watch the warnings from PageSpeed Insights pile up! 😉

COPYING THIS FROM OTHER THREAD FOR THOSE WHO HAVE ASKED ME COUPLE OF TIMES ABOUT REMOVING GOOGLE FONTS FROM FUNCTIONS.php … ref: Newspaper 4.2/4.2.2 — not tested with 4.3, but presumably same idea:

————copied from other thread ————–

Hi,
okay I think in 4.2 here is what my edited functions.php looks like
lines 38 -> 59

/*  ----------------------------------------------------------------------------
    CSS - front end
 */

function td_load_css() {

    //google fonts
    if ((defined('TD_DEPLOY_MODE') and (TD_DEPLOY_MODE == 'demo' /*or TD_DEPLOY_MODE == 'dev' */)) or defined('TD_SPEED_BOOSTER')) { //on demo and dev we load only the latin fonts
        //modify this collection if you want to optimize the fonts loaded
        //collection url -> : http://www.google.com/fonts#ReviewPlace:refine/Collection:PT+Sans:400,700,400italic|Ubuntu:400,400italic|Open+Sans:400italic,400|Oswald:400,700|Roboto+Condensed:400italic,700italic,400,700
        //wp_enqueue_style('google-font-rest', td_global::$http_or_https . '://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'); //used on menus/small text
    }

    //add the google style link for fonts used by user
    $td_fonts_css_files = td_util::get_option('td_fonts_css_files');
    if(!empty($td_fonts_css_files)) {
        wp_enqueue_style('google-fonts-style', td_global::$http_or_https . $td_fonts_css_files);
    }

    //bootstrap - custom built - it was generated via compilation of /external/bootstrap-master/less/bootstrap.less

You will note I didn’t remove 44-49, I commented it out with //

I did not remove the code which is there *if* somebody selects fonts from the admin panel, which I think is what you were doing; and then it would crash.

And I DELETED this

        $td_user_fonts_list = array();
        $td_user_fonts_db = td_util::get_option('td_fonts');
        if(!empty($td_user_fonts_db)) {
            foreach($td_user_fonts_db as $td_font_setting_key => $td_font_setting_val) {
                if(!empty($td_font_setting_val) and !empty($td_font_setting_val['font_family'])) {
                    $td_user_fonts_list[] = $td_font_setting_val['font_family'];
                }
            }
        }

        if(!in_array('g_438', $td_user_fonts_list)) {//'g_438', //Open Sans
            wp_enqueue_style('google-font-opensans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Open+Sans:300,400,600,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on menus/small text
        }

        if(!in_array('g_617', $td_user_fonts_list)) {//'g_617', //Ubuntu
            wp_enqueue_style('google-font-ubuntu', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Ubuntu:300,400,500,700,300italic,400italic,500italic,700italic&subset=latin,cyrillic-ext,greek-ext,greek,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_453', $td_user_fonts_list)) {//'g_453', //PT Sans
            wp_enqueue_style('google-font-pt-sans', td_global::$http_or_https . '://fonts.googleapis.com/css?family=PT+Sans:400,700,400italic&subset=latin,cyrillic-ext,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_445', $td_user_fonts_list)) {//'g_445', //Oswald
            wp_enqueue_style('google-font-oswald', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Oswald:400,300,700&subset=latin,latin-ext'); //used on content
        }

        if(!in_array('g_521', $td_user_fonts_list)) {//'g_521', //Roboto
            wp_enqueue_style('google-roboto-cond', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Roboto+Condensed:300italic,400italic,700italic,400,300,700&subset=latin,cyrillic-ext,greek-ext,greek,vietnamese,latin-ext,cyrillic'); //used on content
        }

        if(!in_array('g_639', $td_user_fonts_list)) {//'g_639', //Vollkorn
            wp_enqueue_style('google-vollkorn', td_global::$http_or_https . '://fonts.googleapis.com/css?family=Vollkorn:400italic,700italic,400,700'); //used on quoates classic
        }
    }

Erm if you followed the thread (https://forum.tagdiv.com/topic/pagespeed/), you should have 90+ speed! Try it first and if it doesn’t work, the “awesome” people in the forum will help you out 😉

Hi,

Speeding up a website isn’t easy. Bunch of folks who are using this theme has got 90+ on both Mobile and Desktop after a lot of configuration. Read through this whole thread and you’ll definitely be able to get above 90: https://forum.tagdiv.com/topic/pagespeed/

Hope this helps!

TagDiv team, it would be great for new buyers if you could make a good documentation/video based on that thread’s tips.

Thanks!

@tcdraper the the image optimization sucks! We can not ruin the quality of images at all. After such optimization (manual + smush it + image quality 50 in wordpress) the warning still comes. And I’m also facing issues with render blocking css!

Sorry, I missed the Gravatar info that appeared before posting. I’m going to look into a way to get a local file instead of the “blank” gravatars from the external site.

Also, Shashank’s site is down to a 66 mobile/90 desktop for me on this page:
http://www.styzic.com/iphone-6-plus-blender-video/872/

It seems like Newspaper is getting hammered a lot more lately on Pagespeed for serving the 700px wide featured image to mobile phones… Any idea if we can get a custom thumbnail for mobile that’s only 300 px wide? I’m sure that would take a lot of work since the mobile site is anything from 240 px all the way up to 767 px…

You can use the garavatar caching solutions i mentioned, unless using disqus

You can optimize delivery of google fonts by loading css from your style sheet

Check site with gtmetrix to see what server elements you have not addressed, since you should have at least. 80 if you have setup server side compression and htaccess elements, etc.

Tagdiv speedbooster plugin helps with the js,css stuff.

I’ve got a few questions on Pagespeed that hopefully some of you can answer.

1 – I’m trying to figure out the best way to improve my server response time. It varies anywhere from 0.4 seconds to 0.8 seconds. I upgraded to a Liquidweb SSD VPS with 3 GB of RAM hoping that would take care of it, but it didn’t – it made it through a heavy day of 30,000+ pageviews, but I still can’t seem to get the response time down. I’ve disabled plugins, but to no avail.

2 – I’m running W3 Total Cache along with Tagdiv speedbooster, and I am still getting the render-blocking CSS and Javascript errors. I’m assuming I can edit the plugin file to get rid of these, correct?

3 – I have a pagespeed score of 61 on one of my posts and I believe it’s related to all of the calls to fetch Gravatars for comments. On a page with few comments, the pagespeed score increases. Here’s a screenshot:

Lots of comments (Pagespeed Link):

Few comments (Pagespeed Link):

I would think that the only difference here is all of the external calls to Gravatar. It seems like there has to be a better way to display 200 blank images rather than calling 200 separate URL’s to obtain the same image – Also, Google is complaining that they aren’t “compressed” enough…

Thanks for any help you can offer! I’m hoping to get up to at least upper 70’s or 80 on mobile. I have Adsense, Google Analytics, and Piwik Analytics going so I know that will prevent me from getting too high.

Thanks, Lucian. I had someone else from my webhost look at it since it was odd that it was working on my test site but not the main site.

Turns out that my URL was OralAnswers.com on WordPress but it was looking for oralanswers.com.

Since it’s case sensitive, changing everything to all lowercase solved the issue.

Thanks for your help!

I feel like I’ve got everything implemented now, just have to work on increase my pagespeed score from 60 on mobile :-/

And anecdotal, if you don’t want to “advertise” the version of Yoast, or Revolution Slider, etc., you’re using, you might look into some solutions like mod_pagespeed (if your host supports it), which allow removal of *all* comments in the page source for pseudo-minification. Some “minification” plugins do this too, but use with caution.