Couple of things I learned while creating sites in Drupal part 2
As i am continuing to create sites in Drupal i of course continue to learn of new Drupal ways to accomplish them and make them better. Sometimes even going back to sites of our previous clients and adding a module or two that i just found out existed, and think would benefit them.
On one of the sites i recently worked we bumped into a very puzzling problem the site looked and worked fine in (you guessed it) Firefox, Chrome and Safari but for some reason was totally messed up in Internet Explorer 7. Don’t get me wrong i am not surprised when i see a site having alignment problems in IE this is a known thing, but here it was as if it didn’t see half the CSS at all!
After hours and hours of trying to figure out and nail down the problem, checking the HTML for possibility of any unclosed tags and the like, removing a variety of JavaScript files and removing CSS stylesheets one by one (there were 32 of them). We were able to figure it out the HTML, JavaScript and CSS were all valid, the problem was that Internet Explorer reads maximum 30 CSS stylesheets, and since we had 32 of them, the last two were just ignored. Yes i know 30 stylesheets sounds like a lot but if you ever worked on a Drupal website you will know its not hard to get there: 5 default Drupal CSS files, another 5 from your theme plus every second module you add to your site like UberCart ads one or two of them you are at thirty already. Thats probably one of the reasons Drupal has “Optimize CSS files” option in the performance section of your Admin menu.
Once i started optimizing the site i found few more useful tools and modules to get you there. You probably already know what firebug is and used this popular add-on for Firefox, there is one more add-on that makes the optimization work much easier “Page Speed by Google”. They will show how well you page performs and give you optimization tips. Following the tips i found that there are some good Drupal modules that could help you follow the tips. For example:
- CSS GZIP module – this module will gzip your aggregated css files
- JavaScript Aggregator – minifies the JavaScript using JSMin
- Boost provides static page caching for Drupal enabling a very significant performance and scalability boost for sites that receive mostly anonymous traffic
Another useful tool for optimizing your page is CSS sprites. CSS sprite combines multiple background images into a single image. This technique makes web pages faster because it reduces the number of downloads per page. This step should be done at the design level, but it could be done later you will just spend little more time doing it.
If you liked this post you might want to read the first part.
Do you have any useful things you would want to share? Feel free to do so in the comments. Did you enjoy reading this post? Then share it by clicking the “share this post” button bellow.
