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書いちゃうというような構成だったと思います。
この対策はやってみてうまくいったら、このサイトでみなさんにお知らせいたします。

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


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

Message

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

  関連記事

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もS …

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

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

【ワードプレスサイト製作】レスポンシブ左右ボックスとaudioで、音楽素材サイトを作る

今回は、ワードプレスを利用して、新しいサイトを作ってみたときの話題です。 …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタ …

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

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

ワードプレス・手動インストールってどうやるの?(自動インストールがない、あるいはエラーの場合)

今回は、サーバーの簡単インストールなどで、エラーになって入らない場合の対 …

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

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

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS(ベーサーシーエムエ …

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

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

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …