Jak opravit poskytování statických prostředků pomocí účinné zásady mezipaměti - optimalizace rychlosti stránky WordPress

Optimalizuji web na základě pokynů PageSpeed ​​Insights. A jedním z bodů je využití mezipaměti prohlížeče.

A v tomto případě - pro zdroje třetích stran - jako Google Analytics a Správce značek.

Tento kód jsem již přidal do .htaccess soubor:

# Expires headers  ExpiresActive on ExpiresDefault 'access plus 2 days' # cache.appcache needs re-requests in FF 3.6 ExpiresByType text/cache-manifest 'access plus 0 seconds' # Your document html ExpiresByType text/html 'access plus 0 seconds' # Data ExpiresByType text/xml 'access plus 0 seconds' ExpiresByType application/xml 'access plus 0 seconds' ExpiresByType application/json 'access plus 0 seconds' # Feed ExpiresByType application/rss+xml 'access plus 1 hour' ExpiresByType application/atom+xml 'access plus 1 hour' # Favicon (cannot be renamed) ExpiresByType image/x-icon 'access plus 1 week' # Media: images, video, audio ExpiresByType image/gif 'access plus 1 month' ExpiresByType image/png 'access plus 1 month' ExpiresByType image/jpeg 'access plus 1 month' ExpiresByType video/ogg 'access plus 1 month' ExpiresByType audio/ogg 'access plus 1 month' ExpiresByType video/mp4 'access plus 1 month' ExpiresByType video/webm 'access plus 1 month' # HTC files ExpiresByType text/x-component 'access plus 1 month' # Webfonts ExpiresByType application/x-font-ttf 'access plus 1 month' ExpiresByType font/opentype 'access plus 1 month' ExpiresByType application/x-font-woff 'access plus 1 month' ExpiresByType application/x-font-woff2 'access plus 1 month' ExpiresByType image/svg+xml 'access plus 1 month' ExpiresByType application/vnd.ms-fontobject 'access plus 1 month' # CSS and JavaScript ExpiresByType text/css 'access plus 1 year' ExpiresByType application/javascript 'access plus 1 year'  

Co mám do tohoto kódu přidat? A jaké je doporučené období pro ukládání do mezipaměti prohlížeče pro Google Analytics a Správce značek Google?

Jak říká @TimFountain, nemáte „žádnou kontrolu“ nad zdroji poskytovanými třetí stranou. Žádost jde na server třetí strany, nikoli vaše server - tedy jakýkoli kód, který umístíte vaše server je jednoduše nikdy zpracován, když je požadován zdroj třetí strany.

Google Analytics a Správce značek jsou poskytovány ze serverů Google. Servery Google ovládá pouze Google!

Pokud se však Google rozhodl tyto prostředky neukládat do mezipaměti, může existovat velmi dobrý důvod, proč se rozhodl tak neučinit. Ne všechno by mělo být uloženo do mezipaměti.

Pokus o implementaci ukládání do mezipaměti na těchto zdrojích „Google“ (možná tím, že tyto zdroje místo toho poskytnete na svém vlastním serveru - nedoporučuje se) - a to při splnění testu PageSpeed ​​- by mohlo mít negativní vliv na vaši uživatelskou zkušenost a data Analytics. Nástroj PageSpeed ​​slouží pouze jako průvodce. Neměl bys slepě přijměte doporučení.

Tato otázka na StackOverflow konkrétně pojednává o Google Analytics a PageSpeed ​​Insights:

  • https://stackoverflow.com/questions/29162881/pagespeed-insights-99-100-because-of-google-analytics-how-can-i-cache-ga

Vaše pravidla htaccess ovlivní pouze aktiva poskytovaná z váš server. Nelze ovlivnit ukládání do mezipaměti aktiv obsluhovaných servery třetích stran - nemáte nad nimi žádnou kontrolu.

  • Dobře, dobré vědět!

Odpovídám po roce, takže v době, kdy už jste tento problém možná vyřešili.

Také jsem získával stejné body, ale to je pro zdroje třetích stran jiné než Google Analytics a Správce značek.

K vyřešení tohoto problému jsem použil mezipaměť prohlížeče Leverage plus a také použil metody prioritizace zdrojů. Zde je krátký.

Existují čtyři metody prioritizace prostředků:

Předpětí<link rel='preload'> informuje prohlížeč, že je potřeba prostředek jako součást aktuální navigace, a že by se měl začít načítat co nejdříve.

<link rel='preload' as='script' href='super-important.js'> <link rel='preload' as='style' href='critical.css'> 

PreConnect <link rel='preconnect'> informuje prohlížeč, že vaše stránka má v úmyslu navázat spojení s jiným původem a že chcete, aby byl proces zahájen co nejdříve.

<link rel='preconnect' href='https://example.com'> 

dns-prefetch Ve skutečnosti existuje další <link> typ týkající se připojení: <link rel='dns-prefetch'>. Toto zpracovává pouze vyhledávání DNS, takže je to malá podmnožina <link rel='preconnect'>, ale má širší podporu prohlížeče, takže může sloužit jako pěkná záložní možnost. Používáte to přesně stejným způsobem:

<link rel='dns-prefetch' href='https://example.com'> 

Prefetch <link rel='prefetch'> se poněkud liší od <link rel='preload'> a <link rel='preconnect'>v tom, že se nesnaží, aby se něco kritického stalo rychleji; místo toho se snaží, aby se něco nekritického stalo dříve, pokud bude šance.

Dělá to tak, že informuje prohlížeč o zdroji, u kterého se očekává, že bude potřebný jako součást budoucí navigace nebo interakce s uživatelem, například o něčem, co může být potřeba později, pokud uživatel provede akci, kterou očekáváme. Tyto zdroje jsou v prohlížeči Chrome načteny s nejnižší prioritou, když je aktuální stránka načtena a je k dispozici šířka pásma.

<link rel='prefetch' href='page-2.html'> 

Pokud jde o váš problém, pokud máte jiné nekritické prostředky CSS, JS, pak byste možná chtěli použít ve vašem HTML.

Podrobnosti si můžete přečíst zde: Prioritizace zdrojů - Jak vám může prohlížeč pomoci

Pracoval pro vás: Charles Robertson | Chcete nás kontaktovat?