Come ho sviluppato il mio blog senza costi

Ciao!
In questo primo articolo parlerò di com’è strutturato il mio sito web, degli stack che ho scelto per lo sviluppo e delle ottimizzazioni che ho dovuto fare per ottenere uno score ottimale sia a livello di performance che di SEO.

Topics

1. Scelta delle tecnologie
2. Ottimizzazione delle perfomance
3. Ottimizzazione SEO
4. Conclusioni

1. Scelta delle tecnologie 🤯

La scelta delle tecnologie, in questi anni, è sempre più difficile perché ci sono sempre più frameworks che risolvono più o meno gli stessi problemi in maniera molto simile.
Basta fare una ricerca sul web per trovarsi sommersi da decine di nomi di frameworks per poi capire quale fa al caso tuo studiandone tutte le caratteristiche.
Finalmente, dopo qualche giorno (forse) di studio e ricerche, trovi il framework che fa al caso tuo!

Per il mio sito ero molto combattuto su due scelte:

• Utilizzare uno stack già utilizzato in passato (Next.js - Stripe)
• Utilizzare uno stack completamente nuovo (Qwik - Supabase)

Spoiler: Ho scelto Qwik e Supabase 😎

Scelta Framework Front End

Sia Next.js che Qwik sono ottimi per quanto riguarda performance, ottimizzazione SEO e routing , inoltre entrambi hanno uno stile di scrittura dei componenti come React (mio stack front-end principale).
Come framework front-end ho optato per Qwik perché giovane, fresco e promettente e sarebbe stato uno stack nuovo da aggiungere alle competenze 💪.

Scelta Framework Back End

Lato back-end è stata più semplice la scelta perché il problema principale era il budget. Avrei scelto Strapi come headless CMS solamente per una questione di interfaccia ma avrei dovuto spendere per l’hosting.
Supabase ha comunque un’interfaccia carina ma pecca, secondo me, per il data entry in quanto ha, giustamente, un’interfaccia da database. Il piano gratuito di Supabase è molto generoso e potrebbe essere abbastanza per lanciare qualsiasi sito web senza spendere un centesimo.
Le perfomance sono ottime e l’sdk molto semplice da utilizzare. Con Supabase è possibile avere uno storage, un database ed è possibile creare delle edge functions custom e mi fermo qui, per ora non voglio entrare troppo nei particolari, avremo modo di approfondire 😊

2. Ottimizzazione delle perfomance 🥳

Per ottimizzare le perfomance del sito ho dovuto valutare diversi approcci ed ho dovuto approfondire alcuni argomenti come immagini, animazioni e le chiamate verso Supabase. Per l’ottimizzazione delle immagini ho optato l’utilizzo della libreria unpic che trasforma l’url dell’immagine (CDN) anziché trasformarla lato client.

Per le animazioni ho optato per la creazione di un componente custom per evitare di installare una libreria non necessaria. Per l’ottimizzazione delle animazioni ho utilizzato solamente attributi di trasformazione come scale, translate, rotate e opacity. Oltre questi, alcune animazioni hanno l’attributo will-change: contents. Questo attributo indica al browser che l’elemento cambierà e in questo modo migliorano le performance delle animazioni.

Per ottimizzare le chiamate verso Supabase ho creato delle viste in modo tale da ridurre il numero di chiamate ed effettuare delle join mirate direttamente nel database anziché lato client in modo da avere i dati già pronti per come dovrebbero essere visualizzati.

Lato server, nel mio sito, le chiamate al server vengono fatte nella landing page per prendere gli ultimi articoli e le relative immagini, nella pagina della carriera e, ovviamente, nella pagina blog e in tutti gli articoli. Ecco il risultato di un check fatto in ambiente di produzione con Lighthouse dove sopra ci sono le performance della landing page desktop e mobile e sotto di un articolo di esempio:

Ci sono ancora delle ottimizzazioni da fare lato mobile ma tempo al tempo 😜.

3. Ottimizzazione SEO 🤖

Per quanto riguarda la SEO non voglio dilungarmi troppo in questo articolo perché c’è molto da dire. In generale ho cercato di seguire le linee guida principali per la struttura delle pagine come utilizzo ed ordinamento degli heading tags, l’utilizzo dei tags meta e dei dati strutturati per gli articoli, le descrizioni e le keyworkds.
Approfondiremo questo argomento in articoli specifici perché spesso vengono sottovalutati alcuni aspetti della SEO più o meno importanti che, se sommati, possono portare alla vanificazione del lavoro svolto soprattutto in questi tempi dove la visibilità è molto importante.

Sono abbastanza soddisfatto del risultato ottenuto, ho utilizzato come tool SEO Tester che oltre alle verifiche da anche qualche informazione su come poter ottimizzare i propri contenuti.

4. Conclusioni 🥸

Sono del parere che con qualche accorgimento, un po’ di pazienza, motivazione e tanta voglia di fare e di imparare si possono raggiungere ottimi risultati. Tornando indietro rifarei le stesse scelte che ho fatto per lo sviluppo del mio sito, la combo Qwik e Supabase, se utilizzati in maniera adeguata, sono ottimi tool per progetti di qualsiasi dimensione anche se personalmente li utilizzerei per progetti di piccole dimensioni o per creare dei POC in maniera rapida.