PageSpeed OptiPic - optimización automática del sitio para los requisitos de Google Pagespeed Insights
JavaScript: Fusión, compresión, carga perezosa. CSS: compresión de tamaño y optimización de carga. Optimización de imágenes. Optimización de widgets de terceros y sistemas de análisis.

Detalles

Mejor manera de cargar fuentes de Google , @import o javascript

Me pregunto cuál es la mejor manera de cargar fuentes desde Google Fonts. Busqué en Google y encontré que <link/> es mucho mejor que @import. ¿Existen herramientas para medir la velocidad y el rendimiento a través de la red y el navegador? ¿Qué hay del método JavaScript?

<link href='http://fonts.googleapis.com/css?family=Oswald:300' rel='stylesheet' type='text/css'>

@import url(http://fonts.googleapis.com/css?family=Oswald:300);

<script type="text/javascript"> WebFontConfig = { google: { families: [ 'Oswald:300:latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })(); </script>

<link> es preferido a @import, ya que no bloquea las descargas paralelas. Consulte este enlace para obtener más detalles: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

Si las fuentes que desea utilizar son estáticas y están servidas por Google, la solución de JavaScript probablemente sea peor en cuanto a rendimiento que tanto <link> como @import, ya que debe cargar un script externo (//ajax.googleapis.com/ajax/libs/webfont/1/webfont.js) que luego, según lo que puedo ver, inyecta el mismo elemento de enlace que podría poner directamente en su fuente HTML.