42

I'm curious if there exists a method to intentionally slow the page load?

I'm testing my HTML & PHP pages on my local host right now, and I want to see how my loading gif etc will perform when the page load is slower.

I realize this is a rare request as most developers are only concerned with speeding up page loads, but I thought there might be a method, using either javascript/jQuery or PHP, to do something like this for testing purposes.

Thanks for any help!

Note: I'm testing on MAMP, so that's Apache server running on Mac OS 10.7

stefmikhail
  • 6,877
  • 13
  • 47
  • 61

8 Answers8

17

You can use php's sleep($seconds) function to slow down a page load. However, you would need to turn implicit output buffer flushing to "on" with ob_implicit_flush(true); if you want anything to be sent to the user's browser before the page is done being processed. Otherwise your page won't have ANY contents until it's done loading. Calling sleep alone won't do the trick.

Cyclone
  • 17,939
  • 45
  • 124
  • 193
16

In Chrome, you can simulate a slow Internet connection with the developer tools. under the "Network" Tab on the far right. You can use a preset like "Fast G3" or can create your own with exact numbers for upload, download and ping.

enter image description here

Reference: https://helpdeskgeek.com/networking/simulate-slow-internet-connection-testing/

Nicolo Lüscher
  • 595
  • 7
  • 22
  • 1
    Firefox has something similar under Network. There is a dropdown saying "No throttling" by default, but you can slow the page down intentionally by choosing another option. – Kiko Jan 22 '20 at 10:28
3

Moussa has the right idea. The best way to test a slow page load is to use Chrome's developer tools. Select the network tab, and then click the dropdown that says "No throttling". Then change the page to your desired speed.

This way is superior to using the sleep function because you don't have to mess with any code and then remember to take it out. If you want to change the speed, just change the throttling level and you're set.

For more information on throttling check out the docs.

Community
  • 1
  • 1
Maximus
  • 1,417
  • 15
  • 19
3

This is what I would try: Use a php resource as source of the image:

<img src="images/gifLoager.php" />

in gifLoader.php, read your image file, output it byte by byte with a delay in the loop.

$fp = fopen( $path, 'rb');
while(!feof($fp)) {
        print(fread($fp, 1024));
        flush();
        Sleep(1);
     }
fclose($fp);

Don't forget to appropriately set the headers before outputting the binary data.

Referrences:

http://stackoverflow.com/questions/1563069/stream-binary-file-from-mysql-to-download-with-php
http://php.net/manual/en/function.sleep.php
http://www.gamedev.net/topic/427622-php-and-file-streaming-script-with-resume-capability/

UPDATE 2015-04-09 Use Chrome 'Device Mode': This tool has a network throttling feature that allows you to see how your page may render on a device with a slow network bandwidth. It has many other features that allow you to emulate features on various devices such as screen size and touch.

https://developer.chrome.com/devtools/docs/device-mode

xtrem
  • 1,737
  • 12
  • 13
  • This sounds like an incredibly creative method, and I like it. I'm wondering however: Would this not be delaying the load of the loader gif image itself? I want to test the loader gif and other loader setups by delaying the load of the page contents; Not the loader gif itself. I'm thinking however, that I could easily change your code to delay the load of one, or more than one, of the images on the page; Thus delaying the page load and demonstrating the loader gif etc. Am I right? – stefmikhail Sep 13 '11 at 18:00
  • 1
    You're correct. I guess I misunderstood your question. My answer went more toward delaying the loading of the image. You could use the same concept for any other resource, however. This is obviously a hack. A better way would be to use a "Network Emulator". Such tools are very common, and they allow you to emulate a low bandwidth network. See: http://stackoverflow.com/questions/1094760/network-tools-that-simulate-slow-network-connection. – xtrem Sep 13 '11 at 20:04
  • Thanks. I've investigated this, and unless I'm mistaken, none of the resources provided at the link you provided, are for Mac. Do you know of a good open source Network Emulator? Do you know if there is a method in MAMP, or an add-on for MAMP, that would mimic a slow network connection, or high traffic? – stefmikhail Sep 14 '11 at 17:33
  • Please see the resources shown in this post: http://stackoverflow.com/questions/130354/how-do-i-simulate-a-low-bandwidth-high-latency-environment – xtrem Sep 16 '11 at 18:13
2

A little bit of JS setTimeout can do the trick

setTimeout(function()
{
    // Delayed code in here
    alert('You waited 5 seconds to see me'); // Waits 5 seconds, then alerts this
}, 5000); // 5000 = 5 seconds
Joe
  • 15,669
  • 4
  • 48
  • 83
  • 1
    It's kinda creepy that someone with a name almost like mine answers this question at the same time, lol. – Joel A. Villarreal Bertoldi Sep 13 '11 at 17:34
  • @Joe - This does seem the easiest, provided it will work. What should I wrap the `setTimeout()` around? – stefmikhail Sep 13 '11 at 17:38
  • Of course it works :P Put it inside a `` and then anything you want to be delayed, put that where the "Delayed code in here" comment is. See modified post for basic example. For example, presumably you have your loading GIF visible by default, so put the code to hide it inside the timeout, and it will wait 5 seconds, then hide your loading GIF. – Joe Sep 13 '11 at 17:39
  • @Joe - Oh, I understand what you're saying. Isn't that just delaying the removal of the loading gif? It's not really mimicking a slow page load, is it? – stefmikhail Sep 13 '11 at 17:42
  • Well, that really depends on how you set it up :) If you have JS that runs on page load, you can put that inside the delay and it'll execute later. If you're looking to stall the PHP script finishing, then you want `sleep` as Cyclone mentioned. Both are right, it's just which way you want to do it :) – Joe Sep 13 '11 at 17:44
1

You can use sleep():


<?php
// Delays for 10 seconds.
sleep(10);
?>

...
html here
...
Joel A. Villarreal Bertoldi
  • 7,829
  • 8
  • 35
  • 51
0

you can use sloppy local web proxy to slow down your connection (it's in JAVA, so it'll probably run on your devel machine. You might also want to turn off mod_deflate for testing purposes, if you want so how your browser responds to slow HTML load (for example, dynamicly sized HTML tables, etc)

Also, see this question on webmasters.stackexchange.com

Community
  • 1
  • 1
Matija Nalis
  • 678
  • 1
  • 17
  • 30
0

Call sleep() in your PHP code to delay the request to the server.

Eric
  • 95,302
  • 53
  • 242
  • 374