PertietWebサイトの読み込み速度を上げるため、JavaScriptとcssを最適化する方法を紹介します。削除してください」と表示されます。インライン化とは、小さなコードを外部ファイル化せずにそのまま、HTML文書の一部として埋め込むことです。以下の様なコードがあります。padding:5px;}このような場合、外部ファイル化することでファイルのダウンロードするため余計にネットワークへの負荷がかかります。そのため、以下の様に変更を行いネットワークへの負荷を軽減します。</body></html>これはあくまで小さなコードのみで行える方法であり、数百行もある大きなコードをインライン化するとページの容量が増え、かえってパフォーマンスを落としてしまうため注意が必要です。Insights」が「ページのスクロールせずに見える範囲が大きすぎる」と警告してくれますので、インライン化した後はチェックをしてみて下さい。※今回はcssでのインライン化を紹介しましたが、JavaScriptでも同様の方法でインライン化を行うとパフォーマンスが向上します。コード量を少なくすることです。コード量が少なくなれば、その分容量が減り読み込みが速くなります。下記のサイトを使用すると簡単にコードの圧縮が出来ます。Compressor使い方は簡単で、コードを貼り付けてファイルタイプを選択し、実行するだけです。#00A8FF;background-color:#eee;padding:5px;コードの圧縮を行うと改行などは、削除されてしまうため人間が理解しずらいコードとなってしまいます。容量が減るため、読み込みの速度は向上し、コードが難読化するためセキュリティの観点からも良くなります。コードの保守性は著しく落ちるため保守用に圧縮前のコードを別に管理することをお勧めします。読み込み位置もパフォーマンスに影響を及ぼします。HTML文書は上から順にレンダリング(ブラウザにHTML要素を表示すること)を実行して行きます。以下の図の様にJavaScriptが実行されるとレンダリングを停止させ、JavaScriptの処理が完了した後に再度レンダリングを行って行きます。そのため、あらかたのレンダリングが完了した後にJavaScriptを処理させたほうが、ページの表示速度が早く見えます。cssを最後に読み込ませると、再度HTML要素の装飾を行う必要があるため再レンダリングが発生して画面にHTML要素を表示する時間が遅くなります。直後のどちらかに配置し、cssは<head>の中に記載すると最も効率良くレンダリングが行えます。※上の図では、JavaScriptを<body>の直後に置いていますが、直前でも問題はありません。コメントをキャンセルメールアドレスが公開されることはありません。MyThemeShop。