GoogleのPageSpeed Insightsの画像判定はおかしい?

前回の記事でGoogleのPageSpeed Insightsでのモバイル画像の警告が気になって仕方がないので、とことんテストしてみる事にしました。

今度はDevicePixelRatioを表示を追加してテストしてみました。

テストした結果は下記の画像。

PageSpeed Insights_1

PageSpeed InsightsのモバイルはDevicePixelRatioは2xで判定しているようです。

ソースは下記にしているので、画面は320pxですが2xなので640pxの画像が表示されます。

[code]

<img src="img/2000w.jpg" srcset="img/320w.jpg 320w, img/360w.jpg 360w, img/640w.jpg 640w, img/768w.jpg 768w, img/800w.jpg 800w, img/980w.jpg 980w, img/1280w.jpg 1280w, img/2000w.jpg 2000w" alt="srcsetのテスト">

[/code]

現状のスマートフォンは、DevicePixelRatioが2xどころか3x等、ディスプレイの性能はかなり高くなってます。

GoogleのPageSpeed Insightsのモバイルは2xで画像を表示させているのは妥当だと思います。

では何故『圧縮してサイズを変更すると 20.3 KB(75%)削減できます。』のような修正を考慮が出てくるのか?

ここはとことん実験してみるしかない!

という事で試してみました。

下記結果は、320pxと640pxの画像をそれぞれ圧縮率80%のJPGで出力しました。

320pxの画像は問題ないですが、640pxの画像で『修正を考慮』が出てます。

で、640pxの画像を10%ずつ圧縮率を下げてはチェックを続け、ようやく20%で『修正を考慮』が消えました。

画像のファイルサイズを確認、320pxが10KB、640pxが5KB。

要するに、GoogleのPageSpeed Insightsのモバイル画像のチェックは、320px以下の画像はOKだが、2x用に作った640pxの画像は、ファイルサイズを1/2にしないとOKが出ない事がわかりました。

しかし、640pxの画像ファイルサイズを1/2にすると流石に荒くて見れたものではない。

実際スマートフォンで確認しました、DevicePixelRatioは3xです。

スマートフォンで見たとき

640pxの画像は荒くて見られたものではないです。

結論!

 

今やモバイルデバイスの解像度はかなり良くなってきてます。

当然!性能が良いディスプレイ端末を持っていれば綺麗に見たいのが当然でしょう。

なので、今のところGoogleのPageSpeed Insightsのモバイル画像のチェックは使えません。

画像の『修正を考慮』表示されても、今のところは無視するしかないでしょう。

今後、PageSpeed Insightsの精度が上がる事を期待します!

 

srcset属性を試してみました。

GoogleのPageSpeed Insightsで合格点が欲しくて、色々ググってましたら、imgタグにsrcset属性なるものがあるそうな。

画面サイズで画像が切り替えるらしい。

picture要素も同じことが出来るとの事。

早速試してみました。

先ずはsrcset属性からテスト、画像を適当なサイズで作って、body内のタグは下記で。

[code]
<img src="img/2000w.jpg" srcset="img/320w.jpg 320w, img/360w.jpg 360w, img/620w.jpg 620w, img/768w.jpg 768w, img/800w.jpg 800w, img/980w.jpg 980w, img/1280w.jpg 1280w, img/2000w.jpg 2000w" alt="srcsetのテスト">
<script async src="picturefill.js"&gt;&lt;/script>
[/code]

PCで各ブラウザでチェック、Chromeだけ若干挙動がおかしいが、一応画像は切り替わってる。

今度はスマートフォンでチェック。

おかしい、980w.jpgが表示されてる、何で?

その後、2日間悪戦苦闘しましたが、わかりました。

320wとか360wとか設定してる数値は、PCでは画面サイズ、スマートフォンではピクセルサイズだった。

これは使えません。

今度はpicture要素。

[code]
<picture>
  <source media="(min-width: 980px)" srcset="img/2000w.jpg">
  <source media="(min-width: 768px)" srcset="img/1280w.jpg">
  <source media="(min-width: 640px)" srcset="img/640w.jpg">
  <source media="(min-width: 360px)" srcset="img/360w.jpg 1x,img/640w.jpg 2x">
  <source media="(min-width: 320px)" srcset="img/320w.jpg 1x, img/360w.jpg 2x">
  <img src="img/2000w.jpg" alt="pictureのテスト">
</picture>
<script async src="picturefill.js"></script>
[/code]

PCのブラウザチェック、やはりChromeだけ若干挙動がおかしい。

スマートフォンでチェック、今度はOK!

いやしかし、1xというのが効いてない。

GoogleのPageSpeed Insightsでチェックすると2xの360w.jpgが表示されてる。

PageSpeed Insights

これではPageSpeed Insightsで合格点は出ません。

PCのブラウザ画面サイズが320pxでは320w.jpgが表示されているのに、PageSpeed Insightsでは360w.jpgが表示されてる。

今はsrcset属性もpicture要素も使えそうにないですね。

ホームページにブログの新着記事を表示させる方法

ブログの新着記事の一覧をホームページに表示させたいときがありますよね。

Google AJAX APIを使えば簡単に表示させることができます。

下記Javacriptをページに記述します、<body>内でもOKです。

<script type=”text/javascript” src=”http://www.google.com/jsapi”></script >
<script type=”text/javascript”>

//Google Feed Api
google.load(“feeds”, “1”);

function initialize() {

// ブログのRSSを設定
var feed = new google.feeds.Feed(“RSSのURL”);

// 記事タイトルの表示文字数を30文字に設定
var maxTitleLength = 30;

// 記事タイトル取得件数を10件に設定
feed.setNumEntries(10);
feed.load(function(result) {
if (!result.error) {
var container = document.getElementById(“feed1”);
for (var i = 0; i < result.feed.entries.length; i++) {

// 記事タイトルを取得
var entry = result.feed.entries[i];
var title = entry.title;

// 記事タイトルを文字数調整
if (title.length > maxTitleLength) {
title = title.substr(0, maxTitleLength) + ‘…’;
}

// 年月日設定
var dd = new Date(entry.publishedDate); // now
var yearNum = dd.getYear();
if (yearNum < 2000) yearNum += 1900;
var m = dd.getMonth() + 1;
if (m < 10) {m = “0” + m;}
var d = dd.getDate();
if (d < 10) {d = “0” + d;}
var date = yearNum + “年” + m + “月” + d + “日”;
container.innerHTML += “<li><span>” + date +” </span>” +” <a href='” + entry.link + “‘ target=’_blank’>” + title + “</a></li>”;
}
}
});

}
google.setOnLoadCallback(initialize);

</script>

表示したいところに下記タグを挿入
<ul id=”feed1″></ul>

後はCSSで整えてください。

HTML5のブラウザ対応状況

使っているブラウザが、どれくらい対応しているかチェックしてくれるサイトがありました。http://html5test.com/

私がメインに使っているFireFoxで試してみると下記のようなスコアでした。
The HTML5 test - How well does your browser support HTML5
FireFoxのバージョンは下記です。
FireFox

因みに同時に利用しているChromeのスコは下記でした。
Chrome

一応 Internet Explorer 10 でも試してみました。
Internet Explorer 10

Operaも試してみました。
Opera

ChromeとOperaの対応状況は良いようです、Internet Explorerはダメですね。

HTML5対応はまだ少し時間がかかりそうです。

ホームページフッター部分の西暦を動的に出力する。

静的なファイルでホームページを作っている場合に、フッターに『Copyright 2013』とか記述していると毎年変更するのが面倒ですよね。

ちょっと横着かもしれませんが、動的変更する方法

.htaccessでhtmlをPHPで動くように下記を記述してサーバーにアップロード。

AddType application/x-httpd-php .php .html

htmlページの西暦の部分に下記を記述

<?php echo date(‘Y’); ?>

西暦が表示されるようになります。

 

SEO大丈夫ですか?

みなさん、こんにちは。
風邪をずるずると長引かせております、西川です。

さて最近、気付いたことがあるので今日はブログで書かせていただきます。

あなたの会社は社名で検索をした時、ちゃんと表示されますか?

日本全国に同じ社名の会社が結構あるものです。
取引先やお客様が検索された時、自分の会社が一番に表示されないどころか、
1ページ目に表示されないとなると、これは非常に恥ずかしい。
「ホームページないの?」
なんて思ってしまいます。

サイトへ辿り着くとキレイに作ってあったりもするのですが、
それでは正に宝の持ち腐れ、ですね。

検索順位を上位表示させるための対策をSEOと言います。

このSEOというのは本当に大変で、
どのような対策をすれば必ず上位表示される、という明確なものは公開されていません。

検索エンジンロボットであるクローラーが色々な要素を総合的に 判断し、検索結果を決めるのです。

しかし、このクローラー。
判断基準を時によって変化させるのです。

継続的にSEOを行わなければ上位表示を継続させることは困難なのです。

webサイトを構成しているhtmlという言語があります。
このhtmlが正しく記述されていることが、 そんなSEOの判断基準となる要素の一つとなります。

弊社で制作しておるhtmlのソースコードはW3Cで定められているWEB標準に則った記述です。
これは簡単なようですが、エラーのある状態で公開されているサイトが多く見られます。

あなたの会社のwebサイトは大丈夫ですか?
気になると思われたら、まずはチェックをご依頼ください。
リソースにも対応致します。

 

—————————————————–
きっちり制作 しっかり運営
ホームページのお手伝い CUBEANS
—————————————————–

 

HTML5をIE8以下に対応させる方法

HTML5要素はIE8以下に対応していないので、ググってみるとこんな便利なものがありました。
head内に下記を記述します。

<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

IE8以下でちゃんと表示するようになりました。
早くIE8以下は無くなって欲しい。

ランディングページ制作事例

お中元の季節、ビルの管理人さんからいただいたお菓子がおいしくてやめられません。
でも今年の一番のオススメはお漬け物のお中元でしょうか?
水なすの切り漬ぬか漬けがとてもおいしい京つけもの富川さん。
ランディングページを制作しました。

京つけもの富川

 

 

 

 

 

 

 

 

 

 

近いうちにお店の方にもまた行きたいです。

ついでに勉強中のメモ↓

http://css-happylife.com/template/switchhat_js/

クリックするとでろっ(?)と出てくる
アコーディオン式メニューを作るのに便利なswitchHat.jsですが
以前は使えていたのに今回はうまく使えません!
原因をつきとめるためにまだまだ勉強しないといけないWEB一年生です。