サイトの速度についての提案、Pageスコアが向上

Googleで「サイトの速度についての提案」で「PageSpeed スコア」を確認。
サイトの速度についての提案の個数が3から4個であればスコアは70から90で、6個から7個になるとスコアは35から45になります。これから改善をして向上させて行ます。Googleからの提案内容をまずは見て行きます。

「サイトの速度についての提案」で「PageSpeed スコア」の場所

1.Pageスコアを確認

①Googleのアドセンスのトップ画面から次のとおりメニューを選択して行きます。

Googleのアドセンスのトップ画面→設定→スクセスと認証→Google アナリティクスとの統合→(公開しているサイト)→サイトを指定→行動→サイト速度→サイトの速度についての提案と進みます。

以下の画面が表示されます。「ユーザ」というメニュー配下にも「行動」とういうメニューがありますが「ユーザ」と同じ階層の「行動」の配下に「サイトの速度についての提案」の提案はあります。

サイトの速度についての提案画面

 

「サイトの速度についての提案」の提案個数と「PageSpeed スコア」の値

2つのサイトの実態です。

サイト1:「サイトの速度についての提案」の提案個数が3個から4個であれば70から90です。中に6個がありますが全体が良いので70を越えて来ているようです。

サイトの速度についての提案画面

サイト2:「サイトの速度についての提案」の提案個数が6個から7個であれば30から50が大半になります。

サイトの速度についての提案画面

 

PageスコアはPageランク(検索サイトで表示される順番)にも影響します。見栄えの良いホームページを作ってもPageスコアが低いと検索サイトからの訪問者は増えません。Googleやヤフーの検索サイトで1ページにでてくるか。2ページ目以降なのかによって大きく変わります。

「サイトの速度についての提案」の内容

(1)Pageスコアが92の「サイトの速度についての提案」の内容は「修正を考慮」で3個ありました。

①ブラウザのキャッシュを活用する
②画像を最適化する
③スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

サイトの速度についての提案の内容画面

(2)Pageスコアが36の「サイトの速度についての提案」の内容は大きく7つありました。

サイトの速度についての提案の内容画面

 修正が必要が3個、修正を考慮が4個です。

これから順次修正して行きますが、Webサーバ側で設定する内容もあります。以下に順次追記します。

(2017.02.06記載)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

修正が必要 圧縮を有効にするについて

圧縮を有効にするで指摘された内容

Googleが推奨している解決方法はWebサーバでの対応方法が記載されていました。私の場合はプロバイダーのホームページスペースの利用なので対応ができないです。

でも、対象になっているファイルをみると「xxx.cs」「xxx.html」「xxx.js」のファイルです。

GzipなどをつかってサーバとPC間の転送を圧縮したほうが良いとういうGoogleから提案でした。いずれにしてもサーバ管理者でない私には無理です。

 

(2017.02.10記載)

修正が必要 ブラウザのキャッシュを有効にするについて

ブラウザのキャッシュを有効にするにするで指摘された内容

ブラウザのキャッシュを有効にするとホームページに複数回アクセスした場合に時間を節約できるようになってJS ファイル、CSS ファイル、画像ファイル、その他のバイナリ オブジェクト ファイル(メディア ファイル、PDF など)がPCで記憶された情報から表示されるようになります。

でも、これはWebサーバ側での設定になるので「圧縮を有効にするについて」と同じに無理です。
(2017.02.07記載)

 

 

 

修正が必要 スクロールせずに見えるコンテンツのレンダリングを・・について

スクロールせずに見えるコンテンツのレンダリング指摘された内容

レンダリングブロックとはホームページの表示が左画像のファイルの読み込みが完了するまでできない。なので外部から読み込む方法ではなくて直接HTMLに記述したほうが良い。または非同期にしたほうが良いとうことです。

この指摘に関してはスタイルシートそのものが共通的なものはまとめて他から呼び出す方式で

煩雑さをなくした考え方でできたものなので、なんだかな・・です。非同期は・・?です。
いずれにしても「修正が必要 圧縮を有効にする」と同じようにホームページビルダーSPでは無理でホームページビルダで「xxx.css」が作成される契機を知って作成されないように対応することになります。(2017.02.08記載)

修正を考慮 CSSを縮小する、JavaScriptを縮小する

対象になっているファイルをみると「xxx.cs」「xxx.html」「xxx.js」のファイルです。

「修正が必要 圧縮を有効にする」と同じファイルです。ここでいう縮小とは不要なスペースやTABを削除することです。

ホームページビルダーSは公開の時にHTML/CSSなどを自動で作って転送するのでサーバ側から該当のファイルをダウンロードして縮小して再度アップロードします。

実際に行ってみました。
項番1はGoogleからの提案が6個から5個に減ってPageスコアが30から43にUP
項番2はGoogleからの提案が7個から6個に減ってPageスコアが36から41にUPしました。

CSSを縮小した結果のPageスコア

効果があることがわかったので紹介します。

CSS/JavaScripの縮小で利用させてもらったサイトは「Online JavaScript/CSS/HTML Compressor(http://refresh-sf.com/)」です。

「Online JavaScript/CSS/HTML Compressor(http://refresh-sf.com/)」へ。

英文のページなので想像で使ってうまくいったので紹介します。
①行って見ると下記の画面が表示されます。

CSS/JavaScripの縮小ツールの画面(入力)

・Inputの領域にCSS/JavaScript/HTMLのソースコードを貼り付けます。
・縮小したいソースコードの種類を選択します。

②縮小が完了すると下記画面が表示されます。

CSS/JavaScripの縮小ツールの画面(出力)

①縮小したファイルを入力します。ディフォルトはStyle-mini.cssになっています。
②Saveを選択します。PCのダウンロード場所にファイルはできます。

できあがったファイルをWebサーバにアップロードします。

 

ホームページビルダーはページを更新するたびにサイト全体のページに対して行うことになるので・・手間がかかり過ぎで無理ですが、更新をほとんどしなくなったサイトに対して行うようにすれば良いと思います。(2017.02.10記載)

修正を考慮 画像を最適化する

Googleの提案をみると画像に対して「基本的な最適化」と「高度な最適化」の両方をするように提案されています。

基本的な最適化

基本的な最適化とは「不要なスペースの削除、色深度の最小許容レベルへの低減、画像のコメントの削除」を行うように記載されています。
①「画像のコメントの削除」とはJPEG画像は撮影した時の日付、露出などが記録されているのでこれを削除するという意味です。

プロパティ画面

「画像のコメントの削除」はエクスプローラで画像ファイル名を選択右クリックでプロパティを選択すると左記の画像が詳細を選んで左下の「プロパティや個人情報を削除」を選択すれば削除できます。

②「色深度の最小許容レベルへの低減」とは見た目は変わらない程度に圧縮するようにとのことです。
そして、推奨ソフトとしてGIMPを推奨しています。元は英語版ですが日本語版にしたものが「窓の杜」「ベクター」掲載されています。(フリーソフトです。)
画像の編集ソフトは使いやすさとかでこだわりがでてきます。これからという人はGIMPを使ってみたらどうでしょうか。私はこだわりがあるソフトがあるのでパスです。

高度な最適化

高度な最適化とは画像の品質に影響を与えずに JPEG や PNG ファイルに対して高度なロスレス圧縮を行うように提案されています。ロスレス圧縮は特許等の関係でロスレス圧縮を搭載したソフトは少ないようです。そして、推奨ソフトとしてJPEG では、jpegtran を推奨しています。(英語版です。)英語版でインストールも必要そうだったのでパスしました。

「jpegtran」のサイトへ

オンラインのWeb上でロスレス圧縮を提供しているサイト(英語)があったので紹介と使い方を紹介します。「PageSpeed スコア」も若干ですが良くなりました。

<ロスレス圧縮前>

ロスレス圧縮前の「PageSpeed スコア」

<ロスレス圧縮後>

ロスレス圧縮後の「PageSpeed スコア」

70から73にスコアがアップしています。このページで試験したら「修正が必要」です。「修正が必要」と「修正を考慮」の区分けがよくわからないところです。

ロスレス圧縮ができるサイト、使い方

Kraken.ioページのキャプチャー

ロスレス圧縮ができるサイト:Kraken.io(https://kraken.io/web-interface)へ

使い方

①画像ファイルを上記画像の①へドロップします。まとめてのドロップもOKです。
②上記画像の②を選択します。
③ロスレス圧縮された画像に変換された画像をダウンロードします。

上記の画像は日本語翻訳しています。また、ロスレス圧縮のみの利用はフリーですが他はPROメンバーになる必要があるようでなってないので他機能についてはわかりません。

まとめ

ホームページビルダ-SPを利用している方は「xxx.css」が作成される契機を知って作成されないように対応することが大切なようです。ホームページビルダ-SPはホームページ公開の時にHTML/CSS/JSなどを自動生成するからです。実験中です。