Question About Cache

5

I'm doing my site, and I want to try to reach 100/100 in PageSpeed Insights, I activated my cache for .htacces, but P.S.I says it's still inactive, so I went to see the headers,

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

So I noticed Cache-Control ta max-age = 0, I do not know what to say that is off or is catching, I have never used cache in my sites, and I know nothing about it, my .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 the Cache to be active, but I can not leave it, I've already tried it, I've already changed my .htaccess, I've already seen Google video about it, but I can not understand why it's still giving away offline!

Would it be possible for someone to help me with this question and if you can, explain me about this type of code?

PageSpeed Insight Link: link

    
asked by anonymous 21.04.2016 / 17:05

1 answer

7

Your code is working perfectly, the problem is that you can not set external cache files, in case the links that do not have a good cache usage 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)

No one belongs to your domain, Google encourages several good practices, but their own tools (google analytics and youtube) rarely follow this.

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

There are several links on your share page that could be automated through jQuery (which you already use) or even Javascript purely, 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 are 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 by using a "proxy" in a programming language, I 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 like this:

<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>
    
21.04.2016 / 18:33