Policyお問い合わせContactnoteもやってます。2019年の出生数90万人割れ、日本の少子化止まらず時事ビットマスターが破産。自主退職認めず時事ワイドナショーの読解力テストを解説(ドミニカとデンプンの問題)Twitter(ツイッター)活用Twitter(ツイッター)表示がおかしい。水曜日のダウンタウン、説一覧ホームブログ運用テクニックSEOページ速度を計測。Insightsの使い方ページ速度を計測。Insightsの使い方SEOページ速度を計測。2019.05.07この記事は約6分で読めます。はてなブログを使ってる人、ページの表示が遅いなーと思いません?ブログを書きながら書く→プレビューを確認→書く→プレビューを確認・・・を繰り返すんですが、プレビューの表示がもっさりしてるんですよねー。更新が完了したら、パソコンで表示を確認、スマホでも確認。これもやっぱり表示が遅い。ページの表示速度を計測できるGoogleの公式ツールです。Insightsの使い方は簡単。「分析」ボタンをクリックするだけ。Insightsは「サイト」単位ではなく「ページ」単位での分析をしてくれます。「ウェブページのURLを入力」にトップページのURLを入れればトップページの計測をしてくれます。記事のページのURLを入力すれば、その記事ページの計測をしてくれます。以下のように何パターンかで計測してみるといいでしょう。トップページ画像が多めのページ画像が少なめのページ評価は100点満点すると、モバイルとパソコンで表示した時のスコアを100点満点で評価してくれます。パソコン90~100点は「速い」50~89点は「普通」49点以下は「遅い」わたしのサイトはモバイルで25点。25点といえば、ページの読み込みが遅すぎて1行も読まずにユーザーが離脱するレベルです。(※サイト移転前のはてなブログ時代の話です。現在はWordpressに移転して速度問題は改善しました)改善できる項目さすがは天下のGoogleさん。Insightsは、ページの表示速度を計測してくれるだけではありません。どこを改善すれば表示速度が上がるのかアドバイスをしてくれます。画像ファイルといえばjpg・png・gifなどのフォーマットが有名です。XR、WebPというものが出てきました。この新しい形式の画像ファイルたちは従来の物より容量が小さいです。ファイルサイズが小さいということは転送時間がかからない、ページの表示が速くなるということです。残念なことに次世代フォーマットの画像ファイルには互換性の問題があります。XRはIEとEdge専用(Microsoft)WebPはChromeとFirefox専用(Google)本当は専用という訳ではないんですが、技術的もしくは商業的な理由により、SafariもChromeもFirefoxもライバル企業の開発したファイルフォーマットには対応していません。XRもWebPも実質的に各社のおかかえブラウザ専用になっています。うっかりJPEG2000などで画像を作ってしまうと、世の中の半分の人には画像が表示されるけど、残りの半分にはブログの画像がまったく見えていない。そんな状況がありえます。Insightsさんに「次世代フォーマット」の画像を使うようにおすすめされても無視しましょう。従来のjpgやpngのままで画像ファイルのサイズを小さくするテクニックもあります。Squooshを使うと従来のJPGやPNGのままファイル容量を劇的に削減できます。ブロガー必須のツールです。Squooshで画像を圧縮する方法Webサイトが遅いのはだいたいが画像のせい。ブロガーなら画像の圧縮は必須のスキルと言っても過言ではありません。オフスクリーン画像の遅延読み込みこれはLazyloadといわれるテクニックです。読み込み中のLoading画像たとえば、このようなLoading画像を表示させておいて、後から本物の画像に置き換えます。Lazyloadの効果たとえば、1つの記事に1MBの画像を10枚使っているとします。すると、10MB分のデータを受信完了するまでページが表示されません。スマホで10MBを表示しようと思ったら10秒くらい待たされます。10秒待ってブログの記事が表示されたとき、実際に最初の画面で必要なのは1つ目の画像だけだったりします。残りの画像は画面の外、スクロールしてその画像の位置にくるまでは不要なわけです。それならば、1つ目の画像だけ受信して、残りの9個は無視。することで最初の画面が表示されるまでの待ち時間を1秒に短縮する。それがLazyloadの効果です。無視した9個の画像は、画面をスクロールして画像の位置が近づいて来たタイミングで初めて読み込みます。まとめページの表示が遅いとユーザーが離脱する原因になります。Insightsでスコアを計測。スコアが90に届かない人は以下の対策をしてみましょう。画像を圧縮Lazyloadの導入この2つをやっておけば、ある程度はスコアが改善します。画像の圧縮にはGoogleがリリースしたSquooshというサービスがおすすめです。Squooshで画像を圧縮する方法Webサイトが遅いのはだいたいが画像のせい。ブロガーなら画像の圧縮は必須のスキルと言っても過言ではありません。Googleが運営しているSquooshというサイトが超絶優秀な...u-ff.com2019.05.08お知らせ最後までお読みいただきありがとうございます。この記事は参考になりましたか?気に入ったらツイートしてねTweetはてなブックマークはこちらからモザイクは解析できる。画像から安全に個人情報を消す方法ブログ高速化に必須。コメントをキャンセルメールアドレスが公開されることはありません。*サイト次回のコメントで使用するためブラウザーに自分の名前、メールアドレス、サイトを保存する。プロフィール編集長にゃんぷん検証系の記事が得意なブロガー。気になることは片っ端から調べる。調べたことはメモを兼ねて記事にしています。まとめ】第二次世界大戦(WW2)の国別死者数(犠牲者数)と激戦地一覧2019.08.152019.09.29誤審連発、サッカー日本代表vsカタール、疑惑のレッドカード&疑惑のPK2020.01.16Twitter(ツイッター)表示がおかしい。分間待ってやる.タイトルとURLをコピーしました。