Join Justin Yost for an in-depth discussion in this video Build your HTML smartly, part of PHP: Performance Optimization.
- [Instructor] At the end of the day, if you aren't building APIs, what your PHP code is probably producing is web pages with HTML, and the best thing you can do on that side is to build the HTML as intelligently as you possibly can. We saw this in the past. This is the browser process that browsers go through to render and display an HTML document. Our goal here is to build a simple and easily parsable document object model, or DOM tree, with the straightforward layout that can be quickly painted.
When you're doing images, where possible, set up any primary display images, like photos for a blog post content, that aren't in the top portion of your site, or in other words, below the fold, to be lazily loaded or deferred until in the user's view port. There are a variety of techniques out there for you to do this, so I'm not going to cover one in any specific manner. Your images should also be optimized, there are few things you can do here. First, as much as possible, the images should be the same size as the size they are supposed to fill, and second, run those images through an optimization algorithm before serving to your end users.
The reason this might help is that CSS is a render blocking aspect of the browser. When your browser hits a CSS file, it has to download the full file, and parse it before it can begin to render the page. This repeats for every single CSS file you have on your page. Many of your CSS might be using the import statement, where you import other CSS files into some main CSS file, and you then only have to include that single file. This is helpful for development, but for production, you should eliminate these import statements, and instead use a tool like Grunt or SignalR to produce a final CSS file that does not require the use of import.
Import is very, very slow. If you separate out your CSS files to only include content for specific media types, either based upon the rules for the size of the browser, or when printing a page, adding the media tag to the link for the CSS file means the browser will defer any CSS not required for the current environment until after the page renders. This will greatly speed up the rendering of your site by your browser not needing to parse unneeded CSS.
In general, our goal with HTML is to present the correct thing at the right time, and nothing else. The big question here is what about all my third party stuff? For instance, Google Analytics, maybe some other various trackers, or any code doing AB testing, or maybe even some display advertising, or quite possibly, all those share buttons from the various social networks. The biggest thing you can choose to do, from a performance standpoint, is to make a conscious effort to make it hard to add third parties onto the websites you manage.
Some of the better third parties do a fair bit of work to make their code as performant as possible. Google Analytics, in particular, is worthy of calling out here. The rules we have today for doing performance aren't going to be the same rules we'll use next year. HTML is changing, as is CSS, and even how browsers parse the same HTML is changing. Use the various tools that we've talked about to run a performance analysis of your web application, and set aside some time to keep on top of any potential performance issues, and you will do just fine.
- General optimization techniques and tools
- PHP and Xdebug
- Opcode cache
- Optimization in PHP
- Upgrading PHP
- Macro vs. Micro optimization
- HTTP caching
- HTTP compression