html - cute-slider と HTML5Boilerplate の統合

Question

HTML5Boilerplate を使用して cute-slider を含むページを最適化すると、スライドショーが約 15px 低下し、リスト スタイルのディスクが戻ります。これは、http : //www.quailparkoflynnwood.com/dev/index.htm (非圧縮) およびhttp://www.quailparkoflynnwood.com/dev/publish/index.htm (圧縮) で確認できます。この原因を特定するための洞察をいただければ幸いです。私のフォールバックは、スライダーを含むページを圧縮しないことです。

Answer 1

ディスク付きの画像は実際にはリスト項目内の画像であるため、div#slideshow; 内に順序付けられていないリストが表示されます。おそらく、normalize.css は順序付けられていないリストのスタイル ルールをオーバーライドしていません。

次のコードをスタイル タグまたは css ファイルに追加して、そのスタイリングを削除します

#slideshow ul {
list-style-type: none !important; /*remove disc !important to override other rules */
padding: 0; 

}

あなたのサイトのページ スピード スコアは 51/100 です :( 404 (存在しないリソースへの不適切なリクエスト) と大きな画像 (これも最適化されていません) がたくさんあります。 .

個人的には、som kb といくつかのリクエストを節約する代わりに非常に複雑なメンテナンスが必要になるため、js/css のミニフィケーションは使用しません。

サイトを最適化したい場合は、画像の最適化とサイズ変更を開始し、行っている悪い要求をすべて見つけて削除し、実際に使用するスタイル ルールを含む 1 つまたは 2 つの css ファイルを読み込んでみて、最後にスクリプトを配置します。

準備が整ったら、gzip ファイルを作成し、.htaccess ファイルを使用してキャッシュ ヘッダーを追加します。

がんばれ開発者！

Answer 2

問題は、最終的な圧縮出力にキュート スライダー スタイルが含まれていないことでした。これは、main.css を使用してすべての css ファイルのインポート ステートメントを保持することで解決されました。HTML5boilerplate の以前のバージョンでは、これが正しいコーディングでした。HTML5bp v4.1.0 を読んだところ、これはもはや想定された設定ではなくなったようですが、Build の最新バージョン (v1.0) ではまだ import ステートメントが想定されています。