How do I preload .css and .js files, before the whole page (dynamic by PHP) is generated

Question

My homepage (index.php) is generated dynamicly by PHP, so it takes about 1s till the the page is delivered to the user.

Because my css and js script is in the header of (index.php), after this 1s the css and js will start to download.

Is there some general way of preloading this js and css files?

My aproach would be to delete all content of index.php, include just <'head> with my css and js file, and then do some js to load the whole indexOriginal.php (with the dynamic content generated on my server by PHP), so this should enable the user to download the css, js in parallel of indexOriginal.php.

Is this the right aproach?

you can try having php output and flush the page headers before it gets busy building the page's body. — Marc B
– Marc B, Commented Aug 9, 2013 at 16:41

Trevor Dixon · Accepted Answer · 2013-08-09 16:41:49Z

1

The approach you suggested could work. You also might consider altering your PHP script to hurriedly deliver the first part of the page (<html> down through <body>) before it starts getting the rest of the page together (see http://php.net/manual/en/function.flush.php).

answered Aug 9, 2013 at 16:41

Trevor Dixon

24.6k13 gold badges77 silver badges115 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Valentin Logvinskiy · Accepted Answer · 2013-08-09 16:47:44Z

1

Your page full generated by backend and sended to user only after php script end its work.

You could, for example, create page like.

<html><head><script></script></head><body></body></html>

In <script></script> load, for example, JQuery and do something like

$(document).ready($('body').load('/path/to/your/script.php'))

But I really thing this wouldn't be a good practice. Also I don't think that Google would parse your site content with this solution.

I think you should look better about your JS (compress, gzip, split to many files and upload them from different CDNs, move everything to $().ready, etc.)

answered Aug 9, 2013 at 16:47

Valentin Logvinskiy

1214 bronze badges

Comments

user1637579 · Accepted Answer · 2013-08-09 16:45:43Z

0

My recommendation would be to have your initial PHP script JUST deliver the CSS and JS tags. Once those are loaded, use the JavaScript to make an AJAX call that gets the rest of the page then displays it. Or you can build the page in the JavaScript (which would allow you to use loading icons and the like to give a better indicator to the user that "the page is coming")

answered Aug 9, 2013 at 16:45

user1637579

Collectives™ on Stack Overflow

How do I preload .css and .js files, before the whole page (dynamic by PHP) is generated

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related