BLOG(ハイズスタジオブログ)MENUCLOSEオススメネタレビューテクノロジーニュースビジネスライフお問い合わせLINE友だち追加でお得な商品、掘り出しPCやクーポン情報をGETしよう!!症状等の質問等の対応につきましては、有償の方を優先で対応させていただきます。無償の場合、対応できないことがございますのでご了承ください。studioのホームページが公開されました。みなさんも一度は見て頂けたかと思いますが、如何せん表示が遅い。これは前から気になっており、やろうやろうと思っていたら新年を迎えてしまいました...ちょっと手が空いたので、高速化することにしました。ページが完全に表示されるまで約13秒。この13秒が致命的なんです。「どうしても見たい」という思いがなければ待てないと思います。13秒→3秒以内へ持っていく事が目標とします。13秒もかかってしまうのか。外部取得のファイルがある為この3点が遅延の原因です。1の「画像サイズが大きい」は画像サイズを小さくするか、圧縮率を上げてファイルサイズを下げれば解決できます。(ちょっと時間が掛かるから。)2の「CSS・jsファイルが多い、サイズが多い」は確かに多いです。この2種だけでも10ファイル以上あります。ファイル数を減らすことはせず、ファイルサイズを下げることにしました。簡単に言うと、余分なインデント・改行・コメントを無くしてファイルサイズを下げる方法です。Compressor」を使用してCSS・jsファイルを圧縮しました。Compressor1ファイル当たり30%の圧縮に成功!これだけでもトータル200MB以上軽くなり、表示速度も・・・0.8秒位早くなりました。それでもまだ12秒台です。3の「外部取得のファイルがある為」は、おそらくWEBフォントが原因です。手っ取り早くWEBフォントを取得しに行かせてました。そのため遅延が発生していたんです。こいつが80%以上の原因です。そこで、必要なフォントだけを使用(サブセット化)することにしました。フォントもダウンロードすることで遅延をさらに減らします。FONTS」という無料で商用利用OKのフォントです。このサイトにサブセット化出来るページがあるます。これで入力されたものだけダウンロード出来ます。あとはCSSで「@font-face~」と記述すればOK!上記の2と3だけをやった後、完全に表示されるまでどのくらいかを計測したところ。約4秒!劇的に早くなりました!あと1秒程度早くしないといけないのですが、これは1の画像サイズを下げればクリア出来そうですね。LINE@にて症状等の質問等の対応につきましては、有償の方を優先で対応させていただきます。無償の場合、対応できないことがございますのでご了承ください。制作環境が整いつつある!スポンサーリンクLINE@はじめました!!LINE友だち追加でお得な商品、掘り出しPCやクーポン情報をGETしよう!!症状等の質問等の対応につきましては、有償の方を優先で対応させていただきます。無償の場合、対応できないことがございますのでご了承ください。