/    Sign up×
Community /Pin to ProfileBookmark

Split second unformatted page load

Copy linkTweet thisAlerts:
Jun 09.2010

Hello,

I am building my pages with PHP and using include() functions on each page to bring in various elements such as the header, navigation, footer, etc.

When I load a page, I see unformatted HTML for a second or two and then th CSS kicks in and everything is fine. Does anyone know how to get around this?

I have my CSS broken down into multiple files (layout, fonts, forms, etc). I’m then using the @import to load them into one master CSS file, then including the master CSS file with the PHP include() function.

Thanks!

to post a comment
PHP

2 Comments(s) ↴

Copy linkTweet thisAlerts:
@saviolaJun 09.2010 — This is not a problem just a little inconvenience ?, caused by slow connection / download.

Try to load your CSS files one by one in head of HTML, not with import.

[code=html]
......
<link rel="stylesheet" href="fonts.css" type="text/css" />
<link rel="stylesheet" href="mainstyle.css" type="text/css" />
...........
[/code]
Ensure the correct order of including, especially if you have the inheritance of some CSS styles in different files!
Copy linkTweet thisAlerts:
@Jarrod1937Jun 09.2010 — You will want to ensure that all .js includes are at the bottom of the code and all .css files are at the top, this will allow your browser to load the style elements as fast as possible. Though using the import approach is a bad idea if you're after speed, its faster to combine them into one css file (but perhaps separated into their respective sections within it). Otherwise you will be creating a separate http requests for each .css file, which if it is being served from one domain/subdomain then on a lot of browsers will not be able to download each css file simultaneously if the amount of .css includes goes past 2, further slowing down your style loading (as well as wasting time that could be spent loading other elements).
×

Success!

Help @G35racer spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...