Doubt About Cache

Asked

Viewed 432 times

6

I’m doing my site, and I want to try to reach 100/100 in Pagespeed Insights, I’ve activated my cache by. htacces, but the P.S.I says it’s still inactive, so I went to see the headers, and back that up: 

HTTP/1.1 200 OK
Date: Thu, 21 Apr 2016 14:54:41 GMT
Server: Apache
X-Powered-By: PHP/5.5.34
Content-Encoding: gzip
Vary: Accept-Encoding
Cache-Control: max-age=0
Expires: Thu, 21 Apr 2016 14:54:41 GMT
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Transfer-Encoding: chunked
Content-Type: text/html; charset=utf-8

from what I noticed Cache-Control ta max-age=0, I don’t know what to say that’s off or if it’s picking up, I’ve never cached on my sites, and I don’t know anything about it, man. htaccess is like this:

RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule .(/)?$ index.php

SetOutputFilter DEFLATE
SetEnvIfNoCase Request_URI "\.(?:gif|jpe?g|png)$" no-gzip

ExpiresActive On

ExpiresDefault "access plus 1 month"
ExpiresByType text/cache-manifest "access plus 0 seconds"

# 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
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/jpg "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 image/svg+xml "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS / JS
ExpiresByType text/css "access plus 1 year"
ExpiresByType application/javascript "access plus 1 year"
ExpiresByType application/x-javascript  "access plus 1 year"

I really want Cache to be active, but I can’t leave it, I’ve searched about, I’ve changed mine. htaccess, I’ve seen Google video about it, but I can’t understand why it’s still playing offline!

Would it be possible for someone to help me in this matter and, if you could, explain to me about this type of code?

Link to Pagespeed Insight: https://developers.google.com/speed/pagespeed/insights/? url=http%3A%2F%2Fbrowse.netescola.info%2Fp%2Fhardwell

cache pagespeed-insights

  • See if this helps http://answall.com/a/120344/3635

  • @Guilhermenascimento, I read this and re-read it several times, and I did what he says, but the P.S.I Still says it is to support the Browser Cache, Look here https://developers.google.com/speed/pagespeed/insights/? url=http%3A%2F%2Fbrowse.netescola.info%2Fp%2Fhardwell

  • Raphael I answered, see if you can understand.

1 answer

7


Your code is working perfectly, the problem is that you can not set external file cache, in case the links that do not have a good cache are these:

https://i.ytimg.com/vi/iSxbI3d0064/hqdefault.jpg (5 minutes)
https://i.ytimg.com/vi/-IZc6i5K2OQ/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/3t9O5DpRfxU/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/4KDQ0IjMsnA/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/4QTwsLTv4Kc/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/4Uw8EcNmLC4/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/4cLtiYvRvfE/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/ALM1CwRMrmw/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/AQ0resnXCcE/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/Br-mOQ_x-Ik/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/EU1SaAun2r0/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/EoYOCxP6yIA/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/F2vea_JoBaw/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/TCZpKB7l8-Y/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/U1aXAYjgy5w/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/ULwcsIPdc8w/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/W_sFQN8RL1E/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/WuCGE6Sl27w/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/Y-D7PHnn70k/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/byZO3dMLtpA/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/clRjbYa4UWQ/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/eBZjZ6eAzMw/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/iQpGq4HguVs/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/lSLwVPih4_w/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/m1ssAFzaCsU/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/qLKGcB4uE-g/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/rTisfEc786c/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/rhUvo4xj2oU/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/wdvI62lq78I/hqdefault.jpg (2 hours)
https://i.ytimg.com/vi/wkGH7W8WPYU/hqdefault.jpg (2 hours)
https://www.google-analytics.com/analytics.js (2 hours)

See none belong to your domain, Google encourages several good practices, but their own tools (google Analytics and youtube) rarely follow this.

Achieve 100/100 on Pagespeed Insights does not mean that your site is great for the end user, your page for example uses the tag <style> in a moment, when it could be inside and a .CSS that would take advantage of the cache and has a tag <script> with a function called function tocar(id), could be inside a .JS .

There are several links on your share that could be automated through jQuery (which you already make use of) or even pure Javascript, rather than doing so:

<p class="center no"><a href="https://www.facebook.com/sharer/sharer.php?app_id=1731086990510840&u=http://procurar.netescola.info/baixar/iSxbI3d0064&display=popup&ref=plugin&src=share_button" class="fb" target="_blank" title="Compartilhar Música no Facebook"><i class="fa fa-facebook" aria-hidden="true"></i><br>Compartilhar</a></p>

It could be something like:

<p class="center no"><a href="javascript:void(0);" data-video-id="iSxbI3d0064" class="fb" title="Compartilhar Música no Facebook"><i class="fa fa-facebook" aria-hidden="true"></i><br>Compartilhar</a></p>

And in jQuery something like:

$(document).on("click", ".fb", function() {
    var url = 'https://www.facebook.com/sharer/sharer.php?app_id=1731086990510840&u=http://procurar.netescola.info/baixar/' +
               $(this).data("video-id") +
              '&display=popup&ref=plugin&src=share_button';

    window.open(url, "_blank");
}, false);

But they’re just suggestions and there are several ways to solve this.

Now to solve the problem of external requests you could try to solve this is using a "proxy" in a programming language, do not recommend applying to everything, only in youtube thumbnail images.

Create a file called Thumb.php:

<?php
$time = 365 * 24 * 60 * 60; //Defina o tempo de cache aqui, por padrão deixei o cache de 365 dias
$cacheThumbPath = 'thumbcache/'; //Defina a sua pasta de cache aqui (mantenha a / no final)

$http_version = empty($_SERVER['SERVER_PROTOCOL']) ? 'HTTP/1.0' : $_SERVER['SERVER_PROTOCOL'];

if (empty($_GET['id']) || !preg_match('/^[A-Za-z0-9_\-]{11}$/', $_GET['id'])) {
    header($http_version . '400 Bad Request', true, 400);
    echo 'ID não definida na url';
    exit;
}

$id = $_GET['id'];
$cacheThumbPath .= $id . '.jpg';

function cachePage()
{
    global $http_version, $time;

    header('Content-Type: image/jpeg');
    header('Expires: ' . gmdate('D, d M Y H:i:s', time() + $time) . ' GMT');
    header('Cache-Control: public, max-age=' . $time);
    header('Pragma: max-age=' . $time);
}

//Verifica se já existe uma cópia do arquivo no seu servidor para evitar requisitar várias vezes o youtube
if (file_exists($cacheThumbPath)) {
    cachePage();
    echo file_get_contents($cacheThumbPath);
    exit;
}

$ch = curl_init();

$thumburl = 'https://i.ytimg.com/vi/' . $id . '/hqdefault.jpg';

curl_setopt($ch, CURLOPT_URL, $thumburl);
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
curl_setopt($ch, CURLOPT_BINARYTRANSFER, true);
curl_setopt($ch, CURLOPT_SSL_VERIFYPEER, false);
curl_setopt($ch, CURLOPT_TIMEOUT, 5);

$data = curl_exec($ch) or die(curl_error($ch));

curl_close($ch);

//Salva cópia do arquivo no seu servidor
if (file_put_contents($cacheThumbPath, $data)) {
    cachePage();
    echo $data;
    exit;
}

header($http_version . ' 500 Internal Server Error', true, 500);
echo 'Erro ao baixar ou ler a imagem, detalhes:';
print_r(error_get_last());

And in HTML call it that:

<div class="capayt" style="height:350px; background:url('http://netescola.info/thumb.php?id=m1ssAFzaCsU');" alt="Hardwell Live at Ultra Music Festival Miami 2016 - Procurar Musicas"></div>
  • 1

    Pocha, I wanted 100/100 so much, but Google really took that away from me, thank you for your answer, if you know if there’s any way I can get those links in there to go through my cache somehow, I thought 64bit data, but I don’t know, if you knew any good way and can inform me by message, I thank you, vlw for the reply.

  • I think only with a "webproxy" (written inside your server), you use php on your pages?

  • Yes use, my site is completely in PHP, I use google’s api and Soundcloud

  • Buddy, I went to take a shower to open my mind, and I could think of something, it was like this header('Content-Type: image/png');&#xA;echo file_get_contents(urldecode($_GET['i'])); in operation: http://netescola.info/teste.php?i=https://i.ytimg.com/vi/Fzlicqf47tq/hqdefault.jpg

  • 1

    @Raphaelcaldas added an example that will avoid making multiple requests on external servers.

  • 1

    Damn man, I didn’t think to do this way, THANK YOU VERY MUCH, I was giving several requests on the outside and I was afraid of some time lagar, it helped me too, too, thank you very much for the help.

  • @Don’t forget to make the JS and CSS improvements I mentioned, and a detail I put the cache of 6 days, but being photos of the videos I think you can put a longer cache time, as 1 year for example: $time = 365 * 24 * 60 * 60;

  • This change of jQuery I’ll see, I want to see if it looks good on mobile, why a good part of the public can be mobile, why on the pc has Spotify that is better, but on Mobile Spotify only pays the premium, and on css, I’ll see more, I’ll give a studied, because google says q is good, but if it were so good, they would put themselves in theirs, THANK YOU VERY MUCH for the help you gave me, really helped me mt.

  • The one of the links in share I mentioned with jQuery is optional and was just a suggestion, but the <script> tag that contains the function and touch and the tag style I think it would be good to move to files . js and . css respectively =) @Raphaelcaldas - Error in jquery function, now fixed $(document).on("click", ".fb", function()

Show 4 more comments

Browser other questions tagged cache pagespeed-insights

You are not signed in. Login or sign up in order to post.