Ottimizzare un sito web con Cloudflare

Come configurare Cloudflare per un sito su Aruba con Server Condiviso

By on Fri Jul 30 in Aruba, cache, Cloudflare, hosting


0
(0)

Introduzione

In questo articolo vedremo come ottimizzare un sito web con Cloudflare per ottenere il massimo delle prestazioni grazie a questo servizio. Questa é la seconda parte dell’articolo Come configurare Cloudflare per un sito su Aruba con Server Condiviso.

Cloudflare e le Page Rules

Le Page Rules, o semplicemente Regole nella traduzione italiana, consentono di controllare quali impostazioni Cloudflare attivare in un determinato URL. Una cosa importante é che le Page Rules vengono lette in cascata, per cui é necessario ordinare le Page Rules in base alla priorità e rendere i criteri URL il più specifici possibile.

Per attivarle é sufficente autenticarsi in Cloudflare, cliccare sul sito interessato (chiamato anche zona in Cloudflare), e cliccare sull’icona Regole. Una volta atterrati sulla pagina, dato che dobbiamo ancora configurare la prima regola, ci verrá presentato il bottone blu Crea Page Rules, come nell’immagine qui sotto:

Crea Page Rule su Cloudflare
Crea Page Rule per ottimizzare un sito web con Cloudflare

Stiamo lavorando con un account Cloudflare gratuito, quindi avremo solo 3 Page Rules disponibili.

Cloudflare e WordPress

Ipotizziamo di lavorare con un sito realizzato in WordPress, per cui possiamo configurare sostanzialmente due gruppi di URL:

  • le pagine del frontend, per esempio https://dominio/*
  • le pagine del backend , per esempio https://dominio/wp-admin/*

Eventulamente si puó aggiungere un terzo gruppo di URL per l’URL dedicata alla preview di pagine e articoli.

Il carattere *** (asterisco) é una wildcard, ovvero un carattere jolly che viene usato per far corrispondere certi schemi. Per esempio scrivere https://dominio/wp-admin/* significa includere tutte le pagine sotto wp-admin, come https://dominio/wp-admin/edit.php?post_type=post oppure https://dominio/wp-admin/themes.php

Cloudflare e velocitá

Cloudflare aiuta ad alleggerire il traffico generato sul server di origine: molte risorse saranno fornite dai server Cloudflare invece che dal server di origine e verrá applicata una compressione per alcuni tipi di contenuti ospitati sul server di origine.

Il lavoro di ottimizzazione di un sito web peró, va oltre la configurazione di Cloudflare: va calibrato il giusto hosting, bisogna fornire le immagini nel nuovo formato webp, bisogna assicurarsi che il testo rimanga visibile durante il caricamento dei webfonts, bisogna assicurarsi che le immagini abbiamo le proprietá altezza e larghezza, e altro ancora. Questo solo dalla prospettiva di Google PageSpeed Insights.

Ottimizzare un sito web, o una web app, dalla prospettiva di un backend developer invece significa scrivere query ottimizzate e veloci da eseguire. Tutto per rendere il sito o l’app più veloce e reattiva.

Creare una nuova Page Rule

Procediamo con il creare una nuova Page Rule, cliccare quindi su Crea Page Rule:

Nuova Page Rule
Nuova Page Rule

Creare una nuova Page Rule per il frontend di WordPress

Queste le impostazioni per il frontend (/*), ovvero tutta la parte pubblica, visibile dagli utenti senza autenticazione. Una volta che avete configurato la Rule, cliccare Salva e distribuisci:

Impostazioni nuova regola frontend Per WordPress su Cloudflare
Impostazioni nuova regola frontend Per WordPress su Cloudflare

Vediamole nel dettaglio:

  • Rocket Loader: utile per migliorare il tempo di caricamento della pagina, Rocket Loader dà la priorità al contenuto del tuo sito web (testo, immagini, font, ecc.) rinviando il caricamento di tutto il tuo JavaScript fino a dopo il rendering;
  • Browser Cache TTL: impostazioni sulla scadenza delle risorse memorizzate nella cache del browser di un visitatore. È possibile specificare un tempo per il TTL della cache del browser di un visitatore nell’app Cloudflare Caching;
  • Security level: Cloudflare utilizza la reputazione dell’IP di un visitatore per decidere se presentare un Captcha; un livello Medio presenta il captcha sia ai visitatori a minaccia moderata che a quelli più minacciosi;
  • Cache Level: utilizzando un livello Standard di default forniremo una risorsa diversa ogni volta che la stringa della query cambia. Esempio di URL: dominio.com/prodotto?parametro=valore
  • Edge Cache TTL: impostazione che controlla per quanto tempo i server di CloudFlare metteranno in cache una risorsa prima di richiedere una copia fresca dal server di origine.

Si tratta di impostazioni relativamente di base, niente di troppo aggressivo, perché questa guida é solo una base, poi ogni sito ha i suoi bisogni specifici: su un blog posso adottare una tecnica di cache piú spinta e mettere in cache tutto, ma per un ecommerce il discorso sará diverso per via del carrello e di tante altre variabili che necessariamente devono essere dinamiche.

Creare una nuova Page Rule per il pannello di controllo di WordPress

Queste le impostazioni per il pannello di controllo di WordPress (/wp-admin/*), ovvero l’area protetta da autenticazione, visibile solo agli utenti autenticati. Una volta che avete configurato la Rule, cliccare Salva e distribuisci:

Impostazioni nuova regola backend su Cloudflare
Impostazioni nuova regola backend su Cloudflare

Usando il pannello di controllo per gestire il sito web – installazione di plugin, temi e molto altro – non ci serve un’elevato livello di cache quindi si puó optare per un livello di cache Standard o addirittura si puó decidere di bypassare totalmente la cache.

Come giá detto, di puó configurare una Page Rule anche per la pagina di preview.

Controllare se la cache di Cloudflare é attiva

Per controllare se effettivamente le nostre impostazioni sono attive e correttamente funzionanti, possiamo caricare la homepage del sito web e ispezionarla schiacciando il tasto destro del mouse, poi fare click su Ispeziona, oppure schiacciare F12 sulla tastiera).

Spostarsi quindi nella tab Network e controllare se gli stili CSS, i file Javascript e le immagini. Controllando i loro Response Headers vediamo che il valore di cf-cache-status é HIT, non più DYNAMIC. Questo significa che queste risorse sono ora fornite da Cloudflare e non più dal server di origine (in questo caso server condiviso su hosting Aruba).

Ce l’abbiamo fatta.

In alternativa, é possibile usare questo servizio online: https://cf-cache-status.net/

Pulire la cache

Quando ci sono delle modifiche per esempio ad un file css, o javascript, sará necessario cancellare la cache. Si puó cancellare la cache di un singolo file, di un gruppo di file oppure cancellare tutto quello che c’é in cache fino a quel momento. Nel menu in alto, quello a icone, cliccare su Caching, poi dalle tab cliccare Configurazione:

Cancella cache su Cloudflare
Cancella cache su Cloudflare

Opzionale: il plugin ufficiale per WordPress

Abbiamo detto che il sito su cui stiamo lavorando é un sito WordPress, e come é naturale che sia, Cloudflare ha rilasciato un plugin per il CMS più famoso del mondo. Si trova qui a questo indirizzo oppure é sufficiente entrare nel backend WordPress e cercarlo tramite la pagina dei plugin.

Utilizzando il plugin, ogni volta che si fanno modifiche al sito, non é più necessario dover fare il login sul sito Cloudflare, ma sará sufficiente aprire la pagina del plugin Cloudflare dentro il vostro WordPress. Ovviamente al momento dell’installazione e dell’attivazione del plugin, verrà chiesto agli utenti di inserire il loro indirizzo email (utilizzato per registrarsi per un account su cloudflare.com) e un token API – da creare. Questo è necessario per supportare tutte le funzionalità offerte dal plugin.

Plugin ufficiale Cloudflare per WordPress
Plugin ufficiale Cloudflare per WordPress

Conclusione

Questa piccola guida vuole essere solo una guida di base per mostrare velocamente come si puó sfruttare gratuitamente una CDN e come ottimizzare un sito web con Cloudflare. Ogni sito ha le sue esigenze dovute a traffico e grandezza, ma Cloudflare é un ottimo alleato per tutti quei business – o creatori di contenuti – che necessitano di protezione e velocitá.

How useful was this post?

Click on a star to rate it!

Average rating 0 / 5. Vote count: 0

No votes so far! Be the first to rate this post.