問題タブ [deferred-loading]

大きなサイズの画像がたくさん含まれるページを作成しているので、当然、問題なくページが読み込まれるようにしたいです。私はここでこの記事を読みましたhttp://24ways.org/2010/speed-up-your-site-with-delayed-content

延期の方法は次のとおりです（ページから取得、URLを気にしないでください）

その後、jsのスニペットが画像の読み込みを処理します

すべての画像に対してこれを行う予定はありませんが、ページの読み込み時に表示する必要のない一部の画像については間違いなくそうします。

これが最善の方法ですか、それとも画像を延期することでページの読み込みを高速化するためのより良い方法がありますか？

ありがとう

私は CakePHP を使用しており、テンプレートですべてのスクリプト タグを body タグの直前にプッシュして、ページの読み込みを高速化しました。本文のスクリプト タグの前に、jQuery に依存するコードがいくつかあります (スライダーとグラフ)。そのために document.ready-function を使用しましたが、何も起こりません。スクリプトを機能させるにはどうすればよいですか?

洞察を得るためのいくつかのコード：

テンプレート index.php

取得したコンテンツには、たとえばスライダー関数があります。

私のアプローチ：window.onloadでも試しましたが、どちらも機能しません。document.ready- および onload-functions を理解しているため、なぜ機能しないのか、それ以上の手がかりはまったくありません。私はあなたたちに頼っています:) よろしくお願いします。

Google のページ速度は、JavaScript の解析を延期する必要があることを示しています。

ヘッダーに読み込まれた 2 つの外部 Javascript と、ドキュメントの下部にある初期化関数の呼び出しがあります。

Google の推奨事項に従えば、次のような関数を作成する必要があります。

myinitialization()スクリプトが正常にロードされて解析される前に が呼び出されないことを 100% 確信できますか? 他に、解決策は何ですか？

私のAngularアプリでは、アプリケーションの残りの部分を実行できるようにする前に、サーバーからいくつかのデータを読み取る必要があります. たとえば、何かへのアクセスを許可する前に、ユーザーの許可を確認できるように、ユーザーを認証する必要があります。アプリの起動時にこれを行う必要があり、どのコントローラーが最初に読み込まれるかわからないため、最初にヒットするコントローラーがわからないため、 $routeProvider.when メソッドの解決機能を使用できません。アプリの起動時に一度だけ発生します。

module.run メソッドで何かを実行する方向に舵を取り続けていますが、サーバーからデータが返されるまで続行しないようにする方法が見つかりません。私はこれを見つけましたが、同じ問題に悩まされています: AngularJS : Initialize service with asynchronous data。

手動でブートストラップすることもできますが、これを行う方法の良い例が見つかりません。あなたが提供できる助けをいただければ幸いです。

開発者向けの Google ドキュメントに従ってCSS 配信を最適化しようとしています https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery#example

小さな CSS ファイルをインライン化する例でわかるように、重要な CSS はヘッドでインライン化され、元の small.css はページのオンロード後にロードされます。

この例に関する私の質問:

ページのオンロード後に大きな css ファイルをロードする方法は?

Google のページ速度は、primefaces.js をロードするとページの速度が低下していることを示しています。

ページ速度レポートから:

JavaScript の解析を延期する ページのレンダリングに必要な JavaScript の量を最小限に抑え、実行が必要になるまで不要な JavaScript の解析を延期することで、ページの初期読み込み時間を短縮できます。

どうすればこれを解決できますか?

Google は、スクリプトを「延期」することを推奨していますが、タグのdefer属性については言及していません。<script>しばらく前からあるのに、なぜ彼らはそれについて言及していないのだろうか。

代わりに、スクリプトを DOM に挿入することを提案しています。deferはるかにシンプルでクリーンな属性を使用するよりも、これに特に利点はありますか?

https://developers.google.com/speed/docs/best-practices/payload?csw=1#DeferLoadingJS

古いブラウザーにはいくつかの小さな問題があると思いますが、IE10 より前のものはサポートしておらず、主にモバイル ブラウザーの最適化に関心があります。

更新: 興味深いことに、Google マップ API を使用している場合、スクリプトの読み込み手法を使用できないことがわかりました。マップ API はdocument.write他のスクリプトをロードするために使用するため、遅延スクリプトまたは非同期スクリプトでは使用できず、DOM にも挿入できませんdocument.write。Google が独自の推奨事項に従っているとよいでしょう。