web-dev-qa-db-ja.com

高速な画像ダウンロードページを提供しようとしたときのテストからの奇妙な結果...なぜですか？

これは私のphpコードです。

    <?php
    ob_start();
    echo file_get_contents("originalhighqualityphoto.jpg");
    $dat=ob_get_contents();
    ob_end_clean();
    $dat=gzencode($dat,2);
    header("content-disposition: attachment; filename=\"OptimizedPhoto.jpg\"",true);
    header("content-encoding: gzip",true);
    header("content-type: image/jpeg",true);
    header("cache-control: max-age=1000000",true);
    header("content-length: ".strlen($dat),true);
    echo $dat;exit();
    ?>

私がやろうとしているのは、Zipファイルとして提供することなく、画像が100％の品質でダウンロードされ、ウェブサイトからより速くダウンロードされるようにすることです。私のサイトの他の場所ですでに高品質の画像の「プレビュー」として使用されているため、直接画像圧縮を使用したくありません（Photoshopなど）。

自分のWebブラウザ（Opera v11.6）でダウンロードをテストしましたが、正常に動作します。

これが私を失望させるものです。 webpagetest.orgを使用して画像をダウンロードしようとしましたが、最も奇妙な結果は次のとおりです。

Webpagetest.orgのfirefox経由：

Leverage browser caching of static assets: 75/100

WARNING - (1.8 days) - http://ciscobinary.openh264.org/openh264-win32-v1.3.Zip

注：どのファイルにもZipファイルという名前は付けませんでした。そのファイルに手動でアクセスすると、2つのランダムなファイルが含まれていました。1つはdllファイルです。

Webpagetest.orgでIE8を使用してテストします。

Compress Images: 62/100

8.0 KB total in images, target size = 5.0 KB - potential savings = 3.0 KB

FAILED - (8.0 KB, compressed = 5.0 KB - savings of 3.0 KB) - http://example.com/path/to/testphpfile.php

テストで使用した画像が100 KBを超えている場合、8.0 KBがどこから来ているのかわかりません。

Webpagetest.org経由のchromeでは、テストは問題ないようです。

ページ速度の洞察では、スコアは問題ありませんが、出力は文字化けします。

Properly formatting and compressing images can save many bytes of data. Optimize the following images to reduce their size by 36.8KiB (20% reduction).

    Losslessly compressing http://example.com/path/to/testphpfile.php could save 36.8KiB (20% reduction).

また、モバイル経由でテストしたときのページ速度の洞察では、ビューポートの構成について説明していますが、HTTPヘッダーだけでは不可能だと思います。

これについて言えば...これらの結果を引き起こしているヘッダーはありますか、それとも画像ダウンロードスクリプトを機能させてseoを使いやすくするために他に何かしなければならないことがありますか？

seophpimagescompressionoptimize
3
Mike

Openh264 Zipファイルに関するWebPageTestの問題に関しては、正直なところわかりませんが、Alex Berryがコメントで正しいのではないかと思いますが、私が見つけた情報でこれを確認することはできませんでした。

ロスレス圧縮を使用するPageSpeed Insightsの推奨事項に関して、ファイル形式をJPEG（。jpg）からPortable Network Graphics（。png）に変更する必要があると思われますこれを最適に達成します。

ビューポートを指定するPageSpeed Insightsの推奨事項に関して、これはHTMLを使用して行われ、画像圧縮とダウンロード速度とは別の問題であり、モバイルデバイスとのWebサイトの互換性とアクセシビリティに関するものです。

写真のGZipとブラウザキャッシュを最大限に活用するには、次のようなものを試してください。

<?php
$aHeaders = array();

/* Content/Behaviour Headers */
$aHeaders[] = 'Content-Type: image/jpeg';
$aHeaders[] = 'Content-Disposition: attachment; filename="OptimizedPhoto.jpg"';

/* Browser Cache for 35 days */
$iCacheSecs = 3024000; // 60 secs * 60 mins * 24 hours * 35 days
$dtNow = time();
$dtExpires = strtotime( sprintf( '+%s seconds', $iCacheSecs ));
$aHeaders[] = 'Expires: ' . date( 'r', $dtExpires );
$aHeaders[] = 'Last-Modified: ' . date( 'r', $dtNow );
$aHeaders[] = 'Cache-Control: public, must-revalidate, max-age=' . $iCacheSecs );

/* Generate Unique ETag */
$sData = @file_get_contents( 'originalhighqualityphoto.jpg' );
$sETag = md5( $sData );
$aHeaders[] = sprintf( 'ETag: %s', $sETag );

/* Send HTTP 304 response if resource same as held in browser cache */
$sSuppliedETag = isset( $_SERVER['HTTP_IF_NONE_MATCH'] ) ?
  $_SERVER['HTTP_IF_NONE_MATCH'] : '';
if( $sSuppliedETag == $sETag ) {
  header( 'HTTP/1.1 304 Not Modified' );
  header( 'Content-Length: 0' );
  exit;
}

/* GZIP Compression, Send Headers, Send Content */
if( !ob_start( 'ob_gzhandler' )) ob_start();
foreach( $aHeaders as $sHeader ) header( $sHeader );
echo( $sData );
exit;
1
richhallstoke