wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

ワードプレスサイト高速化失敗例(ページスピードスコア低下)→最後にjsで読み込むCSS

      2018/04/05

こんにちは、管理人@SS_mshpです。

今回は、管理人が重いワードプレスサイトを高速表示しようとして、失敗した事例(ページスピードスコアが逆に低下)をお話します。

特にCSSの読み込みに関するチューニングです。実施前・実施後のページスピードスコアもご覧ください。

■CSSで表示速度上がるの?元の表示速度スコアは?

■PageSpeed Insightsで良く出てくるのが、javascriptやCSS

グーグルPageSpeed Insightsで、サイトのページ表示速度を計測したことがある方なら、一度は見たことがあると思います。『コンテンツのレンダリングをブロックする、javascriptやCSS』という点です。

容量が大きいjavascriptやCSSを、ヘッダー内で『link rel=”stylesheet”』みたいな感じ(javascriptはscript type=’text/javascript’ src=”)で読んだときに、『他の文章や画像読み込む前に、そこでつっかかって表示スピードが落ちる』という状況になりやすく、圧縮するとか、非同期にするなどの対策が必要です。

■このサイトの、以前計測したページ表示速度スコア

基本的にワードプレスサイトって重いので、チューニングをしなければ、ページ速度スコア赤信号が出る(SP40点とか)ことが多いです。とりあえずいろいろ削って『SP:71 / PC:77』まで上げました。

10人以上同時にアクセスしてきているときには5点くらい下がることもありますが、だいたいこのくらいです。

■やってみたい対策→CSSを最後に読み込む

このサイトではjavascriptは</body>の手前で読み込むようにしています(たしかSpeed Up – JavaScript To Footer)。

同じような理屈で『CSSを最後に読み込んだら、先に文章が表示されて速いんじゃね?』という単純な理由でやってみることにしました。

■CSSを最後に読み込んだ例と、ページ表示速度スコア

■CSSを最後に表示するのに、javascriptを使ってしまった

普段はヘッダー内に『link rel=”stylesheet”』って書くんですけど、今回はjavascriptを利用して、最後にCSS読み込みしてみました。

ワードプレスでやる場合は、構造上『footer.php』のファイルに、</body>まわりの記述があることが多いと思います。

■javascriptでCSSを最後に読み込んだときの、ページ表示速度スコア

あれ、さっきより下がっていますね。ダメじゃん(笑)

原因としては『javascript読み込み回数が増えた』、『一度レンダリングした後、またCSS読み込んで同じ処理した』みたいなのが考えられます。

■今後やってみたいページ表示速度対策

で、今考えている対策もあります。まずはCSSを圧縮し・・
https://syncer.jp/css-minifier
『CSS Minifier (スタイルシートの圧縮)』


ヘッダー内に、内部記述で<style type=”text/css”> CSS・・・</style>みたいな形で、限界まで圧縮したCSSを書いてやることでしょうか。

確か高速ワードプレステーマのLuxeritas Theme(ルクセリタス)も、テーマの機能でCSSやjavascriptを圧縮&ヘッダーにCSS書いちゃうというような構成だったと思います。
この対策はやってみてうまくいったら、このサイトでみなさんにお知らせいたします。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 -

Message

メールアドレスが公開されることはありません。

  関連記事

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

ワードプレス記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

今回は、ワードプレスの文字を出力する関数についてです。 レイアウトをいじ …

googleカレンダーとメールフォームで、予約受付ってできるの?iframeレスポンシブに気をつけて

今回は、googleカレンダーとメールフォームで、予約受付ページを作って …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …

ワードプレスでデータベースにたまる余計なデータって何があるの?事例と対処方法

今回は、ワードプレスのサイトでよくある『データベースにたまる余計なデータ …

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …

ワードプレスサイトの独自ドメイン解除方法

今回は、以前『ワードプレスに独自ドメインを設定する方法』を書きましたが、 …

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマいじる羽 …

【海外CSSテク・before擬似要素】リストタグのマーカーだけ色・模様を変えて、カラフル・おしゃれにする方法

今回は、CSSをうまく使って、リストタグの見栄えを変えてみます。 よくあ …