With php becoming a more mature language and frameworks becoming a standard practice, it’s increasingly important to analyze your code and test the performance where possible.
Frameworks and libraries can speed up the development time and make code maintenance simpler, but it’s important you understand how they work. It’s not just the framework itself but the entire footprint your application leaves when a user visits a specific page. Ask yourself what’s involved from the database, to the code/framework, and then to the client through http requests.
After experiencing some issues with an application running the Zend Framework, I realized there were a lot of things I was not doing to optimize my application. There are simple and more complex actions you can take to speed up your application. Since time is precious, and developers with an expertise on optimization are not always available, I’ve split this post into two sections (simple and more advanced). This post focuses on the simple part.
Simple tips and tools
- Use Firebug with YSlow
Firebug and YSlow are powerful tools to analyze the front end of your site. Run the most common request on your site and see what YSlow says. Expect a low grade, probably a D or lower. If you can reach a level C or greater you’re doing really well as some of the requirements are not practical for most applications.
Net: How many calls are there? Try to minize these calls and definitely remove any 404 calls as they can eat up server resources.
YSlow: Rules I would pay attention to:
1. Make fewer HTTP Requests
3. Add an Expires Header
4. Gzip components (server related)
5. Put CSS at the top
6. Put JS at the bottom (not always possible)
7. Avoid CSS expressions
10. Minify JS
java -jar yuicompressor-x.y.z.jar -o style_minified.css style.css
add the “–nomunge” to only do whitespace compressions.
- Merge css and js http requests- manually or automated
Reduce the amount of calls you make to various CSS and JS files by merging them to one URL. This is more work but will reduce the overhead.
How-to – manually:
How-to – Automated – google or your own custom:
Google has a php script which can take various sources and return them as one.
- CSS Background Images are bad – usually
Using a div for all of your images with a background image is not that great for performance as it requires more calls. I’ll be the first to admit it’s my favourite way to design, but you should try to avoid them where possible. In addition, for hover states try using one large image with background-position calls to show specific parts.
background-positionto select which portion of the large image you want to show. There isn’t much more to explain.
Gzipping files on the server side will reduce the amount of overhead significantly. It adds a bit more on the server side, but generally the pay off should be well worth it.
It depends on your server situation, but here’s a snippet:
Refer to http://snipplr.com/view/9017/gzip-your-components/ for details
That wraps up the simple part of this tutorial… really, that’s it! The focus of these posts is to keep them simple and easy to use. You may be surprised at how much faster your application runs when you apply these techniques. I hope you found these useful or at least agree that these are good practices to apply. In the next part I will examine more advanced methods of optimizing your application.
Your feedback is always appreciated. In addition to commenting, if you have more resources, please add them to my growing list of links through this buncholink
It’s a simple way to organize a group of links together.