ウェブ技術が好きjavascriptやcssやHTML5とかサーバーサイド等のウェブ技術全般を好きに書くブログこの広告は、90日以上更新していないブログに表示しています。SEO写真はうちのみーこ。Insightsで100点を取る方法を説明します。FontsjQueryBootstrapFontAwesome実際にどのぐらい速度に違いがあるのかデモページを設置しました。使っているウェブサーバーはさくらの共有レンタルサーバーです。高速化前https://tkosuga.jp/experimental/pagespeed-unoptimized.html高速化後https://tkosuga.jp/experimental/pagespeed-optimized.htmlリクエスト数が8件から5件に。ページの表示完了速度が1.41秒から0.54秒と38%に短縮されました。スコアも71点から100点になりましたね。速くするために必要な項目を順番に説明して行きます。高速化前のHTMLはCDN経由で3つのCSSファイルを読み込んでいます。安定していて比較的に速い方だと思いますがHTMLのレンダリングをブロックするためブラウザがHTMLを描画するのに遅延が発生します。配信を最適化するを参照して下さい。これを解決するために以下の手順を取ってCSSファイルを最適します。CSSファイルを1つにしてminify(最小化)するNode.jsのタスクランナーgulpを使ってcssを最適化して行きます。2016年夏時点でフロントエンドのビルドと高速化のためにNode.js環境が必須になってきています。代替えするか、gulpを身に着けるのが肝要だと思っています。話が逸れたので戻します。sassをcssにコンパイルしてminifyするスクリプトです。