ほとんどすべての Web サイトに対して行うすべての Pagespeed テストで、「画像 X をロスレス圧縮して画像を最適化する」というコメントが表示され、ページのランクが大幅に向上することがよくあります。

私はすでにすべての画像を Photoshop の「Web 用に保存」で保存していますが、さらに「ロスレスで圧縮して画像を最適化」するにはどうすればよいか考えていました。私が知る限り、私はすでにできる限りのことをしています。

本当に不思議..

^{トピックから外れていますが、Google の PageSpeed が Retina デバイスを使用してチェックしていることに気付きました。これは、通常の Retina 画像ではなくすべての Retina 画像が読み込まれたためです。これらはエリアよりも大きいため、モバイル セグメントで 1/100 のスコアを獲得しました。ハハ。}

私は Google PageSpeed のインサイトを使用して、サイトのパフォーマンスを改善しようと試みてきました。これまでのところ、非常に成功していることが証明されていますが、何らかの理由でホームページのみです。

ホームページには 87/100 のスコアが与えられ、8 つのルールが合格しました。そのうちの 1 つは「レンダリングをブロックするリソースがありません」です。

問題

他のページを確認すると、「スクロールせずに見えるコンテンツでレンダリングをブロックする JavaScript と CSS を削除する」と記載されています。現在、ホームページと他のページの両方に同じ head.php と footer.php が含まれており、ホームページにまだロードされていない余分な .js または .css ファイルをロードするページはありません。

頭

フッター

だから...私がここに欠けているものはありますか？

したがって、非常に単純なWordpressのインストールを提供するNginxの上にPageSpeedがあります。

この問題は、Wordpress 4.2.2 へのアップグレードと同時に発生したようです。しかし、これが問題かどうかを確認するために 4.1.5 にダウングレードしたところ、そうではないことが判明しました。

通常、私は PageSpeed を責めませんが、URL で ?PageSpeed=off を使用すると、問題は完全に修正されます。明確にするために、管理領域にはキャッシュがありません。

もう 1 つの奇妙な点は、CMS では (投稿ではなく) ページにのみ影響するように見えるため、PageSpeed はスクリプト/スタイル/ページ固有の何かと競合する可能性があるようです.

私は現在困惑しているので、何か提案をいただければ幸いです。

私は本当に長い時間をグーグルで過ごしました...どこでも半分の答えしか見つかりません。Google のページ スピード インサイトを使用してウェブサイトを改善していますが、javascript を非同期で読み込むように指示されています。いくつかのコードを見つけましたが、複数の js ファイルをロードする方法と css をロードする方法も説明していませんでした。また、ロードする順序を教えてくれる場所も見つかりませんでした。誰でも助けることができますか？

注: js をフッターに移動しようとしましたが、モバイル メニューが機能しなくなりました (これは expand.js ファイルを使用します)。

非同期にロードする必要がある Javascript ファイルは次のとおりです。

私のCSS：

診断する

最近見つけた : PageSpeed Insightsは、基本的にページ速度をテストし、スコアを吐き出し、ページが遅くなる原因を表示します。

URL を入力すると、ここに my : resultがあります。

問題

私は明らかに多くのスコアを持っていませんが、改善に取り組んでいます。

画像最適化の問題がたくさんありました。私は2つのことを試しました。__

1.ImageOptimソフトウェアを使用する

ImageOptim Mac ソフトウェアを使用して、img/フォルダー内のすべての画像を最適化しようとしました。

2.grunt imagemin プラグインを使用する

img/その上で、ビルド ツールを使用してフォルダー内のすべての画像を再圧縮し、圧縮した画像をフォルダーに保存しdist/img/ます。

画像最小結果

幸いなことに、104 枚の画像がすべて縮小されました4.11MB。

再検査結果

しかし悲しいことに、ページ全体を新しい画像ディレクトリに再リンクした後dist/img/. PageSpeed Insightsでサイトを再度テストしましたが、同じ警告画像の最適化が表示されました。

この問題を修正/改善するにはどうすればよいですか? 設定optimizationLevel: 3が低すぎたからでしょうか？

アプローチ/アイデア/戦略/より良い解決策/提案はありますか?

どうもありがとう ！

CSS ファイルが原因で、デスクトップとモバイルの両方でGoogle PageSpeed Insightsの1 つの一意のポイントに失敗しています。「エラー」には次のように表示されます。

スクロールせずに見えるコンテンツでレンダリングをブロックする JavaScript と CSS を削除する ページには、ブロックする CSS リソースが 1 つあります。これにより、ページのレンダリングが遅れます。次のリソースが読み込まれるのを待たずに、ページのスクロールせずに見えるコンテンツをレンダリングすることはできませんでした。ブロッキング リソースを遅延または非同期でロードするか、これらのリソースの重要な部分を直接 HTML にインライン化してください。

Google Developersの推奨事項は言う

外部 CSS リソースが小さい場合は、それらを HTML ドキュメントに直接挿入できます。これはインライン化と呼ばれます。このように小さな CSS をインライン化すると、ブラウザはページのレンダリングを続行できます。CSS ファイルが大きい場合、CSS を完全にインライン化すると、PageSpeed Insights がページのスクロールせずに見える部分が大きすぎるという警告を表示コンテンツの優先順位付けによって行う可能性があることに注意してください。大規模な CSS ファイルの場合、スクロールせずに見えるコンテンツのレンダリングに必要な CSS を特定してインライン化し、スクロールせずに見えるコンテンツの後まで残りのスタイルの読み込みを遅らせる必要があります。

ただし、Materialize CSSを CSS/JS ライブラリとして使用しています。このようなライブラリには、すべてに対して機能する大きな最小化された css ファイルが含まれています。スクロールせずに見えるコンテンツで使用されている部分を抽出できず、保守可能/更新可能に保つことさえできません。

1 つのオプションは、ウィンドウの読み込みイベントの後に css を読み込むことですが、この場合、css が読み込まれる前にアプリが読み込まれません。

マテリアライズ CSS、Foundation などのライブラリを使用して、Google の推奨事項を達成する方法はありますか?

Google Page Speed Insights で次のエラーが表示されます。

「ページ コンテンツがビューポートに対して広すぎるため、ユーザーは水平方向にスクロールする必要があります。より良いユーザー エクスペリエンスを提供するために、ページ コンテンツのサイズをビューポートに合わせてください。」

「ページ コンテンツの幅は 378 CSS ピクセルですが、ビューポートの幅は 320 CSS ピクセルしかありません。」

ビューポートを次のようにヘッダーに設定しています: <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> のみに設定すると、まだ問題があります: <meta name="viewport" content="width=device-width, initial-scale=1 />

ビューポートの外にある他の多くの要素と一緒に言う要素の1つは次のとおりです。 <a href="post-template.php...>US Carriers are...</a>

サイトの URL mofiki.com/dev/aa/ は次のとおりで、私の CSS は次のとおりです。

どんな助けでも大歓迎です。また、これは初期段階にあるウェブサイトの再設計であることにも注意してください。後で大規模な修正を行う必要がないように、すべてを Google のガイドラインに準拠させようとしています。

Google pagespeed api を使用しています。しかし、呼び出したときに単純に NULL を返すことがあります。PHP と CURL を使用して API を呼び出しています。以下は私のコードです

以下はcheckPageSpeed機能コードです

誰でも私を助けてください。

PSほとんどの場合は正常に機能していますが、wwwからwww以外へ、またはその逆にリダイレクトするような一部のURLでは、NULLが返されます