チャネリングもアニマルコミュニケーションもスキル!霊感必要無し!北海道・東京・大阪・京都・神戸・奈良・広島・和歌山・東北・九州・沖縄・海外から習いに来られます。

大変!モバイル ユーザビリティ上の問題が検出されました

Googleさんが親切に、
iPhoneやスマートフォンで見ると、ホームページの表示が遅いよ!
と教えてくれて、嬉しいけれど、なんかおかしいわ〜

 

 

Googleさんが、ここがいけないと教えてくれた箇所をじっくり見ると・・・・
なんと、Facebookのバナーの写真がいけない!と仰る・・・

 

そんなの〜〜〜、バナーがどうしてダメなの?・・といいたい。
Facebookのバナーなんだから、Facebookへ言って欲しいですね〜

 

バナーコードは、Facebookが吐き出したコードやん・・・
わたしは、しりませんわよ。

 

おまけに、バナーにリンクが入っているんですが、
そのリンク同士が近い!というご注意もあって・・・

 

重箱の隅をつっつかれているような感じで・・・ため息でましたわ〜

 

そのうちGoogleさんの意向をくんでFacebookさんが、
なんとかしはるでしょう・・・

 

あ〜GoogleさんとFacebookさん、ライバルでしたね(笑)

 

・・と、いうことでFacebookのバナーをしばらくはずします。

 

Facebookへは、以下のアドレスをクリックしてください。

 

https://www.facebook.com/NekoPikaia

 

 

Googleさんが「モバイルの表示が遅い!」と
教えてくれたページは4枚ありました。

 

そのうちの1枚は、記事にいくつか下線を引いていました。
まさかと思ったけれど、下線を全部はずしてみました。

 

表示が遅い!というページが2枚へりました。
どうなっているんでしょうね〜〜

 

 

ほかにも画像が重いとか、CSSやJavaを圧縮しろとか・・・ため息です。

 

画像を圧縮するのは出来ますが・・・

 

「CSSやJavaを圧縮しろ」これは、できませんわよ(T_T)

 

こんなややこしいことに巻き込まれたくないから

 

SIRIUSを買ってホームページを作り直したのに・・・

 

ぜんぜん・・・あかんやん(T_T)

 

わたしは、JavaとJavaScripの違いも分からないのに、困ったです。

 

無料レンタルサーバーですから、ホームページに宣伝が入るのですが、
どうも、その宣伝のJavaScripを圧縮しろと言っているようです。

 

私が、書き込んだ宣伝でもないのに、どうするの?

 

無料レンタルサーバーの宣伝って、全部のページに入っているのに、
なぜか、この2ページだけ、あかんのやそうです。

 

その2ページは、「リンク」のご案内ページと、「よくある質問」のページなんです。

 

画像も1つぐらいしか使っていないのに・・・へんだわ・・・

 

ということで、軽い画像に交換したり、画像を削除したり・・・

 

出来る努力はしました。

 

以下は、画像の圧縮にとても便利なサイト様です

 

https://tinypng.com/

 

 

リンクのページは、ファイル名から変更して作り直しました。

 

これで、かなり、改善されたと思いますが・・・

 

Googleさんで、再度速度を調べました。

 

Googleさんのサービスで、モバイル表示速度など調べてくれます。

 

「モバイル フレンドリー テスト」
https://developers.google.com/speed/pagespeed/insights/

 

 

一つはOKでした!
モバイル ユーザビリティ上の問題が検出されました

 

 

もう一つのページは
ユーザビリティ上の問題が検出されました

 

99%だって、何がいけないか・・・探すと・・・

 

パンくずリンクが、、、、いけない!んですって!

 

意味が分かりませんね・・・

 

パンくずリンクは全部のページに入っているのよ!
なんで、このページだけダメなんでしょうか??

 

 

他の解決策は、
「ブラウザのキャッシュを活用する」だそうです。

 

ひょっとして、それこそ、キャッシュでおなじ間違いが表示されてかも・・

 

ブラウザーを閉じて、再度、確かめると
モバイル ユーザビリティ上の問題が検出されました

 

 

あ〜よかった、100%になっていました。

 

でも、

 

でも、

 

速度が、まだ遅いのが問題だ!と、Googleは言います。

 

モバイル ユーザビリティ上の問題が検出されました

 

『このページには、レンダリングをブロックするスクリプト リソース が 2 個、CSS リソースが 5 個あります。これが原因で、ページのレンダリングに遅延が発生しています。』という注意書きがありましたが・・・

 

よくよく見ると、1つは、GoogleのJavaScripです。

 

 

どうなるんでしょうか・・・

 

 

今日はコレで寝ます・・・

 

疲れました・・・

 

 

 

 

おはようございます!

 

(=#^ ェ ^#=)ニョホ 実は。もう夕方です!

 

昨日は、徹夜でした。

 

よく眠ったら、あることを思いだしました。

 

Googleさんから注意を受けたページで、
文章の下線をはずしただけで、
全部OKになったページが2枚あったことを思い出しました。

 

と、いうことは、モバイル表示が遅い!
というGoogleさんの指摘って、いいかげんかも(笑)

 

下線をはずしたページの注意を思い出すと、
ビューポートが記述されていない!という注意だった・・・・・

 

当然、SIRIUSのHTMLには、ビューポート(viewport)が以下のように記述されています。
もちろんホームページのすべてのページに記述されているのですよ!
meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"

 

なんだって、ホームページ2枚だけ!だめなんでしょう・・・
・・笑うしかない・・(T_T)

 

泣き笑いで、何か対策をネットで探しました。

 

以下のサイト様を参考にしました。
http://blog.ousaan.com/index.cgi/links/20130925.html

 

SIRIUSの viewport meta タグの指定を以下のように変えてみました。
meta name="viewport" content="initial-scale=1.0"

 

上記は、コピペしないでね。
表示させるために<>はずしていますから。

 

 

残念、変化なしでした!
元へ戻しました・・・・_| ̄|○

 

 

以下の画像のように、注意と対策が出てきます。
モバイル ユーザビリティ上の問題が検出されました

 

画像を圧縮しまくったので、かなりぼけていますが、
表示速度が遅い!と注意しています。

 

問題のある画像はこれだ、
問題のある、JavaScripは、CSSはコレだ!と
丁寧に教えてくれますよ・・・

 

全部解決する方法は、どうすればよいのかな〜
Googleさんが教えてくれる、
「ブラウザのキャッシュを活用する」をどうするのか、探してみました。

 

「.htaccessを使った方法」がありましたが、
SIRIUSでアップされたファイルをFFTPで見ると
.htaccessが、すでにあるので、この対策方法はやめました。

 

 

ホームページの表示時間は、Googleさんの
PageSpeed Insightsというページでわかりますよ!
https://developers.google.com/speed/pagespeed/insights/?hl=ja

 

 

「有効期限が指定されていません」と画像などに注意があるので
検索を「meta タグブラウザのキャッシュを活用する」に変えると
以下のようなサイト様がありました。

 

http://www.tagindex.com/html_tag/page/meta_expires.html

 

「キャッシュの有効期限を指定する」方法です!
metaで指定するので、《.htaccess》は関係ないので、
気が楽です。

 

さっそく、コピペで以下を付け加えました
meta http-equiv="Expires" content="86400"

 

上記は、コピペしないでね。
表示させるために<>はずしていますから。

 

 

全然効果なし!

 

 

仕方ないので、.htaccessがすでにあるので、このファイルに
以下を追加してアップした。

 

Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$">
Header set Cache-Control "max-age=2592000, public"
/Files

 

Files ~ ".(css|js|html|gz)$"
Header set Cache-Control "max-age=86400, public"
/Files

 

上記は、コピペしないでね。
表示させるために<>はずしていますから。

 

こちらのサイト様を参考にさせて頂きました。
http://syncer.jp/page-cache-setting

 

 

がんばって、.htaccessファイルアップしましたが、

 

全然効果なし・・

 

速度が遅い!って注意は消えませんでした。

 

.htaccessって記述を間違えると、ホームページが表示されませんから
気をつけてくださいね。
信頼が置けるサイト様を参考にして下さい。

 

.htaccessをアップする方法は、以下のサイト様を
参考に致しました。

 

http://htaccess.cman.jp/upload/

 

 

画像の圧縮は出来るので、圧縮してアップしましたら、
同じ画像ファイルが、重いのじゃ〜!と
何度も表示されます。

 

一つの画像を15回ぐらい圧縮しましたよ・・・

 

SIRIUSは、ファイルアップが遅いんです。

 

画像だけをアップしても、ネットで表示されないから
全ファイルアップします。
これが・・・
15分ぐらいかかる(T_T)

 

手間をうんとこさかけて圧縮しても、画像でOK出ません。

 

画像サイズが9.20KBでも、画像をもっと圧縮しろって出るんです。

 

TOP画像なんか、圧縮し過ぎて60KBまで落とした、
すると画像が荒くなってボケてきて困ったですね〜

 

画像を圧縮していないから、表示が遅いってGoogleさんは言うけれど、
本当は、別のところに原因があるんじゃないかな〜

 

本当にCSSやJavaScripの圧縮をしないといけないのかな〜

 

SIRIUSさんのサポートは、「SIRIUSのCSSやJavaScripは最適です」と仰っていました。
圧縮なんて必要ないと仰っていました。

 

色々調べていると、Google推薦のWordPressでも
同じようにGoogleさんから、表示が遅いと注意を受けているようです。

 

 

 

Googleさんのありがたいご注意ですが、
解決しません。

 

「header.jpg を圧縮してサイズを変更すると 53 KB(87%)削減できます。」と言う注意もナンセンスで付いていけないわ〜(T_T)

 

header.jpg って60.6KBしかないよ。
53 KB削減したら、7.6KBだよ・・・・画像として見られないよ!

 

CSSやジャバもいくら、圧縮しても無駄な気がしてきます。

 

無料のFC2の宣伝ジャバや宣伝画像を、
圧縮しろと注意されても、これはどうすることも出来ません。

 

 

iPhoneでホームページみると、有料レンタルサーバーで広告無しのホームページに、
サファリが勝手にうざい広告を付けていて、
なんのために、有料にして広告無しにしているのか、わかりません。

 

天下のGoogleさんだから、そのうちキット解決するでしょう!

 

脳天気に待つことにします。

 

素人が、CSSやJavaScripをさわると、

 

ホームページが壊れそうな気がします。

 

脳天気に待つ!

 

果報は寝て待てですね(=´∇`=)にゃん♪

 

 

SIRIUSってお高いホームページ作成ソフトですよ。
Googleさんが推薦する、レスポンシブデザインは別料金でした。

 

お金をかけても、こうやって、Googleさんからの注意がくるんだから
どうしようもないですね・・・・

 

そのうちCSSやJavaScripの圧縮をするか・・・

 

Googleさんが、ダメだししてくれたページは、

 

「リンクとよくある質問」の2ページだけですから、

 

新しく作り変えるか・・・・

 

色々考えます・・・

 

そうそう、リンクのファイルは、ファイル名も変えて新しく作成しました。

 

Googleさんが散々表示が遅いと注意してくれる、ファイルが、このページです。

 

すごく表示が遅かったですか?

 

 

 

あきらめ切れないので、寝る前に再度調べた!

 

今日は、絶対 徹夜しませんよ!

 

以下のサイト様で、ヒントを得ました。
http://wp-kappa.com/eliminate-render-blocking-javascript-and-css-in-above-the-fold-content/

 

『GoogleはJavaScript を1週間(604,800秒)に設定するよう推奨しているそうです。それ以下の時間だと、また「修正が必要」と表示されます。』

 

と、いうことで、「.htaccess」ファイルのタイムを増やして、アップしました。

 

12960000秒に書き換え:5ヶ月(150日)です。

 

Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$">
Header set Cache-Control "max-age=12960000, public"
/Files

 

Files ~ ".(css|js|html|gz)$">
Header set Cache-Control "max-age=12960000, public"
/Files

 

 

調べると、表示が速くなった!

 

モバイル ユーザビリティ上の問題が検出されました

 

やっぱり、画像の圧縮の問題じゃなかった!

 

「.htaccess」ファイルをいかに記述するか?

 

あ〜〜、難しいな〜

 

今日は、コレまで ヽ(^o^)ノ m(__)m

 

 

 

 

 

Googleさんの「ビューポートを追加します」説明
https://developers.google.com/web/fundamentals/getting-started/your-first-multi-screen-site/responsive?hl=ja#section

 

 

メタタグに入れるビューポート

 

<meta name="viewport" content="width=device-width, initial-scale=1">

 

全部のファイルに、Googleお墨付きのタグをいれてみる!

 

これで、すっきりとモバイル注意が無くなるとよいですが・・・・

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 


inserted by FC2 system