はじめに
どーも、python大好きな終末プログラマ(自称)です。
私みたいな初心者がこんなテーマを論じていいのか不安ですが、備忘録も兼ねて書きたいと思います。
前回の投稿の通り、友人が飲食店をオープンしたのでbootstrapのテンプレートをこちょこちょいじってサイトを作ってあげたのですが、中身が大体完成したので公開に向けてgoogleさん対策でPageSpeed Insightsなどでいろいろ調べてみました。
ineのurlスキームで簡単な注文システムを作ってみた
今回は、HTMLとJavascript,cssしか使ってませんので、私が普段独自ドメインのメールサーバーとして使っているさくらのレンタルサーバー（ライト）で運用する予定なのでこの条件でテストしました。
お気づきの点があればどんどんご意見ください(^o^)/
webサイトの診断サイト
今回使ったのは下記のサイトです
PageSpeed Insights
googleの診断サイトです。今回はこのサイトの診断結果に対して改善していきました
https://developers.google.com/speed/pagespeed/insights/
gtmetrix
こちらも有名ですね。今回は点数をみるために使用しました
https://gtmetrix.com/
https://website.grader.com/
こちらは表示スピードの改善以外にも、META DESCRIPTIONの記載があるか、サイトマップはあるか、SSLの有無なんかも教えてくれます。
https://www.woorank.com/
有料ですが無料期間があります。めちゃくちゃ詳しく診断してくれます。月＄49は高いですが、フリーのウェブデザイナーさんならいいかも。
PageSpeed Insights
とりあえず診断してみた。
(参考)gtmetrix
ほぼテンプレなんでまあこんなもんでしょ。
提案内容を改善していく
こんな感じです。
それでは「修正方法を表示」を参考に改善していきましょう。
画像を最適化する
たぶん一番簡単に改善できるんじゃないでしょうか。
https://tinypng.com/
指摘されている画像を圧縮します。
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
これは最初にみえるページ（ファーストビュー）を表示する際に、cssやjavascriptファイルを読み込みしてるから遅くなるのを改善してねっという指摘です。
Javascriptは比較的簡単に改善できます。非同期でファイルを読み込むようにします。
https://developers.google.com/speed/docs/insights/BlockingJS
<script async src="my.js">
cssはインラインにすればいいとのことですが、テンプレからインラインにするのは手間だし楽しくない作業なんで放置することにしました。(放置するのかよ！)
https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery
圧縮を有効にする
cssやJavascriptのファイルを圧縮します。
https://developers.google.com/speed/docs/insights/EnableCompression
いろいろ調べた結果、mod_deflateを使うことにしました。
パーミッションに注意し.htaccessファイルを作って下のサイトの内容をコピペ
https://httpd.apache.org/docs/2.0/ja/mod/mod_deflate.html
表示スピードが若干ですが改善されてました。
しかし、これはサーバー側で圧縮してるのでアクセスがたくさん来たときにどうなるかはわかんないなー。
ブラウザのキャッシュを活用する
https://developers.google.com/speed/docs/insights/LeverageBrowserCaching
mod_expiresを使いました。下のサイトを参考に.htaccessに追加
http://www.webdesignleaves.com/wp/htmlcss/217/
HTML 、css、Javascriptを縮小する
コメントや改行などを削除します。
下のサイトが便利でした。
http://minifycode.com/
改善結果
ページ表示速度:2.8s→1.4s
たまたまかもしれませんが、表示速度が半分になりました。
サーバーへのアクセス具合によって速度が変わってくるので、結果を過信できませんがかなり改善されました。
cssを放置しなければもっと改善できるんだろーなー。
改善してみて
- 改善する度に点数があがって速度があがるのは楽しい
- 自分でサイトを作るときはファーストビュー（今回は最近多い縦長のサイトだったのページの上の方）で必要なcssはインラインにしよう
- ファーストビュー以外の画像をLazy Loadで後から表示するのもアリな気がする
- 今回はHTMLの静的サイトだけどwordpressとか使うときは改善するのめんどくさそうだなー
- いろいろ調べてて、「seoに自信あり！」とか書いてる制作会社の会社ページが5点(表示速度も遅い)でweb業界の闇をのぞいた気がした
おわりに
まあこんなもんかなーという感じです。
公開するまでにfaviconつくったり、独自ドメインの設定したり、サイトマップやgoogle analysis設定したり、クロール依頼したりといろいろすることあるなーと他人事のように思ってます。
確かにサイト作るのってデザインは当然ですがいろいろやることあるから、製作会社に頼んだら結構な金額とられるのも理解しました。
（参考）
WordPressサイトを構築するといくらかかる？ 見積り勉強会で価格を出してみた
お客さんの予算もあると思うけど、ぶっちゃけ素人のお客さんにはサイトの表示速度なんてわからないし、そこまでやってくれる制作会社ってどれくらいあるんだろう？
まあ、自分の会社サイトで速度出てないとこは、対策してくれないんだろーなーと漠然と思いました。
お気づきの点があればどんどんご意見ください(^o^)/