<script> タグに async / defer を付けた場合のタイミング - Qiita
HTML5 においては、<script> タグに、defer や async 属性を付与することで、これらの読込が HTML パースを妨害しないようにすることができます。これにより、サイトのメインコンテンツの読込がある程度高速化されます。 async にせよ defer にせよ、それほど詳細に動作を解説した記事が見つかりませんでしたので、本記事では、これらの動作について解説します。 イベントについて まずは、async と defer の挙動を理解するために重要な、2つのイベントについて理解しましょう。 両者とも、MDN に十分な情報があるため、本記事ではそれほど詳細には解説しません。 DOMContentLoaded HTML のパースが完了した直後に発火します。 MDN load HTML のパースが完了し、CSS や画像などのダウンロードと表示、JavaScript ファイルのダウン
【WordPress高速化日記】アイコン画像の表示をdata URI schemeで高速化 – 旧・中川勉社会保険労務士事務所FPウェブシュフ
サイトを制作していると、ソーシャルボタンをはじめ結構な数のアイコン画像を使いますよね。でも、アイコンの種類が増えてくると、画像ファイルの呼び出し回数が増えてページの表示が遅くなります。これを改善する方法の一つがdata URI schemeです。 画像が多いとなぜ遅くなるのか ウェブページは、そのページを閲覧している端末からHTTPリクエストを受けたサーバーが、要求されたデータをHTTPレスポンスとして各端末に返すことで表示されています。 画像の枚数と同じ回数のHTTPリクエストが必要になります。 そのうえ画像が増えるとサーバーから受け取るデータ量も増加します。 つまり画像が増えるとページの表示速度がダウンするのです。 ページを軽くするには ページを軽くする対策は以下の二点から考えなければいけません。 サーバーから呼び出す画像の枚数を減らし、HTTPリクエストの数を減らす。 サーバーから呼
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと | 株式会社LIG(リグ)｜DX支援・システム開発・Web制作
Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと こんにちは、ライターのモリイです。 Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。 たかがページの読み込み時間、と侮ることはできません。 読み込み時間が短くなることで、 Googleに評価される。 ユーザーにストレスをあたえない。 というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。 ページの読み込みスピードを分析してみる 画面中央のフォームにサイトのURLを入力し、「分析」をクリック
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
たった数分！ページ高速化のためhtaccessでキャッシュ設定は絶対やっておこう！
