Load Stylesheets JS Files in correct places
When writing markup you should make sure that you have all you stylesheets in the document HEAD, consider the following example:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>My site title</title> <link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="/feeds.xml" /> <link rel="shortcut icon" href="/static/images/favicon.ico"> <link rel="stylesheet" href="/static/styles/styles.css" type="text/css" media="screen" /> <link rel='stylesheet' href="/static/styles/colors.css" type="text/css" media="all" /> <link rel='stylesheet' href="/static/styles/portfolio.css" type="text/css" media="all" />
On some browsers, Internet explorer precisely, you must have noticed that when opening a site, you see a white page and whole content appears suddenly. This is caused by putting stylesheets outside HEAD of the document. According to Yahoo Developers Network, putting stylesheets outside HEAD prohibits progressive rendering in many browsers, including Internet Explorer.
Instead of including multiple CSS and JS files, you should include one master file for each, like instead of including prototype.js, effects.js, modules.js as separate file, include a single file something like common,js that contains the code all above three files.
The problem with this practice is that it increases development time if you put all code in a single file. Or if you are making separate files for development and merge those at time of deployment, that itself is a big problem. At the end of this article, I will suggest a solution for this problem, I am sure you’ll find that deadly useful.
- CSS Drive CSS compressor
- And many others….
You can imagine that a 100KB file compressed to 60KB will be faster in download.
Problems and the Solution
Basically, rather than using the static files after compressing and minimizing the static content into one files ourselves manually, I am using the server side to do that all stuff. A PHP script will include different files as a singe file, compress those file and will send the output to those files. Following the code of file static.php
Now to use the above file, use the following code,
In the type parameter, you have to enter either css or js, based on what files you are including. And load parameter takes the comma separated values of files to be included.
As most of the browsers don’t cache dynamic files (like .php), so there are chances that files included this way will be download on every request. To prevent this, we can use Apache’s rewrite rule.
RewriteEngine on RewriteRule ^static.([a-z]+)$ static.php?type=$1 [QSA]
Now you’re code to include files now look like
If you find any bugs/problems/suggestions or do some improvements, please do share those with us by commenting.