Oggi mi piacerebbe presentarvi uno dei recenti lavori di restyling che ho effettuato sul sito aziendale companybusiness.it.
La mia missione è sempre stata quella di garantire un’esperienza utente di prim’ordine!
Ecco perché tengo sempre conto delle recenti ottimizzazioni e sono sicuro che avrete notato una significativa differenza in ognuno dei lavori del mio portfolio.
Minificazione delle risorse esterne CSS, JS e HTML
Un aspetto fondamentale su cui ho lavorato è stata la minificazione delle risorse esterne CSS, JS e dell’HTML. Questa tecnica, utilizzata come parte della strategia di ottimizzazione delle prestazioni, coinvolge la rimozione di tutti i dati superflui all’interno dei file di codice, come spazi bianchi, linee vuote, commenti, ecc. Questo ha portato a una diminuzione delle dimensioni dei file, migliorando quindi i tempi di caricamento del sito e offrendo un’esperienza di navigazione più veloce.
Immagini nel Formato WebP
Ho anche revisionato la gestione delle immagini, trasformandole nel formato WebP.
Cos’è il formato WebP?
WebP è un formato di immagine moderno sviluppato da Google che fornisce una superiore compressione delle immagini per il web. A differenza di formati più comuni come JPEG e PNG, WebP offre una compressione senza perdita di qualità per le immagini, risultando in file di dimensioni significativamente ridotte. In termini più tecnici, WebP utilizza un algoritmo di compressione basato sul codec video VP8, che consente di ottenere immagini di alta qualità con dimensioni di file più piccole. Questo risultato si traduce in un più veloce tempo di caricamento della pagina e in un consumo di banda ridotto, migliorando l’esperienza utente generale sul sito web.
Secondo Google Developers, questo formato offre una compressione superiore e una qualità dell’immagine paragonabile ai formati tradizionali, consentendo un risparmio di peso fino al 60%. Di conseguenza, le immagini ora si caricano più velocemente, riducendo il tempo di caricamento della pagina.
Tema Custom Snello e Gestione WP Ottimizzato
Ho creato da zero un tema WordPress e l’ho reso molto più “snello” implementando solo le funzionalità necessarie per il progetto ed eliminando quelle non necessarie, migliorando così l’efficienza del sito. Inoltre, ho ottimizzato il gestionale del CMS eliminando blocchi e componenti non necessari e creando nuovi blocchi custom facili da usare, per garantire un backend veloce e reattivo, secondo le best practice di WordPress Codex.
Cosa si intende con “creazione di un tema WordPress custom” e quali sono i vantaggi?
Creare un tema WordPress da zero implica un’approfondita conoscenza di linguaggi di programmazione come HTML, CSS, JavaScript e PHP. Il processo di creazione di un tema custom parte dalla progettazione dell’architettura del sito web, includendo la definizione dei template per le diverse tipologie di pagine (home page, pagine di categoria, singoli post, ecc.).
La creazione da zero di un tema custom permette una maggiore flessibilità e controllo sul design e sulle funzionalità del sito, oltre a garantire che il tema sia snello, veloce e ottimizzato per le migliori prestazioni.
Sul lato tecnico, la personalizzazione del tema WordPress può includere la scrittura di codice PHP, HTML, CSS e JavaScript. L’obiettivo è creare un design unico e coerente che si adatti al brand e ai bisogni del pubblico del sito web. Inoltre, un tema personalizzato può contribuire ad ottimizzare le prestazioni del sito web, rendendolo più snello e veloce, eliminando funzioni e codici superflui che possono appesantire il sito.
Caricamento dei Plugin solo quando necessario
Ho adottato una strategia di gestione dei plugin che li carica solo quando è necessario. Questo riduce il peso delle pagine, migliorando la velocità di caricamento del sito. Questa tattica è parte della mia strategia di “performance budgeting”, un concetto suggerito da Google Web Dev che aiuta a mantenere le performance del sito sotto controllo.
Utilizzo di LiteSpeed, Caching delle risorse, Google Fonts ottimizzate e senza tracciamento, Lazy Loading delle immagini
Ho implementato LiteSpeed, un server web ad alte prestazioni che, secondo i test di LiteSpeed Technologies, può aumentare la velocità del sito fino al 20%. Ho anche introdotto la caching delle risorse, una pratica consigliata da HTTP Archive per aumentare la velocità di caricamento delle pagine.
Ho ottimizzato il caricamento dei Google Fonts, ospitandoli direttamente sul nostro server anziché richiederli dalla Content Delivery Network (CDN) di Google. Questa ottimizzazione è stata realizzata in conformità con il Regolamento Generale sulla Protezione dei Dati (GDPR) dell’Unione Europea, che sottolinea l’importanza del rispetto della privacy e dei dati personali degli utenti.
Infine, ho implementato il Lazy Loading per le immagini, una tecnica che consente di caricare le immagini solo quando appaiono nel viewport dell’utente, come suggerito da Web.dev, migliorando ulteriormente i tempi di caricamento della pagina.
Caricamento Asincrono dei File CSS e JS
Un altro passo che ho intrapreso è l’implementazione del caricamento asincrono dei file CSS e JS. Questo significa che i browser possono continuare a costruire il DOM della pagina senza dover aspettare che queste risorse siano completamente caricate. Questo approccio, come spiegato da Google Web.dev, può migliorare sensibilmente i tempi di caricamento delle pagine, contribuendo ad un’esperienza di navigazione più reattiva e immediata.
Miglioramento dell’Indexability del Sito
Inoltre, ho lavorato per migliorare l’indexability del sito. Questo è stato fatto ottimizzando la struttura delle pagine e l’uso dei meta tag, seguendo le linee guida di Google Search Console. Questo aiuta i motori di ricerca a comprendere meglio il contenuto del sito, migliorando la sua visibilità nei risultati di ricerca.
Miglioramento dell’Accessibility
Infine, un aspetto che tengo molto a cuore è l’accessibilità. Ho quindi lavorato per garantire che il sito rispettasse le linee guida WCAG (Web Content Accessibility Guidelines), in modo da offrire un’esperienza inclusiva a tutti i visitatori, indipendentemente dalle loro abilità.
In conclusione, sono orgoglioso di presentarvi il nuovo volto di CompanyBusiness.it. Questo restyling non è solo un cambio estetico: è il frutto di un lavoro tecnico accurato e meticoloso, che ha come obiettivo quello di fornire un sito più veloce, più accessibile e rispettoso della privacy. Vi invito a esplorare il sito e a condividere con me le vostre impressioni. Buona navigazione!
