質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

1392閲覧

ファーストビューの画像が大きい時の読み込ませ方

wakaba

総合スコア28

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2018/11/13 07:22

編集2018/11/13 09:10

今現在以上の最適な読み込ませ方を知りたいです。
※・ファーストビューレイアウトで必要なファイルを先に読み込む は既に実践してます。
※追記1:・ファイル圧縮もしています。
※追記2:・Webで紹介されているような基本的なサイト高速化対策は一通り済んでます。
ファーストビューで大きな画像を読み込ませるときに使えそうなやり方が知りたいです。

=サイトレイアウト=
よくあるサイトデザインとしてトップページを

ヘッダー
ファーストビュー(大きめの画像、スライダーになっている)
メインコンテンツ(サイドバー)
フッター

というレイアウトにしました。

=気になる点=
次回以降のアクセスはキャッシュのおかげで1秒も掛からず読み込んでくれます。
しかし初回の場合は読み込みに1秒ほど時間が掛かってしまい
画像を読み込んでる間に表示される白いエリア → 画像が表示されます。
特にPCは顕著です。

この初回の動作が嫌なので最初から1秒を切る読み込み速度にしたいのですが、
・ファーストビューレイアウトで必要なファイルを先に読み込む
・画像を軽くする
・サーバーを変える
・キャッシュを利用する(初回なので関係ない)
※追記1:・ファイル圧縮もしています。
※追記2:・Webで紹介されているような基本的なサイト高速化対策は一通り済んでます。
ファーストビューで大きな画像を読み込ませるときに使えそうなやり方が知りたいです。

以外にできそうなことはないでしょうか?

何かファーストビューで役に立つ裏技、小技、テクニックのようなものがあれば教えて欲しいです。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

x_x

2018/11/13 08:20

スライダーというのは独自開発ですか?
x_x

2018/11/13 08:21

どこがボトルネックになっているか、計測はしているのでしょうか?
guest

回答2

0

例えばhtml,css,jsの圧縮や不要なソースを読み込まないなどで全体的に読み込み時間削減がはかれます。

投稿2018/11/13 08:00

退会済みユーザー

退会済みユーザー

総合スコア0

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

wakaba

2018/11/13 08:09

>※・ファーストビューレイアウトで必要なファイルを先に読み込む は既に実践してます。 読んでください。
Tomowe_kosaka

2018/11/13 08:43

html,css,jsの圧縮や不要なソースを読み込まない は別要件だと思いますが
wakaba

2018/11/13 09:04

こちらの書き方も悪いですが、そういった基本的なサイト高速化対策というのはできているので、 ファーストビューの表示に使えそうな話を聞きたかったです。 ファーストビューに読み込ませるソースを気にしてるレベルの人間が圧縮とかを怠ってこの質問をしている、と見られたのはこちらの想像外でした。 次から書き方に気を付けようと少し思いました。
退会済みユーザー

退会済みユーザー

2018/11/13 14:05

えっとページのどこかでjQueryなどの読み込み順序を厳守しなければいけないスクリプト等は読み込んでいますか?
guest

0

ベストアンサー

画像を読み込んでる間に表示される白いエリア → 画像が表示されます。

↑上記の意味が、スライダー用の画像を読み込んでいる時間が気になるということでしたら、最初は同サイズのDIVに静止画を表示させておいて、スライダーの読み込みが終わった頃に入れ替えれば良いのではないでしょうか?

投稿2018/11/13 14:44

colling

総合スコア798

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問