ほんの少しだけサイト表示が早くなるミニカスタマイズ

カラーミーショップのテンプレートは有料・無料に関わらず、viewport設定をJavaScriptで追記しています。

 

カラーミーSEO+テンプレートでも、HTMLファイルの1番(共通)末尾に↓のような記述で無理やりviewport追加しています。

1-common.html末尾

やむを得ない理由でこういう形をとっているのですが、カラーミーにはheadタグに追記できるフリースペースがあるので、できればviewport設定も手書きで追加しておいてほしいところです。

headタグにviewportを追記する

viewportの記述はSEO+では

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

と出力されます。

公式有料テンプレートを見てみると

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

でした。どっちでもいいです。

 

管理画面 > 集客 > 検索エンジン対策 > 検索エンジン対策

とすすみ、ページ末尾までスクロールすると「headタグ内フリースペース設定」という項目があるので、そこに上のmetaタグをそのまま貼り付けます。

 

カラーミーSEO+テンプレートはPC用ページしか使わないので、スマートフォンショップ用のフリースペースは無視して良いです。
PC使わない用ページとスマホ用ページが別になっているテンプレートを使っている方は両方に追記します。

 

貼り付けられたら【更新】。

viewport設定jsを削除する

次にテンプレートのviewport設定を削除します。

SEO+は先述のとおり共通ファイルの末尾です。先ほど図で載せておいた部分を削除しておいてください。

他のテンプレートでもおそらく末尾あたりか、もしくは先頭にあると思います。

 

ブラウザが余計なJSを読み込む必要がなくなるので、100分の数秒ぐらいはページの表示速度が早くなると思います。

その他確認したケースでは、viewportを後付けで設定していることでモバイルフレンドリーテストに引っかかることがあります。どちらにせよJS操作でheadタグに追記するのは褒められたものではないので、修正しておくに越したことはないでしょう。

コメントする

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください