JavaScript - Aceleracion de Pàginas Web

Hola :D
-Cuando lei sobre AMP (Accelerated Mobile Pages) me dio mucha felicidad , dado que hemos ido mejorando y aumentando los códigos durante años...también aumentándolos por años . Y era bueno que alguien tomara la posta de reducir el código y acelerar la carga de las pàginas web.
Cuando realice una lectura màs profunda , una gran desciluciòn vino a mi .no habia sintesis de còdigo ahi...sòlo un delivery de còdigo ...y lo peor es que cuando realizè un test de las pàginas que dicen traer la aceleraciòn...me di cuenta que esas pàginas son super lentas..(elevo captura de pantalla)

http://www.himpfen.com/amp-html-template/ esta es la pàgina donde esta el Primer Template AMP ....su
aceleraciòn es de 4.9s (testeado con GTmatrix) ...lejos esta de ser una pàgina ràpida con 4.9 segundos .
Cualquier pàgina con compresiòn de imagenes, compresiòn de còdigo html y compresiòn de css esta en los 1 segundos de carga (aproximadamente).
Mi pregunta es la siguiente:
1)-Hay algo que reduzca verdaderamente el peso de las pàginas web y acelere "verdaderamente" su carga.
2)-Se puede hacer un sintetizador de còdigo css con javascript...Es decir...que en vez de poner 50 veces "color=#fff" se ponga "c=#f" y el javascript diga "c es igual a color" y "#f es igual a #fff"
Gracias por leer y responder :D

Esto que solicitas Gavriel, hasta donde yo se, no se puede hacer...

Lo que si que puedes hacer, es un modificar las variables del javascript, para que ocupen una sola letra... por ejemplo:
var miVariable=10;
pone:
var m=10;

Esto, yo lo he realizado con Python, son la librería slimmer, que te lo hace automáticamente, pero tienes que tener en cuenta, que si en algún lugar de la web, llamas al código de javascript, habra variado el nombre de las variables y funciones.

Es lo máximo que yo he encontrado.

Buenas:

Se puede, y hay que decir que ya esta inventado. Te digo que la curva de aprendizaje de esto para mi es un poco grande. No necesitas conocer todo lo que pasa sino usarlo y ya esta. Te cuento lo que yo conozco de un curso que he hecho sobre esto:

1. Para reducir el html lo que hay que hacer es quitar el espacio entre las etiquetas que le asignamos para poder leerlo nosotros mas facil. Esto de tabular nuestro codigo fuera, tienen que quedar todas las etiquetas juntas (mas adelante explico como sin tener que ir una a una).

2. Para el css existe Sass y Less que es una forma de programar para css. como en el caso anterior tendras que compilar primero tus documentos sass o less (pasarlos por alguna herramienta) y el te suelta el css mas optimizado para la web.

3. Para javascript se junta el codigo y se minifica el codigo (no se si es asi en español se que la palabra en ingles en minify) Hay herramientas que te seleccionan tu codigo, tus librerias y te lo deja todo en un solo archivo. Puedes leer sobre browserify.

Desconozco ahora mismo si esto se puede usar para reutilizarlo con codigo php (es decir que el codigo php te devuelva un html comprimido) ya que el uso que le daba era con phonegap para crear app's (es decir que creaba el html, css y js y se comprimia y se incrustaba dentro de una app).

Las herramientas que conozco son (todo sobre nodejs):

bower para descargar tus paquetes (por ejemplo si una app necesita jquery...)
yeoman es como un asistente para crear nuevos proyectos
y la magia se realiza en grunt o glup que son herramientas en javascript que se encargaran de generar tareas para:

comprimir tu javascript, comprimir imagenes a los tamaños que se necesitan en la web. imagino que tambien realizaran algo de sass/less todo es cuestion de buscar.

Esto es para crear html embebido para una app o en todo caso una web estatica o tambien una web en la que se trabaja con angularjs por ejemplo en donde no se recarga la pagina sino que se reciben las actualizaciones por ajax. Para trabajar lo que conocemos de toda la vida con php podras buscar:

1. En php algun motor de plantillas que haga minify de tus html salientes
2. En algun framework como laravel lo mismo que lo anterior por ejemplo: https://github.com/fitztrev/laravel-html-minify
3. Para Sass y less he escuchado que tienes la opcion de algun motor en el servidor que transforme tu codigo a css al vuelo.

En fin. Espero que se entienda. es mucha info. Te recomiendo que empieces con nodejs, bower, browserify, grunt o glup.

Saludos.

Buenas de nuevo:

Se me quedan cosas en el tintero. Tambien hay que decir que hay que buscar un mejor uso de los cdn's ya que en algunos hosting puede que te digan que ellos hacen el trabajo pero en otros tendras tu que decirles que tal y tal documento se pasan carguen en los cdn y luego adaptar el codigo para que haga uso del mismo, esto no se suele optimizar casi nunca.

Por otro lado tienes la compresion de las paginas que si el servidor lo administras tu, puedes configurar donde realizar la compresion. Desconozco si los hosting normales comprimen ciertos documentos.

Estan los reverse proxies que se encargan de comprobar cambios en los documentos para no tener que pedirle al servidor de nuevo que interprete el php (php 7 debe llevar una funcionalidad ahora que hace uso de una cache).

Cuando tu haces la app puedes hacer uso de este tipo de cosas, ahora cuando tu software viene ya en un framework o un cms tienes que confiar en lo que te dan y lo que va sacando la comunidad. Por ejemplo cuando desarrollas en wordpress tendras sistemas de cache que vienen implementadas en el propio nucleo de la aplicacion, lo mismo pasa con prestashop magento....

En fin, creo que es todo lo que se.

Saludos.

Hola amigo xve , hola amigo vainas
Muchisimas gracias por la ayuda brindada...me a servido de mucho y me a abierto un horizonte que desconocia.
Ahora mismo comienzo con la lectura de las herramientas que han aportado.No habia escuchado de ellas ....asi que me pondrè a leer y a interiorizarme en ellas.
Muchas Gracias

Excelente Vainas!!!