Local blog for Italian speaking developers
Cache AMP di Google, AMP Lite e l'esigenza di velocizzare
2 febbraio 2017
A Google crediamo nella progettazione di prodotti che abbiano come qualità essenziale la velocità. Il formato AMP (Accelerated Mobile Pages) contribuisce già a caricare i contenuti in modo veloce e affidabile, ma possiamo fare ancora di più.
Il caching intelligente è uno degli elementi chiave nelle esperienze AMP quasi-istantanee dell'utente che utilizza Ricerca Google e Google News & Weather. Grazie al caching, di solito siamo in grado di rendere i contenuti fisicamente più vicini agli utenti che ne fanno richiesta, in modo che i byte debbano fare un viaggio più breve attraverso la rete per raggiungerli. Inoltre utilizzare un'unica infrastruttura comune, come quella di una cache, offre una maggiore coerenza nella gestione delle pagine nonostante il contenuto provenga da molti host che potrebbero avere una diversa, e molto più grande, latenza nella gestione del contenuto rispetto alla cache.
Risultati più veloci e più coerenti sono i motivi principali per cui le pagine fornite nell'esperienza AMP di Ricerca Google provengono dalla
Cache AMP di Google
. Il contenuto unificato della cache, che gestisce l'infrastruttura, offre l'interessante possibilità di creare ottimizzazioni scalabili per migliorare l'esperienza con le centinaia di milioni di documenti servite. Fare in modo che qualsiasi documento possa usufruire di questi vantaggi è uno dei motivi principali per cui la Cache AMP di Google è disponibile gratuitamente per tutti.
In questo post ci concentreremo su due miglioramenti che abbiamo introdotto recentemente: (1) fornire immagini ottimizzate e (2) servire contenuti più efficientemente in condizioni di larghezza di banda limitata grazie a un progetto chiamato "AMP Lite".
Ottimizzazioni delle immagini grazie alla Cache AMP di Google
In media in tutto il web, le immagini costituiscono il
64% dei byte
di una pagina. Ciò significa che le immagini sono un obiettivo importante per le ottimizzazioni di forte impatto.
Applicare l'ottimizzazione delle immagini è un modo efficace per ridurre i byte utilizzati in rete. La Cache AMP di Google adopera lo stack di ottimizzazione delle immagini usato dai
Moduli PageSpeed
e dalla
Compressione dati di Chrome
(tieni presente che per effettuare le trasformazioni sopraindicate, la Cache AMP di Google ignora l'intestazione "Cache-Control: no-transform"). I siti possono ottenere le stesse ottimizzazioni delle immagini all'origine installando
PageSpeed
sul server.
Ecco come avvengono alcune di queste ottimizzazioni che ti proponiamo:
1) Rimozione dei dati invisibili o difficili da vedere
Rimuoviamo i dati dell'immagine che sono invisibili agli utenti, come le miniature o i metadati di geolocalizzazione. Per le immagini JPEG, riduciamo anche la qualità e i campioni di colore, se non sono del tutto necessari. Per l'esattezza, riduciamo la qualità del JPEG a 85 e i campioni di colore a 4:2:0, ossia un campione di colore per ogni quattro pixel. La compressione di un JPEG a una qualità superiore di questa o con più campioni di colore richiede un numero maggiore di byte, ma la differenza è quasi impercettibile.
I dati dell'immagine ridotti vengono pertanto compressi in modo sostanziale. Abbiamo scoperto che queste ottimizzazioni riducono i byte almeno del 40%, pur non essendo visibili all'occhio dell'utente.
2) Conversione delle immagini al formato WebP
Alcune immagini sono adatte ai dispositivi mobili. Convertiamo i JPEG in
WebP
per i browser supportati. Questa trasformazione apporta un'ulteriore riduzione di byte del 25% e oltre senza perdita di qualità.
3) Aggiunta di srcset
Aggiungiamo "srcset" se non è stato incluso. Questo vale per i tag "amp-img" con "src" ma senza attributo "srcset". L'operazione prevede l'espansione del tag "amp-img", così come il ridimensionamento dell'immagine a dimensioni multiple. Questo riduce ulteriormente il numero dei byte sui dispositivi con schermi piccoli.
4) Utilizzo di immagini a qualità inferiore in alcune situazioni
Riduciamo la qualità delle immagini JPEG quando è una preferenza indicata dall'utente o in condizioni di rete molto lente (fa parte di AMP Lite, descritto di seguito). Ad esempio, riduciamo la qualità delle immagini JPEG a 50 per gli utenti di Chrome che hanno abilitato
Data Saver
. Questa trasformazione porta a un'ulteriore riduzione di byte del 40% e oltre per le immagini JPEG.
Gli esempi seguenti mostrano le immagini
prima
(sinistra) e
dopo
(destra) le ottimizzazioni. Originariamente l'immagine era di 241.260 byte e, dopo aver applicato le ottimizzazioni 1, 2, e 4, si è ridotta a 25.760 byte. Dopo le ottimizzazioni l'immagine appare sostanzialmente invariata ma è stato salvato l'89% dei byte.
AMP Lite per condizioni di rete lente
Molte persone nel mondo accedono a Internet con velocità di connessione ridotte o su dispositivi con poca RAM e abbiamo scoperto che alcune pagine AMP non sono ottimizzate per gli utenti fortemente penalizzati da questo fattore. Google ha lanciato AMP Lite proprio per eliminare altri byte dalle pagine AMP di questi utenti.
Grazie a AMP Lite, possiamo applicare tutte le ottimizzazioni appena descritte alle immagini. In particolare usiamo sempre livelli di qualità inferiori (vedi punto 4).
Inoltre ottimizziamo i caratteri esterni utilizzando il tag
amp-font
, impostando il timeout di caricamento dei caratteri a 0 secondi in modo da visualizzare le pagine immediatamente, indipendentemente se il carattere esterno sia stato precedentemente memorizzato nella cache o meno.
Stiamo lanciando AMP Lite per gli utenti con limitazioni di larghezza di banda in diversi paesi come il Vietnam e la Malesia, e per i dispositivi con poca RAM, a livello globale. Ricorda che queste ottimizzazioni possono modificare i particolari di alcune immagini ma non alterano altre parti della pagina, come gli annunci.
* * *
Nel complesso
abbiamo ottenuto una riduzione del 45% in byte
combinando tutte le ottimizzazioni elencate sopra.
Speriamo di fare ulteriori progressi nell'utilizzo più efficiente dei dati degli utenti per fornire esperienze AMP ancora più veloci.
Pubblicato da Huibao Lin e Eyal Peled, Software Engineers, Google
Etichette
Android
Firebase
machine learning
Google Cloud Platform
GDL
Eventi
Google Developers Live
Google Play
TensorFlow
App
Chrome
Cloud
api
GDLItalia
GDE
GDG
Google Assistant
iOS
Kotlin
Actions on Google
Deep Learning
AppEngine
AMP
BigQuery
Cloud Functions
Flutter
Android Studio
Google Developers Expert
Università
Google AppEngine
JavaScript
AI
Android Wear
GAE
Google Play Store
HTML5
Maps
security
Android App Development
AngularJS
IoT
Kubernetes
Annunci
Cloud Firestore
Cloud Machine Learning
Google I/O
Polymer
Android Things
Community
DevTools
Google App Engine
intelligenza artificiale
Entrepreneurship
Firebase Analytics
GSoC
Games
Google Cast
ML
open source
Crashlytics
Dart
Diversity
Drive
Google Data Studio
Google Play Games
TensorFlow Lite
Android Developers
Android O
Cloud Spanner
Cloud TPU
Compute Engine
DevFest
Google Compute Engine
Google Developers
Material Design
Mobile
PWA
Python
Startup
AIY Project
ARCore
Android Jetpack
AndroidDev
Androidq
Apps Script
Artificial Intelligence
Augmented Reality
Firebase Cloud Messaging
Google Cloud
Google Maps
Gsuite
IO19
ML kit
Research
VR
coding
unity
#io19
AR
Android Dev Summit
Android Developer
Android Q
Cardboard
Cloud AI
Coral
Developers
Dialogflow
Firebase Realtime Database
Gmail
Google AI
Google Cloud Messaging
Google ContainerEngine
Google Play Console
Kotlin Coroutines
NLP
Programming
Responsive Design
TensorFlowjs
Testing
WTM
Women
beacons
cloud storage
developer
node JS
student programs
women techmakers
API Cloud Vision
Add-ons
Android P
AndroidDevStory
Animation
AutoML
Brillo
Classroom
DSC
Database
Developer Student Clubs
Edge TPU
Fabric
Featured
Flutter Web
G Suite
GWT
GoLang
Google
Google Brain
Google Cloud Next
Google Container Engine
Google Developer Groups
Google I/O Extended
Graph
Hosting
Instant Apps
Keras
Livedata
Mobile Sites
Prediction
Privacy
Project Tango
SDK
Stackdriver
Tales
UI
Udacity
Virtual Reality
Web
Web Development
YouTube
analytics
android security
api.ai
courses
google io
indies
natural language processing
reti neurali
sign-in
young developers
2d Animation
3d
AIY
ARkit
Adversarial Learning
Alpha
Android App
Android App Developmen
Android App bundle
Android Architecture
Android Architecture Components
Android Auto
Android Automotive OS
Android Dev Summit Android Developer
Android Developer Challenge
Android Developers GooglePlayAwards
Android Development
Android Go
Android Instant App
Android Pie
Android Q Scoped Storage
Android Q audio
Android Styles
Android audio playback capture
Android codelabs
AndroidTV
AndroidX
Angular
Aogdevs
Api Design
App Development
App Distribution
Apps
Architecture
Architecture Components
Arduino
Best Practices
Betatesting
Bugs
C++
Certification
Cloud Anchors
Cloud Next
Cloud Run
Cloud Service Platform
Cloud Shell
Cloud Study Jam
Coached Conversational Preference Elicitation
Commerce
Community Connector
Computer Science
Consistency
Containers
Converge
Conversation Design
Crash Reporting
DLS Design
Dagger
Data Science
Databases
Dependency Injection
Design
Developer Communities
Developer Community
Developer Culture
Developer Story
Developing Media Apps
Development
Eager
Edge TPU Dev Board
Education
Emulatore Android
Error Message
Eslint
Europe
Firebase Extensions
Firebase Summit 2019
Firebasehosting
Flutter 1.5
Flutter at IO
FlutterDark
GCE
GDD
Game Development
Gboard
Gesture Navigation
Glass
Go
Google AI Quantum
Google App Script
Google Cloud Functions
Google Cloud billing
Google Coral
Google Developer Days
Google Home Hub
Google IOS Android
Google Identity Platform
Google Launchpad
Google Lens
Google Now
Google Photos
Google Play Devs
Google Play Indie Games Festival
Google Play Instant
Google Plus
Google codelabs
Google+
GoogleDevWeekly
GoogleLaunchpad
GooglePlay
Graphics
Healthcare
I/O
IO
IO19 Flutter
In-app Billing
Indie Games
Indie Games Festival
Indie games showcase
Indie showcase
Ingress
Instant Games
Issues
Java
Jetpack
Knative
Kotlin Beginners
Kotlin Everywhere
Kotlin codelabs
Lighthouse
Live Caption
Live Streaming
Localization
Location
M-Theory
Mondaygram
Monetization
NYT
NativeScript
Navigation
Neural Graph Learning
Neural Structured
Nodejs
OS
OS Updates
Olivex
One Time Codes
Online Education
PHA
Performance Monitoring
Policy
Posenet
Project Mainline
Project Treble
Quantum Computing Theory
Reactive Programming
Regression
Remote Config
Resonance Audio
Room
Scoped Storage
Semantics
Semi Supervised Learning
Serverless
Sms Retriever Api
Sms Verification
Speech Recognition
Swift
Tensorflow Core
Tensorflow Hub
Test Lab
Text
Tokenizer
Tpu
Transformers
UX
UX Design
UX Research
Universal Sentence Encoder
Unsupervised Data Augmentation
Unsupervised Learning
User Experience
Viewmodel
Voice
WWW
Wear OS
WebAssembly
Widget
Women in Tech
WomenTechmakers
android kotlin
app stability
assistant
audio recording
augmented faces
authsub
best practices and updates
billing
botnet
business
c++ games
cancer
chatbot
chrome privacy
codelab
codelabs
competition
daydream
designer
dominio .dev
error handling
event
firebase games
firebase gdc
firebase hosting
firebase unity
game center authentication
game testing
games authentication
gdc
google summer of code
googledevelopers
grow
hashcode
indie
indie developers
internship
kids
machine intelligence
machine learning accelerator
maker
multi-platform
nearby
oauth
openid
performance
persistent AR
privacy sandbox
prizes
prototype
purchase flows
queries
realtime
responsible AI
security rules
showcase
solutions challenge
startup africa roadtrip
startup times
students
summer of code
unity crashlytics
verify apps
win
Archivio Blog
2020
feb
gen
2019
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2018
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2017
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2016
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2015
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2014
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
2013
dic
nov
ott
set
ago
lug
giu
mag
apr
mar
feb
gen
Feed
Follow @GoogleDevsItaly