javascript - validacion - ¿Qué puedo hacer para disminuir los tiempos de carga de las páginas HTML?
validar formulario javascript antes de enviar (6)
Cuando se trata del rendimiento de las páginas, existen algunos métodos importantes para mantener rápidos los tiempos de carga de su página.
Organización CSS
Intente minimizar los estilos CSS en línea y mantenga juntas las reglas CSS más utilizadas en hojas de estilo externas. Esto ayuda a mantener los estilos reutilizables para más adelante, y la falta de atributos de estilo hace que la descarga de su página HTML sea más rápida.
Minificación
Dado que su CSS y Javascript se deben descargar desde su servidor al cliente, más pequeño siempre es mejor. Yahoo tiene una gran herramienta llamada YUI Compressor que puede usarse para reducir el tamaño de tu CSS y JavaScript incluido. Las bibliotecas populares, como JQuery, también tendrán disponibles las versiones minimizadas y de desarrollo de sus bibliotecas. ¡Solo recuerde guardar una copia de la versión no minificada para fines de depuración!
Compresión de imagen
Es posible que desee considerar la compresión de sus imágenes. Para los archivos JPG, intente configurar alrededor del 80% de compresión y vea cómo se ve el resultado. Puedes jugar con los niveles hasta obtener un resultado decente. Para los archivos PNG, es posible que desee ver algunas de las herramientas de compresión PNG disponibles .
CSS Sprites
Una táctica interesante para guardar solicitudes HTTP es el uso de CSS Sprites. La teoría básica es que en lugar de descargar varias imágenes, simplemente descarga una imagen grande con todas sus imágenes contenidas en ella. Esto significa que, en lugar de realizar solicitudes continuas de archivos de imagen, el navegador solo necesita realizar una sola solicitud. El tutorial CSS Sprites: qué son, por qué son geniales y cómo usarlos tiene buena información sobre el proceso, incluida la conversión desde un diseño de imagen múltiple existente.
Ordenamiento de recursos
Cuando se trata de ordenar su CSS y Javascript, usted quiere que su CSS sea lo primero. El motivo es que el subproceso de representación tiene toda la información de estilo que necesita para representar la página. Si la inclusión de Javascript es lo primero, el motor de Javascript debe analizarlo todo antes de continuar con el siguiente conjunto de recursos. Esto significa que el subproceso de representación no puede mostrar completamente la página, ya que no tiene todos los estilos que necesita. Aquí hay un ejemplo:
<link rel="stylesheet" type="text/css" href="/css/global.css" />
<link rel="stylesheet" type="text/css" href="/css/forms.css" />
<script type="text/javascript" src="/js/formvalidation.js"></script>
Rastreo / Ubicaciones de secuencias de comandos de afiliados
Muchos sitios utilizan scripts de seguimiento y / o afiliados. Si hay un problema con el host remoto y los scripts se incluyen en la etiqueta <head> , el navegador debe esperar a que se produzcan las descargas antes de continuar. Si bien es bueno tener esas cosas, no deben ralentizar la experiencia del usuario. Se recomienda mover dichos scripts hacia la parte inferior de la página, justo antes de la etiqueta </body> :
<!-- HTML Here -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src=''" + gaJsHost + "google-analytics.com/ga.js'' type=''text/javascript''%3E%3C/script%3E"));
</script>
</body>
Activos que faltan
La falta de archivos CSS y javascript significa que el navegador debe comunicarse innecesariamente con el servidor para capturar archivos que no existen. Dependiendo de dónde se encuentre el servidor y de cuántos archivos falten, esto podría agregar cargas de páginas más lentas.
Nota : Esto debe ser una publicación de wiki de la comunidad.
Para probar y hacer que la experiencia del usuario sea lo mejor posible, ¿qué puedo hacer para que la carga de mis páginas HTML sea más eficiente?
La plantilla de HTML5 te llevará lejos sin sudar.
Minimice su fuente HTML, fuente CSS y JS Source. Gzip si es posible.
http://code.google.com/p/htmlcompressor/
Para JavaScript, intente: http://code.google.com/closure/compiler/
Para comenzar, debes usar una herramienta como YSlow (extensiones Firefox y Chrome disponibles) o Googe Page Speed Online . Hay otros que están por ahí, estoy seguro. Estas herramientas calificarán el rendimiento de sus sitios en diferentes áreas y brindarán consejos sobre cómo puede mejorarlos.
Después de usar estas herramientas por un tiempo, comenzará a cambiar la forma en que construye sus páginas y toma en cuenta estos pasos adicionales.
También puede consultar los cargadores de script asíncronos para sus archivos JavaScript. Uno popular es head.js. Una búsqueda en Google debería proporcionarle más artículos sobre técnicas más profundas como esta.
Referencia obligatoria.
Usa la función de descarga de PHP después de tu etiqueta de cabeza
<html>
<head>
</head>
<?php flush(); ?>
<body>
</body>
<html>