Background image makes the page flash when loaded

Question

I’m creating a site, by uploading any of the 6 pages of a category of the site that each have a background image with an average of 40 to 70kb, the area where the image is flashed. The page always flashes when clicking on the page or updating it, which I can do?

Answer 1

The image itself is not blinking, what happens is that due to the high number of requests that your page requires to be made, there is a small delay between the time the page is served and the contents arrive, more properly the image.

The delay is small enough to give the impression of blinking, but this is not the case.

If you have a slow connection you will be able to observe that the page is actually served with a white zone where the image should be and shortly after the same one appears.

Solution

Reduce the number of requests you are making to scripts, both at style and image level:

1. CSS

   All CSS files can be downloaded in a single request by the browser:

   Example in PHP

   <?php
   header('Content-type: text/css; charset=UTF-8');
   
   ob_start("compress");
   
   function compress($buffer) {
   
     /* remove comentários */
     $buffer = preg_replace('!/\*[^*]*\*+([^/][^*]*\*+)*/!', '', $buffer);
   
     /* remove tabulaçõess, espaços, quebras de linhas */
     $buffer = str_replace(array("\r\n", "\r", "\n", "\t", '  ', '    ', '    '), '', $buffer);
   
     return $buffer;
   }
   
   $cssFiles = realpath(dirname(__FILE__)).'/*.css';
   
   foreach(glob($cssFiles) as $file) {
     include($file);
   }
   
   ob_end_flush();
   ?>
   

   With the example above, you can have a PHP file inside your folder where you have the various CSS and instead of calling all .CSS on the site, you only call the PHP file:

   <link type="text/css" media="screen" rel="stylesheet" href="http://meusite.com/css/css.php">
   

   For your particular case, you pass 4 orders to 1 only.

2. JS

   The example given for CSS can also be applied to script:

   Example in PHP

   <?php
   header('Content-Type: text/javascript; charset=UTF-8');
   
   ob_start();
   
   $files = realpath(dirname(__FILE__)).'/*.js';
   
   foreach(glob($files) as $file) {
     include($file);
   }
   
   ob_end_flush();
   ?>
   

   With the example above, you can have a PHP file inside your folder where you have several scripts and instead of calling all the .JS on the site, you only call the PHP file:

   <script src="http://meusite.com/js/js.php" type="text/javascript">
   

   For your particular case, you pass 4 orders to 1 only.

3. Imagery

   You have a lot of pictures on the same page, but that doesn’t mean they have to be separate files.

   Making use of CSS sprites, you can have an image composed of several small images that are later positioned in the appropriate location through CSS.

   By way of example, this part of your header:

   

   Could be a single file:

   

   One of the many sites that generates this type of images so that you don’t have much work.

   For your particular case, you pass 8 orders to 1 only.

4. Cdns

   You can make use of Cdns to increase the number of applications (requests) the number of files downloaded simultaneously by each address.

   Example CDN for Twitter Bootstrap you’re using:

   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
   

   With this address, the CSS base for Twitter Bootstrap can be downloaded simultaneously with other files from the server where your web-site is located, thus accelerating the entire page loading process.

---

With the tips above you will be:

• Reduce the number of applications currently by 37 to 24;
• Compress CSS thus contributing to more effective page loading;
• The browser downloads more files simultaneously which will allow a lower page availability time;
• Finish blinking the image.

Answer 2

What is occurring is normal. You are making a request and the whole page is sent and a whole page is returned. The ideal is to use Ajax calls and send and receive only the necessary. Background for example would not be changed, so it would not "blink".