モバイル表示で懸念されるサイトの軽量化。
PCでも表示し、モバイルでも同じものを使えばメディアクエリは実現できるものの工夫をしないと読み込みまで時間がかかってしまう。
どこまでを抑えるのか、抑えすぎるとメンテナンス効率が悪くなるのが悩みの種。そこで、サイトの軽量化とメンテナンス性について試行錯誤してみた。
モバイル表示でネックとなる部分
1 配置している画像の容量
2 読み込むファイルの「数」
読み込むファイルの「数」が難問。画像の容量は適度に抑え（Photoshopで中画質からやや高画質程度）れば済むが、2の外部ファイルの数をいかに減らすかという課題がネックとなる。
解決策
・スタイルシートをなるべく1つに、多くても2,3つ程度に抑える
→スタイルシートは長い記述になる。コメントアウトを工夫し、整理整頓を心がける
・CSSスプライトを使う
→読み込むCSSアイテムでまとめられそうなものを1つのファイルにまとめておく
（意外とCSSから読み込む画像も読み込み回数としては多い）
CSSスプライトに詰め込みすぎると修正の際に苦労することになるので、あくまでも確定した段階での画像作成がおすすめ。
PCでも表示し、モバイルでも同じものを使えばメディアクエリは実現できるものの工夫をしないと読み込みまで時間がかかってしまう。
どこまでを抑えるのか、抑えすぎるとメンテナンス効率が悪くなるのが悩みの種。そこで、サイトの軽量化とメンテナンス性について試行錯誤してみた。
モバイル表示でネックとなる部分
1 配置している画像の容量
2 読み込むファイルの「数」
読み込むファイルの「数」が難問。画像の容量は適度に抑え（Photoshopで中画質からやや高画質程度）れば済むが、2の外部ファイルの数をいかに減らすかという課題がネックとなる。
解決策
・スタイルシートをなるべく1つに、多くても2,3つ程度に抑える
→スタイルシートは長い記述になる。コメントアウトを工夫し、整理整頓を心がける
・CSSスプライトを使う
→読み込むCSSアイテムでまとめられそうなものを1つのファイルにまとめておく
（意外とCSSから読み込む画像も読み込み回数としては多い）
CSSスプライトに詰め込みすぎると修正の際に苦労することになるので、あくまでも確定した段階での画像作成がおすすめ。
|
|
|
|
|
|
|
|
GoodなWEB作成サークル 更新情報
-
最新のイベント
-
まだ何もありません
-
-
最新のアンケート
-
まだ何もありません
-
