[英]Google PageSpeed Insights Optimize Images Compressing and Resizing
[英]Why is Google PageSpeed complaining about Retina images?
我正在響應網站。 我有代碼為屏幕大小加載正確的圖像大小。
我面臨的問題是我正在為一些移動設備使用Retina圖像。 這意味着客戶端下載的圖像具有更大的尺寸。 現在谷歌的網頁速度正在抱怨說我應該優化我的圖像。 但問題是,如果我減小圖像的大小,我將失去視網膜顯示的質量。
Google Pagespeed不支持Retina圖像嗎? 有沒有辦法告訴Google Pagespeed這些是視網膜圖像?
或者Google是否有針對Retina圖像的最佳做法?
如果您使用srcset屬性, PageSpeed現在支持視網膜圖像:
<img style="height: 100px"
src="rex_1x.png"
srcset="rex_1x.png 1x, rex_2x.png 2x"
alt="My dog Rex"/>
在上面的示例中,rex_1x.png將是100 x 100px圖像,rex_2x.png將是200 x 200px圖像。
使用此代碼,PageSpeed不會抱怨圖像。
我發現Google PageSpeed在最好的時候有點不穩定。 我將測試88/100出來的東西,然后5分鍾后出現95/100並且沒有任何變化。
我認為Google PageSpeed的最佳做法是確保您:
1)有一個完美設計的標題,觸及谷歌喜歡看到的所有小東西。
<!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可以將任何靜態圖像直接編碼到他們的img標簽中,這樣你仍然可以在它們上使用縮放CSS代碼,而不必處理丟失或錯誤設置過期標題等問題。 (當您在Apache服務器上運行Google mod_pagespeed時,這是一個問題。)
3)在上傳之前壓縮所有其他圖像,無論其類型如何。
4)使用頁面底部的onload JavaScript函數加載所有這樣的CSS和JS文件。
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");
};
除了使用來自雅虎的Yslow進行測試之外,不要冒汗。 你會拔掉頭發試圖獲得100/100並且這些工具並不完美。 盡你所能,把你學到的東西帶到下一個項目。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.