Actualmente, la mayoría de los sitios web populares, como google, yahoo detectan si la velocidad de conexión del usuario es lenta y luego ofrecen la opción de cargar la versión básica del sitio web en lugar de la de gama alta.

¿Cuáles son los métodos disponibles para detectar conexiones lentas a Internet?

PD Creo que esto se logra a través de JavaScript, ¿entonces lo etiquetaré como una pregunta de JavaScript? Sin embargo, estoy buscando respuestas orientadas más hacia PHP, si esto también está relacionado con el servidor.

51
Starx 9 ago. 2011 a las 13:31

4 respuestas

La mejor respuesta

Puede iniciar un tiempo de espera en un bloque de secuencia de comandos en línea en <head>, que se ejecutará tan pronto como se encuentre. Entonces cancelar el tiempo de espera cuando se activa el evento load. Si el tiempo de espera se dispara, la página se carga lentamente. Por ejemplo:

<script type="text/javascript">
    var slowLoad = window.setTimeout( function() {
        alert( "the page is taking its sweet time loading" );
    }, 10 );

    window.addEventListener( 'load', function() {
        window.clearTimeout( slowLoad );
    }, false );
</script>

Obviamente, querrás reemplazar la alerta con algo un poco más útil. También tenga en cuenta que el ejemplo utiliza la API de eventos W3C / Netscape y, por lo tanto, no funcionará en Internet Explorer antes de la versión 9.

72
Sam Hanes 26 ago. 2016 a las 19:23

Puede escuchar dos eventos DOM, DOMContentLoaded y load, y calcular la diferencia entre el momento en que se envían estos dos eventos.

DOMContentLoaded se despacha cuando la estructura DOM está lista, pero los recursos externos, imágenes, CSS, etc. pueden no estarlo.

load se envía cuando todo está listo.

http://ablogaboutcode.com/2011/06/14/how-javascript-loading-works-domcontentloaded-and-onload/

5
Ryan Li 9 ago. 2011 a las 09:38

Aquí hay una implementación completa que acabo de completar para un sitio en el que estoy trabajando. Sentí como compartirlo. Utiliza una cookie para descartar el mensaje (para las personas que no les importa que el sitio tarde mucho en cargar). El mensaje mostrará si la página tarda más de 1 segundo en cargarse. Lo mejor es cambiar esto a unos 5 segundos más o menos.

El siguiente código debe agregarse justo después de la etiqueta de apertura <head>, ya que debe cargarse lo antes posible, pero no puede aparecer antes de la etiqueta html o head, porque estas etiquetas deben estar presentes en el DOM cuando se ejecuta el script. Todo es código en línea, por lo que los scripts y estilos se cargan antes que cualquier otro archivo externo (css, js o imágenes).

<style>
    html { position: relative; }
    #slow-notice { width:300px; position: absolute; top:0; left:50%; margin-left: -160px; background-color: #F0DE7D; text-align: center; z-index: 100; padding: 10px; font-family: sans-serif; font-size: 12px; }
    #slow-notice a, #slow-notice .dismiss { color: #000; text-decoration: underline; cursor:pointer; }
    #slow-notice .dismiss-container { text-align:right; padding-top:10px; font-size: 10px;}
</style>
<script>

    function setCookie(cname,cvalue,exdays) {
        var d = new Date();
        d.setTime(d.getTime()+(exdays*24*60*60*1000));
        var expires = "expires="+d.toGMTString();
        document.cookie = cname + "=" + cvalue + ";path=/;" + expires;
    }

    function getCookie(cname) {
        var name = cname + "=";
        var ca = document.cookie.split(';');
        for(var i=0; i<ca.length; i++) {
            var c = ca[i].trim();
            if (c.indexOf(name)==0) return c.substring(name.length,c.length);
        }
        return "";
    } 

    if (getCookie('dismissed') != '1') {
        var html_node = document.getElementsByTagName('html')[0];
        var div = document.createElement('div');
        div.setAttribute('id', 'slow-notice');

        var slowLoad = window.setTimeout( function() {
            var t1 = document.createTextNode("The website is taking a long time to load.");
            var br = document.createElement('br');
            var t2 = document.createTextNode("You can switch to the ");
            var a = document.createElement('a');
            a.setAttribute('href', 'http://light-version.mysite.com');
            a.innerHTML = 'Light Weight Site';

            var dismiss = document.createElement('span');
            dismiss.innerHTML = '[x] dismiss';
            dismiss.setAttribute('class', 'dismiss');
            dismiss.onclick = function() {
                setCookie('dismissed', '1', 1);
                html_node.removeChild(div);
            }

            var dismiss_container = document.createElement('div');
            dismiss_container.appendChild(dismiss);
            dismiss_container.setAttribute('class', 'dismiss-container');

            div.appendChild(t1);
            div.appendChild(br);
            div.appendChild(t2);
            div.appendChild(a);
            div.appendChild(dismiss_container);

            html_node.appendChild(div);


        }, 1000 );

        window.addEventListener( 'load', function() {
            try {
                window.clearTimeout( slowLoad );
                html_node.removeChild(div);
            } catch (e){
                // that's okay.
            }

        });
    }

</script>

El resultado debería tener este aspecto:

enter image description here

Espero que ayude.

12
Jules Colle 31 ene. 2014 a las 04:33

Puede obtener la velocidad de conexión descargando algún recurso de prueba (la imagen sería más adecuada) cuyo tamaño es conocido por usted (que es fácil de obtener) y midiendo el tiempo necesario para descargarlo. Tenga en cuenta que probar una vez solo le dará la velocidad de conexión en ese instante. Los resultados pueden variar de vez en cuando si el usuario usa el ancho de banda paralelo a las pruebas de imagen. Esto da como resultado el ancho de banda disponible para su aplicación, que es exactamente lo que necesitamos.

Leí en algún lugar que Google hace un truco similar usando alguna imagen de píxel de cuadrícula 1x1 para probar la velocidad de conexión en la carga de la página e incluso te muestra algo como 'La conexión parece lenta, prueba la versión HTML' ... o similar.

Aquí hay otro enlace que describe la misma técnica: http://www.ehow.com/ how_5804819_detect-connection-speed-javascript.html

1
Brad Larson 13 oct. 2016 a las 15:28