ちょっとした不注意でブログを壊してしまいました。

ちょっとした不注意でブログを壊してしまいました。

データベースはバックアップがあったので、過去ログは残りましたが・・・

しかし何が原因だったんだろう?

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要素も使えそうにないですね。

2015年1月13日にCMSウェブルのバージョンアップを行います。

2015年1月13日にCMSウェブルのバージョンアップを行います。

スマートフォン等のモバイル端末からのアクセス増加に伴い、HTML・CSS・JavaScriptファイルの圧縮機能を追加します。

CMSウェブル

ファイルを圧縮すると何がメリットか?

この圧縮機能を利用することで、約30%ファイルの容量を低減できます。
ファイルの容量が少なくなる事によって表示速度が向上するのは勿論、モバイル端末でのパケット量が減るので、モバイルにやさしい機能です。

通常は無料のファイル圧縮サイト等を利用して、圧縮したファイルをアップロードするという手間がかかります。

CMSウェブルのファイル圧縮機能は、ファイル圧縮の手間を自動で行ってくれます。

下記サイトでご自身のサイトのスピードチェックをしてみてください。

PageSpeed Insights
PageSpeed Insights

また画像アップロード機能も見直し、より使いやすい操作に変更します。

今後も引き続きバージョンアップを予定しています。

Jetpackを使ってWordPressからGoogle+ページへの連携

Jetpackを使ってWordPressからGoogle+ページへの連携です。

今まで連携は出来ていたのですが、Google+ページで限定公開になっていたので、一般公開になっていませんでした。

一般公開になるように設定を変更しましたので、これで投稿が表示されると思います。

ホームページをリニューアルしました!

スマートフォンに対応するために、レスポンシブWEBデザインでホームページをリニューアルしました。

ついでに、サブドメインで運用していたブログもサイト配下に引越してみました。
これは同じドメイン内でブログを運用した方がSEO的には良いからです。

現状は取りあえずのリニューアルで、今後もう少し充実させたいと思っています。

CMSウェブルで作っているので、更新は簡単なので、コンテンツ充実に専念できます。

今後共、WebWave有限会社をよろしくお願いいたします。

ホームページ制作、WEBシステム制作のWebWave有限会社 京都

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

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

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で整えてください。

Firefoxブラウザで『お使いのPCのパフォーマンスが低下しています』という変な広告が・・・

突然、Firefoxブラウザで『お使いのPCのパフォーマンスが低下しています』という変な広告が出ました。

お使いのPCのパフォーマンスが低下しています

Google先生に聞きながら、変なアドオンやプログラムがインストールされていないか調べてみましたが該当無し。

ウィルスチェックもしましたが、問題なし。

Firefoxには『Adblock Plus』という広告を表示しないアドオンがあるらしく、Adblock Plusをインストール。

Adblock Plus

Firefoxでは全ての広告が表示されなくなりました。

広告が表示されなくなりました。

もしFirefoxで変な広告が出たときはお試し下さい。

 

EC-CUBEでSSL利用時に、相対バスから絶対パスに変える方法

EC-CUBEでSSLを利用すると、テンプレートの各リンクが相対パスになっているため、一度SSLURLに入るとURLがSSLのままになってしまいます。

それでは変なので、修正します。

青地の部分を

<a href="<--{$smarty.const.TOP_URL|escape}-->">
又は
<a href="<!--{$smarty.const.ROOT_URLPATH}-->">

赤字の部分に変更します。

<a href="<!--{$smarty.const.HTTP_URL}-->">

必要な箇所は全て修正しないといけないので、ちょっと大変かもしれません。