All geek questions in one place

Why is Google PageSpeed ​​complaining about Retina images?

I am working on a responsive website. I have a code that loads the correct image size for screen size.

The problem I am facing is that I use Retina images for some mobile devices. This means that the images uploaded by the client are larger. Now Google pagespeed is complaining, saying I have to optimize my images. But the problem is that if I reduce the size of the images, I will lose the image quality of the retina.

Does Google Pagespeed support Retina images? Is there a way to tell Google Pagespeed that these are retinal images?

Or is there a best practice from Google for Retina images?

+6
source share
1 answer

I found that Google PageSpeed ​​would be a little flaky in better times. I will check something that comes out 88/100, and then after 5 minutes it will be 95/100 and nothing will change.

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

1) Create a fully engineered headline that 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 encodes any static images that you can use directly in your img tags so that you can still use CSS scaling on them and never have to deal with issues such as missing or incorrect expiration headers. (These are problems when you also use Google mod_pagespeed on your Apache server.)

3) Before downloading, remove all other images from yourself, regardless of their type.

4) Use the onload download function at the bottom of the 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&amp;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"); };

Other than this test, using Yahoo's Yslow and don't sweat it. You will pull your hair for several days, trying to get 100/100, and these tools are not perfect. Just do your best and take what you learn in the next project.

-1
source

Source: https://habr.com/ru/post/974038/

More articles:


All Articles