忍者ブログ

とちにすいはら式+

痒いところに手が届かない雑記ブログ。お金とDTMの話が多め

近未来的音楽素材屋3104式
↑音楽素材はこっち↑

とちにすいはら式+

モバイルフレンドリー度をチェックするTest how mobile-friendly your site isが便利!

1.はじめに

「Test how mobile-friendly your site is」という、Googleの新しいツールを試してみました。

Test how mobile-friendly your site is

ウェブサイトがモバイルフレンドリーかどうかは、Googleの別ツールでもあるPageSpeed Insightsでチェックできました。 基本的にはこれと似たような機能を持っているようです。

2.Test how mobile-friendly your site isの使い方

「Enter your website URL」というボックスに任意のウェブサイトのURLを入れるだけです。 あとは勝手にチェック機能が走り、結果が表示されます。

少し待つと結果が表示されます。

結果は、

  • MOBILE FRIENDLINESS
  • MOBILE SPEED
  • DESKTOP SPEED

の3項目で評価され、それぞれでスコアが表示されます。 100点に近いほどよく、そこから減点方式です。

MOBILE FRIENDLINESSは、ウェブサイトがスマホなどの表示画面にきっちりあっているかという評価です。 フォントサイズが小さすぎて読めない場合などには減点されます。

MOBILE SPEEDとDESKTOP SPEEDは表示速度の計測です。 表示が遅いほど減点されます。

外部のプラグインをべたべたウェブサイトに貼っていると、この項目が低くなることはよくある話です。 また、画像が無駄に容量が大きすぎたりしても減点になります。

思えば、最近JPEGやPNGの間引きをしないで画像を貼ってるのでちょっとスコアが酷いです汗

その他、無料の評価レポートももらえるようですが、現時点ではこの機能は良くわからないです。

3.ページ表示が遅い!!

というわけで、このブログを試しに表示させたら、スコアが約60点という状況に! さすがにこれは憂慮すべき遅さかもしれません。

MOBILE SPEEDの項目をチェックすると、このブログの表示の遅さを改善する方法は以下の2つが影響が大きいようです。

  • Leverage browser caching(ブラウザキャッシュの利用)
  • Eliminate render-blocking JavaScript and CSS in above-the-fold content(表示をブロックするスクリプトやCSSの除去)

このうち後者については、他のツールを利用して、どのスクリプトやCSSが時間を食っているかチェックすることが出来ます。 筆者が知っているのは、GTmetrixです。

GTmetrix

GTmetrixもTest how mobile-friendly your site is同様にEnter URL to AnalyzeのボックスにURLを入力すると、ウェブサイトのチェックが始まります。 少々時間がかかりますが、その後にWaterfall Chartと呼ばれるリストで、事細かに処理に要した時間をチェックできます。

実際試してみると、http://x4.rakugan.com/ufo/070281400とhttp://img.omni7.jp/af/af_statcont/js/import.jsのアクセスにやたら時間がかかっていることがわかります。 前者は忍者のアクセス解析、後者はセブンアフィリエイトのスクリプトです。

というわけで、これらを除いて再度Test how mobile-friendly your site isを使ってみたところ、デスクトップ側のスコアが10点程度改善しました。

モバイル側は改善しなかったんですけど、どなたが悪さしているんでしょう?

4.おわり

というわけでTest how mobile-friendly your site isのご紹介でした。

一応、レスポンシブでモバイル対応はさせてはいるのですが、基本がデスクトップサイト仕様なので、ちょっと手を入れようかなと思う次第です。 どうしてもPCユーザーよりモバイルユーザーのほうが直帰率が少し高くなるんですよね。

例えば、リンクボタンの押しやすさとか見直すべきな気がしてきました。

あまり装飾しすぎると、今度はCSSが重くなってしまいそうですが。

関連記事

最終更新:2016/06/04

拍手[0回]

24時間の無料捨てアドサービス「sute.jp」が便利!


1.はじめに


ウェブサイトを作ってると、何かをダウンロードするためにメールアドレスの入力を促されるサイトが多いことに気づきます。

特に、「メールアドレス入力するとPDFプレゼントするよ」系のネタは、その後のメールマガジンラッシュがうざくてぶち切れそうになったりするもの。
というわけで、目的のPDFやその他ファイルだけをもらうつもりなら、完全に捨てる前提のメアドを利用するのがが便利です。

というわけで、24時間後に自動で捨てられるメールアドレスサービスsute.jpが便利そうです。
 

2.sute.jpとは


sute.jpは手間のかからない捨てアド取得サイトです。
ボタン1つクリックするだけ、xxxxxx@sute.jpというアドレスを作成可能です。

@マーク前のxxxxxx部分は、デフォルトでランダムな文字列が入力されているので、何も考えず「メールアドレスを作成する」とクリックするだけです。

送信先は同じドメイン(@sute.jp)にしか送れないようです。
ので、基本は受信専用アドレスになるかと思います。

また、@マーク前の文字列で、誰でも他人のメールボックスにログインできてしまう特徴がありますので、受信ボックスはパスワードの保護をしない限り、別のユーザーに中身を見られる可能性があります
プライバシーにかかわる内容を扱うときには、必ずパスワードでのロックをかけてください。

3.おわり


その他、これといって書くことが無いので終わりです(;´∀`)

suteは24時間しか利用できないため、もっと長く使う場合には別のサービスを利用します。例えば、1ヶ月使える捨てアド「2chメール」を使ってみた!で紹介した2chメールは、最終アクセスから1ヶ月と、捨てアドの割には長いのが特徴的です。

関連記事


擬似タグ : /オンラインサービス | /捨てアド | /個人的メモ

拍手[2回]

オンライン上のJPG画像圧縮ツール「Media4x」が便利!


1.はじめに


PageSpeed Insightsなどを利用して、ウェブサイトの読み込み高速化を試していると、「画像のサイズを小さくしましょう」とアドバイスされることがあります。
加えて、無料のレンタルサーバーや、この忍者ブログのような無料のツールはサーバー容量が小さめなので、あまり大きな画像をぼんぼん上げることができません。

そんな時に、オンライン上の画像圧縮ツール「Media4x」が便利なのです。

2.Media4xってどんなサービス?


JPEGやPNG、PDFを圧縮するオンライン上のサービスです。
変わったところでは、CSSファイルも圧縮してくれるみたいですね。

ドラッグ&ドロップで画像を放り込むと、なんらかの設定なしに画像を最適なサイズに圧縮してくれます。
複数枚を一気に放り込んでもOK。
処理後に「DOWNLOAD ZIP」ってボタンをクリックすると、最適化した画像を格納したZIPファイルが落ちてきます。

冒頭の図では、実際試したときの圧縮率も載っています。
「-79%」という圧縮率が出ていますが、撮ったままの画像を放り込むと、だいたい元の画像サイズの半分ぐらいになります。

3.実際比較してみた


というわけで、上記の-79%を記録した画像と、その元画像を掲載します。
まずは、元画像です。


あまり被写体として面白みのない画像ですみませんw
昨日、山形新幹線の車窓から撮ったものです。

Memo Padで撮ったものを、Zoner Photo Studioで画像をブログサイズに切り詰めています。
ディスク上のサイズは80kbです。

以下は、Media4xを通した画像です。


ぱっと見、違いはよくわからないと思いますが、画像サイズは20kbまで圧縮されています。
私は、その手のプロの人ではないので、この画像でも十分満足です。

4.画像サイズを小さくしてやると何かいいことあるの?


上述の通り、サーバー容量制限とかを気にする時や、読み込み高速化に効果がでます。
携帯キャリアの回線は有線より速度が出ないので、モバイルユーザーに優しいです。

特に「××日で××kb超えると通信速度制限するよ」って端末を使っているユーザーに優しいです。

そう、私のGL10Pのように
これ、うかつに制限越えるとホント速度でないからね。
3日間ほとんどネットつながらない感じになって泣きたくなる笑

5.おわり


というわけで、私の管理するサイトでは早速施策中です。
わずか数10kbの違いですが、基本早いに越したことは無いです。


なお、PageSpeed Insightsで速度測ると、表示速度の足をひっぱるのって大抵外部サービスが原因だったり。
ボトルネックになってる部分をどうにも出来ないのがネックなことも。

関連記事


24時間の無料捨てアドサービス「sute.jp」が便利!
色覚障害でウェブサイトはどのように見えるのか
XMLファイル形式のサイトマップを作るウェブサービス
イーモバイルのGL10Pを使ってみた

擬似タグ : /オンラインサービス | /画像圧縮 | /個人的メモ

拍手[0回]

スポンサーリンク

PR

ブログ内検索

記事書いてる人

運営者:
さいれほ@planet_f108
3104式の中の人。
音楽以外にはお金の話が好き。資産運用もやってるよ。


ついったー

お問い合わせフォーム

筆者の知識や経験であなたの力になれますか?

必要事項をご記入の上、送信ボタンをクリックすると、運営者宛にメールが送信されます。

ブログ内リンク

レビュー・改造系記事まとめリンク レビュー・改造系記事まとめリンク
PC・トイカメラなどのレビュー記事リストです。

DTM機材レビュー記事まとめリンク DTM機材レビュー記事まとめリンク
DTM機材に関するレビュー記事リストです。

クラブ関連記事まとめリンク集 クラブ関連記事まとめリンク集
音楽を流すクラブにいってきた話まとめ。

トラブル・お悩み解決系記事まとめリンク トラブル・お悩み解決系記事まとめリンク
ソフトのインストールなどで躓いた記事リストです。

サイト作り系まとめリンク サイト作り系まとめリンク
サイトのアクセス増、ユーザビリティに関する記事リストです。

忍者ブログカスタマイズまとめリンク 忍者ブログ運用術から収益化まで
忍者ブログ運用術から収益化までをまとめた記事リストです。

雅楽の舞改めポーチュラカリア成長記事まとめリンク 雅楽の舞改めポーチュラカリア成長記事まとめリンク
2011年から育てている雅楽の舞に関する記事リストです。

とちにすいはら式+アクセスアップ経過記録まとめリンク とちにすいはら式+アクセスアップ経過記録まとめリンク
本ブログのアクセス推移を記録した記事リストです。

お金持ち本まとめリンク お金持ち本まとめリンク
筆者が読んだお金持ち本あれこれまとめリンク。

無職関連の記事まとめリンク 無職関連の記事まとめリンク
無職関連の記事リストです。

スマホでUSENの記事まとめリンク スマホでUSENの記事まとめリンク
スマホで使える有線放送まとめ。データ量も測ってみました。

最新コメント

[11/14 管理人]
[11/11 鈴木隆夫]
[01/20 かんりにん]
[01/20 シモハチ]
[04/03 かんりにん]

フリーエリア

QRコード

とちにすいはら式+

サイトご利用上の注意

ブログ記事の著作権はとちにすいはら式+にあります。 引用される際には、必ず引用元として弊ブログのURLも記載していただくようお願いいたします。 記事の一部もしくは全ての無断転載はご遠慮ください。

記事を参考にされる際には、自己責任にてお願いいたします。