Pagespeed-Penalty for Using Srcset

Why is Google PageSpeed complaining about Retina images?

I to have found Google PageSpeed to be a little flaky at the best of times. I'll test something that comes out 88/100 and then 5 minutes later it's 95/100 and nothing changed.

I think the best practice when it comes to Google PageSpeed is make sure you:

1) Have a perfectly engineered header which touches on all the little things Google likes to see.

<!DOCTYPE html>
<!--[if lt IE 7 ]><html class="ie ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]><html class="ie ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]><html class="ie ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--><html lang="en"> <!--<![endif]-->
<head>
    <meta charset="utf-8">
    <title></title>
    <meta name="description" content="" />
    <meta name="keywords" content="" />
    <meta name="author" content="" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- Favicons -->
    <link rel="shortcut icon" href="/img/icons/favicon.ico" type="image/x-icon">
    <link rel="icon" href="/img/icons/favicon.ico" type="image/x-icon">

    <!-- App Screen / Icons -->
    <!-- Specifying a Webpage Icon for Web Clip
        Ref: https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/ConfiguringWebApplications/ConfiguringWebApplications.html -->
    <link rel="apple-touch-icon" href="/img/icons/sptouch-icon-iphone.png">
    <link rel="apple-touch-icon" sizes="76x76" href="/img/icons/touch-icon-ipad.png">
    <link rel="apple-touch-icon" sizes="120x120" href="/img/icons/touch-icon-iphone-retina.png">
    <link rel="apple-touch-icon" sizes="152x152" href="/img/icons/touch-icon-ipad-retina.png">

    <!-- iOS web-app metas : hides Safari UI Components and Changes Status Bar Appearance -->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">

    <!-- Startup image for web apps -->
    <link rel="apple-touch-startup-image" href="/img/icons/ipad-landscape.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape)">
    <link rel="apple-touch-startup-image" href="/img/icons/ipad-portrait.png" media="screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait)">
    <link rel="apple-touch-startup-image" href="/img/icons/iphone.png" media="screen and (max-device-width: 320px)">

    <!--
    HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries.
    WARNING: Respond.js doesn't work if you view the page via file://
    -->
    <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
        <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

2) Base64 encode any static images you can directly into their img tags so you can still use scaling CSS code on them and never have to deal with issues like missing or incorrectly set expires headers. (Which is an issues when your also running Google mod_pagespeed on your Apache server.)

3) Compress the heck out of all your other images regardless of their type before uploading.

4) Use an onload JavaScript function at the bottom of your page to load all CSS and JS files like this.

window.onload = function(){
    function loadjscssfile(filename, filetype) {
        if(filetype == "js") {
            var cssNode = document.createElement('script');
            cssNode.setAttribute("type", "text/javascript");
            cssNode.setAttribute("src", filename);
        } else if(filetype == "css") {
            var cssNode = document.createElement("link");
            cssNode.setAttribute("rel", "stylesheet");
            cssNode.setAttribute("type", "text/css");
            cssNode.setAttribute("href", filename);
        }
        if(typeof cssNode != "undefined") {
            var h = document.getElementsByTagName("head")[0];
            h.parentNode.insertBefore(cssNode, h);
        }
    }
    loadjscssfile("//fonts.googleapis.com/css?family=Open+Sans:300&subset=latin,cyrillic-ext,latin-ext,cyrillic,greek-ext,greek,vietnamese", "css");
    loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css", "css");
    loadjscssfile("/css/style.css", "css");
    loadjscssfile("//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js", "js");
    loadjscssfile("//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js", "js");
};

Beyond that test using Yslow from Yahoo and don't sweat it. You will pull your hair out for days trying to get 100/100 and these tools are not perfect. Just do your best and take what you learn with you onto the next project.

Google PageSpeed Conflicting Suggestions

99% of the time all CSS should be in the head in the form of a external link. And all js should be just before the closing body tag. If its telling you to put the css in the body it is wrong. page speed is not just actual speed. it is also perseived speed. css in the head will make the page appear to load faster. Here are all the ways to load CSS with js that I know of. http://www.websitecodetutorials.com/code/javascript/add-css-with-javascript.php.

Achieving Pagespeed Insight's Image Compression result

Pagespeed Insights has changed and will now output recommendations that includes lossy compression of JPG images.
PageSpeed currently tries to change your JPG images quality to 85. Reducing the quality to 85 removed the warning.

Pagespeed-Penalty for Using Srcset

Why is Google PageSpeed complaining about Retina images?

Google PageSpeed Conflicting Suggestions

Achieving Pagespeed Insight's Image Compression result

Related Topics

Leave a reply