php - test - tiempo de carga web
¿Cómo hacer que la primera parte del sitio se cargue primero?(Como en Google PageSpeed) (14)
¡Esto va a ser feo! ¡ Definitivamente debería considerar el uso de llamadas ajax para cargar fragmentos de página DESPUÉS de que se cargue la primera etapa de contenido! Esto romperá casi todos los estándares web conocidos, pero podría representar el sitio web en partes ...
Dicho esto: aquí está lo feo.
Primero: deshágase de la etiqueta <html> de su sitio web, comience con la <head> NO use una etiqueta <body> tampoco. Ahora envíe su código html en el orden en que desea que se cargue (primero arriba) usando echo ... después de cada etiqueta de cierre de un grupo (digamos </table> o </div> ) use flush(); ob_flush(); flush(); ob_flush(); esto enviará todo el contenido conocido al navegador inmediatamente. El navegador ahora decide si puede reproducir el contenido conocido o no y si lo hará (según los detalles del navegador y la configuración del usuario), pero con algunas excepciones, lo hará. a algunos navegadores les gusta esperar la etiqueta de cierre del cuerpo, por eso lo descartamos, otros incluso esperan la etiqueta de cierre html (safari afair), por eso también lo hemos eliminado. Si usa sabiamente el escenario de eco-vaciado, debería poder dividir la página en partes que se puedan reproducir y que la mayoría de los navegadores mostrarán sin error.
Nuevamente ... no lo hagas de esta manera ... es malo, feo y ni siquiera está cerca de los estándares web
Pero tú lo pediste.
Tengo un sitio muy grande y me lleva bastante tiempo cargarlo. Tarda unos 120 segundos. Lo que estoy tratando de hacer es cargar la primera mitad de las cargas del sitio 1. Luego el usuario puede navegar mientras se están cargando otras partes.
Lo que estoy tratando de hacer está abajo.
- Primero de todo, ¿es esto posible?
Según mi conocimiento, sí, ya que Google PageSpeed hace eso. Pero el problema es que si uso PageSpeed, tendría que cambiar la configuración de mi servidor DNS, etc. Me gustaría hacerlo yo mismo.
- ¿Cómo puedo hacerlo?
- ¿Qué tipo de tecnología debo usar?
Dado que las páginas tienen la extensión .php y están escritas en lenguaje PHP.
¿Con PHP puro? No inteligente.
$(function() { $(''#body'').delay(1).fadeOut(); });
Ejemplo de Fiddle: http://jsfiddle.net/r7MgY/
¿No hacen los navegadores el documento como viene? Cualquier cosa que ponga en la parte superior del archivo será recibida primero por el cliente, y por lo tanto, se mostrará primero. Por ejemplo, cuando intenta ver un archivo de imagen muy grande en línea, se carga de arriba a abajo. Lo mismo es cierto para las páginas web. Simplemente ponga el contenido que desea cargar primero en la parte superior de la página.
Respuesta a la pregunta uno: sí Respuesta a la pregunta dos: anterior Respuesta a la pregunta tres: Nada, solo coloque la página en el orden correcto.
¿Todo esto tiene que estar en la misma página? ¿Tiene sentido dividir el contenido en varias páginas? ¿Se puede retrasar un poco hasta que la persona lo solicite? ¿Se puede agrupar en pestañas? Las pestañas ocultas podrían cargarse perezosamente, por ejemplo.
Piense seriamente en la reestructuración del contenido de otras maneras. Es posible que pueda llegar a un acuerdo alternativo que simplifique el problema.
Bueno, la idea es más o menos la misma que la descrita por Pawan Nogariya. Deberá obtener vistas y datos de forma asincrónica y luego mostrarlos. Pero esto significa que nunca redireccionarás o publicarás en ninguna otra página, sino que obtendrás todas las vistas a través de ajaz. Esto hará que tu aplicación SPA (aplicación de una sola página) como Gmail. Y, esto también significará que debe realizar un seguimiento de lo que se ha renombrado y lo que no, dejándolo en un desastre. Entonces, en lugar de hacer todo a su manera, ya existen marcos de trabajo desarrollados y populares que le permiten hacer eso, pero también lo convierten en un SPA. Lo que significa que su aplicación no "publica" en el servidor como en la redirección, pero todo está hecho usando Ajax.
Puede usar Backbone ( Backbone.js ), Knockout ( Knockout.js ) y otros para lograrlo. Estos son marcos de trabajo basados en javascript que ayudan a lograr lo que acaba de pedir y pueden ser ejemplos y tutoriales que también están disponibles fácilmente. Puede usarlo con cualquier idioma, ya que lo estamos utilizando con C # (MVC) para una aplicación relativamente grande.
Es necesario determinar por qué el sitio se está cargando lento. ¿Cuál es el tamaño de los datos que está enviando? Google y Firefox tienen herramientas de desarrollo web para ayudarlo a determinar qué elementos están demorando más tiempo en cargarse. Una vez que haya determinado al culpable, intente cargar a los peores delincuentes de forma asíncrona.
Echa un vistazo a este artículo sobre solicitudes aync: https://segment.io/blog/how-to-make-async-requests-in-php/
Lo que quieres es lo que Facebook hace con Bigpipe y aquí está una publicación SO relevante: Algoritmo de la técnica de Bigpipe de Facebook
Hay otras soluciones que involucran todo tipo de Javascript, pero como quiere que PHP y Facebook usen PHP , debería leer en Bigpipe. Juho incluso tiene un ejemplo escrito en PHP para que cumpla con los requisitos de PHP (pero sí, todavía requiere js pero no AJAX).
Para tu esta pregunta
Excepto AJAX ¿Hay alguna forma de hacer esto?
Creo que puedes probar los iframes si pueden ayudar.
La carga del contenido principal en la página se carga sin iframe al cargar otros contenidos en los iframes después de cargar las páginas.
Este jsfiddle
jsfiddle.net/cGDuV/
puede ayudarlo a comprender la carga diferida con iframe, que se menciona en esta post de .
Puede utilizar javascript para el mismo si desea evitar jquery.
Puede manipular el búfer de salida de modo que se vacíe temprano para lograr lo que busca en la captura de pantalla que publicó en su pregunta. http://www.stevesouders.com/blog/2013/01/31/http-archive-adding-flush/
Puedes descargar todas tus imágenes. Aquí hay un complemento de jquery que lo hace fácilmente appelsiini.net/projects/lazyload
Puedes combinar todos tus js en un archivo. Lo mismo con tus archivos css. Esto ayudará a la velocidad.
Puede incorporar el almacenamiento en caché, los encabezados de expiración y la compresión gzip / deflate https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess
Le sugeriría que cargue la basura de su widget de javascript de terceros (botones de Google+, botones fabulosos, redes sociales, cosas de Twitter) de una manera asincrónica no bloqueante para que no ralentice la página al principio. http://css-tricks.com/thinking-async/
Optimiza tus imágenes tanto como sea posible. http://kraken.io/
Utilice un CDN http://www.maxcdn.com/
Finalmente, pruebe su sitio y vea dónde está el gran cuello de botella y dónde puede mejorar el sitio para optimizar la velocidad. Utilice la función de gráfico de cascada http://www.webpagetest.org/
Puede utilizar el concepto de carga perezosa.
Solo puede cargar el contenido que sea necesario durante la carga, luego, utilizando jquery y ajax, puede cargar el contenido restante.
De esta manera, el usuario puede navegar e interactuar fácilmente con la parte ya cargada, mientras que la otra parte se cargará de forma asíncrona.
jQuery ajax o método post puede ayudarte en esto.
Un ejemplo simple podría ser,
Si hay 5 partes de contenido en su página, 2 deben cargarse inmediatamente
La página se cargará con 2 partes cargadas, por lo que tomará bastante menos tiempo que 5 partes cargando
Después de cargar el documento, utilizará ajax para cargar las 3 partes restantes. Ajax enviará una solicitud a la página específica de su sitio web (posiblemente se llamará AjaxRequestHandler.php) con algunos parámetros, y esta página procesará su solicitud y generará un html para esto y la enviará de vuelta a su página principal, que solo mostrará este el código HTML devuelto y todo esto sucede de forma asíncrona, por lo que el usuario podrá comunicarse con las 2 partes cargadas inicialmente
E incluso si eres nuevo en tecnologías web, supongo que debes tener conocimiento de al menos ajax y llamadas asíncronas, etc. para lograr una carga lenta.
Editar:
Para tu esta pregunta
Excepto AJAX ¿Hay alguna forma de hacer esto?
Creo que puedes probar los iframes si pueden ayudar.
La carga del contenido principal en la página se carga sin iframe al cargar otros contenidos en los iframes después de cargar las páginas.
Este jsfiddle
jsfiddle.net/cGDuV/
puede ayudarlo a comprender la carga diferida con iframe, que se menciona en esta post de .
Puede utilizar javascript para el mismo si desea evitar jquery.
Teniendo en cuenta todo lo que se mencionó anteriormente, puede pensar en almacenar en caché partes de su código de datos / html con memcache o de cualquier otra forma posible, de modo que omita su generación cada vez. Por supuesto, esto depende mucho de la frecuencia con la que cambian los datos.
Una de las cosas que puede hacer es cargar todo lo esencial (la mitad superior) de la página normalmente, luego usar javascript / ajax para cargar la segunda mitad de la página. Esta es una técnica muy común (y se usa a menudo para cargar imágenes).
Aquí hay un excelente tutorial de jQuery para diseñadores, que explica cómo usar jQuery para cargar imágenes de forma asíncrona después de cargar la página. http://jqueryfordesigners.com/image-loading/
Dicho esto, un tiempo de carga de dos minutos parece muy excesivo. Tal vez debería verificar si hay algo que pueda estar desacelerando su servidor.
en mi opinión necesita una solución de desplazamiento sin fin. Es decir, tener una cantidad fija de contenido por "página" (podría tener un valor estimado de 1500px de altura). Use jQuery para cargar otra "página" cuando el usuario se desplace hacia abajo en una cantidad establecida.
Si realmente desea cargar incondicionalmente todo el contenido, solo use el mismo enfoque, y en el documento listo active la siguiente página para cargar. El bucle del cargador de la página hasta que todo está cargado. De esa manera, usted carga la primera "página" y difiere el contenido "debajo del pliegue" a las solicitudes posteriores.
Los recursos de captación previa de la página web requieren archivos grandes para cargarse a menudo se pueden beneficiar al cambiar el orden en que esos archivos se solicitan desde el servidor. A veces, tiene sentido descargar archivos antes de que sean necesarios, para que estén disponibles al instante una vez que se solicitan. Cuando los recursos necesarios para una página se pueden cargar por adelantado, la latencia de la red percibida por el usuario para esa página se puede reducir significativamente o incluso eliminar. Cuando ejecute información de Google pagespeed y vea el resultado, verá cómo solucionar los problemas en su sitio web.
Algunos consejos para cargar el sitio más rápido:
- Hacer menos solicitudes HTTP
- Añadir un encabezado de futuro lejano
- Gzip los componentes de tu página
- Minimice su JavaScript, CSS y HTML
Una cosa más al cargar una página web y si está usando php con smarty, puede usar este aciddrop.com/2008/01/03/… que reduce la cantidad de solicitudes http a su servidor y hace que el sitio se cargue más rápido al combinar la solicitud de los recursos js y css en una sola solicitud HTTP. .
Alternativamente, usted podría estar buscando estos complementos.