爆速ホームページ。 阿部寛のHPがヤバ過ぎる件…読み込み速度がcdn.snowboardermag.com越えの爆速!

【爆速】HTML5 + CSS3で簡単にWebデザインしよう!

爆速ホームページ

第101掃海隊ページの表示速度の分析 表示速度分析ツールによる結果 まずは、Googleのを確認してみます。 結果は・・・モバイル・パソコンともに余裕のスコア100 このyokonoji. workもかなり頑張りましたが、モバイル97なので、この時点で「やるな・・・」という感想。 ページのコンテンツが表示されるまでの時間を示す「速度インデックス」は0. 9秒(モバイル)なので、かなり速いのがわかりますね。 GTmetrix による分析結果も見てみましょう。 スコアは悪くないですよ! RECOMMENDATION(勧告)を見てみると・・・? これはいけませんね!画像のキャッシュが効いていないようです。 実際、HTTPレスポンスを見てもキャッシュの指示をしている様子はありません。 しかし、ChromeやFireFoxの検証ツールで確認した感じではキャッシュされていましたので、ブラウザが良きようにやってくれているのかもしれません。 とりあえず問題はないみたいです。 それよりも気になるのが、6つのgif画像。 下図の赤部分がjpgで、黄色部分がgifです。 そのボタン、gifだったんだという感じです。 このボタン、1つ約1. 5KBなので6つで9KBくらいあります(ちなみにjpgの方は、上から2. 4KB, 29KB, 13. 8KB)。 ここについては、軽量化を徹底してテキストでメニュー表示している阿部寛のホームページと比べるとマイナス点です。 課題は見つかりましたが、これは伸びしろですねぇ。 ブラウザ検証ツールから見えてきたこと PageSpeed InsightsやGTmetrixに頼りすぎるのも面白くないので、Chromeの検証ツールを使って自分でも課題発見を行いました。 シンプルすぎる Response Headers・・・。 これはgzipされていませんね(gzipはファイルを圧縮してデータサイズを小さくしてから転送する仕組みです)。 というサイトでgzipされているかチェックしてみると、ほらやっぱりされてない。 gzipしたら61. ものになっていた。 ちなみに、ディレクトリを見てみるとbotann名前で、お茶目な一面を知ることもできた。 爆速のためのソースコード ソースコードを見てみると、スタイルはインラインで記述されているのがわかる。 そのため、CSSの外部ファイル読み込みは行われていない。 これにより、HTTPリクエストが減るので表示が速くなるというわけだ。 細かなところにも爆速表示への配慮が見られる。 字数を減らすために、タイトルすら記述しない徹底ぶりである。 そして、気になる部分・・・ 選択している箇所なのですが、スペースを入れて「第101掃海隊」と「welcome to~」を左右に配置しています。 余計なスタイルを当てるより、この方法の方が効率的ということですな。 第101掃海隊 welcome to 101MD minifyもされていないのは、残念なところです。 要改善点の整理と結果 ここまでの調査で分かった、改善したい点。 ボタンのgif画像を読み込まない• gzipする• minifyする 画像をで圧縮をすると、33%もデータサイズを小さく出来たりするのですが、画像は表示クオリティを求める場合もありますし、今回は勘弁してあげます。 そういうわけで、上記3つの改善を行ってみました。 メニューは貧相になりましたが、爆速な表示速度のためならやむなし。 結果、元々速かったパソコン表示での結果ですが、0. 1秒ほど改善されました!! リンクなどの操作をしてからブラウザが表示開始するまでの時間()は、130ミリ秒から20ミリ秒まで大きく改善されています。 待たすことなく表示開始するため、体感的に良い印象を与えられるでしょう。 改善により、素晴らしい結果が得られたと言えます。 まとめとあとがき 冗談交じりに海上自衛隊「」のページの表示速度を分析してみましたが、これだけシンプルなページだと、何をしようとも雀の涙でしたね。 1秒の改善とかどうでもいい・・・。 デザインの方は、第101掃海隊の方が独自に作られているのでしょうか?上のディレクトリにある海上自衛隊のページは、とても今風ですのに。 mod. html 今回、第101掃海隊のページをじっくり見ることが出来た機会となり、良かったです。 海中の機雷を排除する「」という存在を知ることが出来ましたし、機雷は安価で破壊力が大きいという脅威の武器であることも知りました。 また、『東日本大震災や平成30年7月に発生した西日本豪雨の際は、給水や物資輸送など災害派遣に従事しています。 』このような一文もあり、私の知らないところで日本を守ってくれているんだなぁと思いました。 活動を知ってもらうって、とても大事! 海上自衛隊の中でHTML, CSSとか出来る人いたら、良い感じに仕上げてあげてほしいな~ 表示速度はSEOにも影響を与えるものなので、あまり考えたことなかった方はちょっとだけでも意識してみてください。 「標準フォント游ゴシック(Yu Gothic)をWebサイトで使うことを検討しました」にて、Googl[…]• クラウドワークスにて、1つの画像に複数のリンクを設定したいとのご要望をいただきました。 そういう画像を見[…]• この記事は、CSSの animation プロパティの使い方についてまとめています。 CSSアニメーシ[…]• 記事間のリンクのつながりを確認したくて調べてみると、「Show Article Map」というWord[…]• ページ読み込み時間の短さはユーザーにストレスなく閲覧してもらうために必要なことですが、画像や動画などの[…].

次の

ホームページを爆速で作成・公開した話

爆速ホームページ

Twitter見てたら、以下のツイートを見た。 数時間後、というブログがTLに現れた。 GoogleのPageSpeed Insightsで測って阿部寛のホームページの方が早かったという結論付けてよいのかという疑問が浮かび、webpagetest. orgで計測することにした。 設定 阿部寛のホームページに関しては、Tokyoリージョンにあるものとする。 そして、dev. toはNY発らしいので、サーバーの設定をNYにして測定する。 The platform was created in 2016. The twitter account, ThePraticalWeb 評価結果 阿部寛のホームページ サーバーからのレスポンスの圧縮がされておらず、イメージも圧縮されていない。 さらには、キャッシュの利用も圧倒的にダメである。 dev. to これはすごい。 キャッシュの利用こそFであるが、画像の圧縮もCまでに伸びているし、CDNの利用も効果的な模様。 見ての通り、パフォーマンスに対しての工夫はdev. toの方がすばらしい評価を受けている。 速度指標比較 指標 阿部寛のホームページ dev. to 読み込み速度 0. 313秒 2. 717秒 ファーストバイト 0. 109秒 0. 291秒 レンダー開始 0. 133秒 0. 907秒 スピードインデックス 257 908 フィルムストライプビューでディテールを見よう 見よ、0. 3秒の速さで頭部が映し出されたと思った刹那、0. 4秒ですべて表示完了していることがわかるだろう。 対して、dev. toは0. 4秒経過どころか、 倍の0. 8秒経過しても、一切なにも表示されていない状況だ。 結論 阿部寛のホームページは改善の余地が多くあるにも関わらず、dev. toよりも圧倒的に読み込みが早い。 Web制作の現場の皆さま、Webpagetest使いこなしましょう。 リンク•

次の

【爆速HP】阿部寛 超えと噂の海上自衛隊「第101掃海隊」のホームページの表示速度を分析してみた

爆速ホームページ

第101掃海隊ページの表示速度の分析 表示速度分析ツールによる結果 まずは、Googleのを確認してみます。 結果は・・・モバイル・パソコンともに余裕のスコア100 このyokonoji. workもかなり頑張りましたが、モバイル97なので、この時点で「やるな・・・」という感想。 ページのコンテンツが表示されるまでの時間を示す「速度インデックス」は0. 9秒(モバイル)なので、かなり速いのがわかりますね。 GTmetrix による分析結果も見てみましょう。 スコアは悪くないですよ! RECOMMENDATION(勧告)を見てみると・・・? これはいけませんね!画像のキャッシュが効いていないようです。 実際、HTTPレスポンスを見てもキャッシュの指示をしている様子はありません。 しかし、ChromeやFireFoxの検証ツールで確認した感じではキャッシュされていましたので、ブラウザが良きようにやってくれているのかもしれません。 とりあえず問題はないみたいです。 それよりも気になるのが、6つのgif画像。 下図の赤部分がjpgで、黄色部分がgifです。 そのボタン、gifだったんだという感じです。 このボタン、1つ約1. 5KBなので6つで9KBくらいあります(ちなみにjpgの方は、上から2. 4KB, 29KB, 13. 8KB)。 ここについては、軽量化を徹底してテキストでメニュー表示している阿部寛のホームページと比べるとマイナス点です。 課題は見つかりましたが、これは伸びしろですねぇ。 ブラウザ検証ツールから見えてきたこと PageSpeed InsightsやGTmetrixに頼りすぎるのも面白くないので、Chromeの検証ツールを使って自分でも課題発見を行いました。 シンプルすぎる Response Headers・・・。 これはgzipされていませんね(gzipはファイルを圧縮してデータサイズを小さくしてから転送する仕組みです)。 というサイトでgzipされているかチェックしてみると、ほらやっぱりされてない。 gzipしたら61. ものになっていた。 ちなみに、ディレクトリを見てみるとbotann名前で、お茶目な一面を知ることもできた。 爆速のためのソースコード ソースコードを見てみると、スタイルはインラインで記述されているのがわかる。 そのため、CSSの外部ファイル読み込みは行われていない。 これにより、HTTPリクエストが減るので表示が速くなるというわけだ。 細かなところにも爆速表示への配慮が見られる。 字数を減らすために、タイトルすら記述しない徹底ぶりである。 そして、気になる部分・・・ 選択している箇所なのですが、スペースを入れて「第101掃海隊」と「welcome to~」を左右に配置しています。 余計なスタイルを当てるより、この方法の方が効率的ということですな。 第101掃海隊 welcome to 101MD minifyもされていないのは、残念なところです。 要改善点の整理と結果 ここまでの調査で分かった、改善したい点。 ボタンのgif画像を読み込まない• gzipする• minifyする 画像をで圧縮をすると、33%もデータサイズを小さく出来たりするのですが、画像は表示クオリティを求める場合もありますし、今回は勘弁してあげます。 そういうわけで、上記3つの改善を行ってみました。 メニューは貧相になりましたが、爆速な表示速度のためならやむなし。 結果、元々速かったパソコン表示での結果ですが、0. 1秒ほど改善されました!! リンクなどの操作をしてからブラウザが表示開始するまでの時間()は、130ミリ秒から20ミリ秒まで大きく改善されています。 待たすことなく表示開始するため、体感的に良い印象を与えられるでしょう。 改善により、素晴らしい結果が得られたと言えます。 まとめとあとがき 冗談交じりに海上自衛隊「」のページの表示速度を分析してみましたが、これだけシンプルなページだと、何をしようとも雀の涙でしたね。 1秒の改善とかどうでもいい・・・。 デザインの方は、第101掃海隊の方が独自に作られているのでしょうか?上のディレクトリにある海上自衛隊のページは、とても今風ですのに。 mod. html 今回、第101掃海隊のページをじっくり見ることが出来た機会となり、良かったです。 海中の機雷を排除する「」という存在を知ることが出来ましたし、機雷は安価で破壊力が大きいという脅威の武器であることも知りました。 また、『東日本大震災や平成30年7月に発生した西日本豪雨の際は、給水や物資輸送など災害派遣に従事しています。 』このような一文もあり、私の知らないところで日本を守ってくれているんだなぁと思いました。 活動を知ってもらうって、とても大事! 海上自衛隊の中でHTML, CSSとか出来る人いたら、良い感じに仕上げてあげてほしいな~ 表示速度はSEOにも影響を与えるものなので、あまり考えたことなかった方はちょっとだけでも意識してみてください。 「標準フォント游ゴシック(Yu Gothic)をWebサイトで使うことを検討しました」にて、Googl[…]• クラウドワークスにて、1つの画像に複数のリンクを設定したいとのご要望をいただきました。 そういう画像を見[…]• この記事は、CSSの animation プロパティの使い方についてまとめています。 CSSアニメーシ[…]• 記事間のリンクのつながりを確認したくて調べてみると、「Show Article Map」というWord[…]• ページ読み込み時間の短さはユーザーにストレスなく閲覧してもらうために必要なことですが、画像や動画などの[…].

次の