This article was sponsored by New Relic. Thank you for supporting the sponsors who make SitePoint possible!
We’ve had a lot of performance talk over the years here at SitePoint, and we believe it’s time to revisit the topic with some more advanced aspects. The approaches mentioned in this article won’t be strictly PHP related, but you can be sure they’ll bring your application to a whole new level if used properly. Note that we won’t be covering the usual stuff – fewer requests for CSS, JS and images meaning faster websites and similar hints are common knowledge. Instead, we’ll be focusing on some less known/used upgrades.
html
Remove unnecessary tags
The fewer elements, the better. Remove unnecessary html.
<div>
<div>
<p>Some of my<span>text</span>.</p>
</div>
</div>vs.
<div>
<p>Some of my<span>text</span>.</p>
</div>Not applicable to all scenarios, of course, but structure your html in a way which lets you remove as many DOM elements as possible.
You can also reduce the filesize of html documents by omitting some tags that aren’t needed. This does tend to look rather hacky and seems to go against standards, so it should only be done when deploying to production if at all – that way you don’t confuse other developers who work on the same code.
Prefetch
Prefecthing is when you tell the browser a resource will be needed in advance. The resource can be the IP of a domain (DNS prefetch), a static resource like an image or a CSS file, or even an entire page.
When you expect the user to go to another domain after visiting your site, or, for example, you host your static resources on a subdomain like
images.example.com, DNS prefetching can help remove the few miliseconds it takes for the DNS servers to resolveimages.example.comto an IP address. The gain isn’t much, but accumulated, it can shave off some decent loading time off the requests you make your user’s browser do. DNS prefetching is done with a<link>in the<head>like so:<link href="//images.example.com" rel="dns-prefetch" />and is supported in all major browsers. If you have any subdomains you expect the current visitor to load after they’re done with the page they’re currently on, there’s no reason not to use DNS prefetch.When you know some resources are going to be needed on the next visit, you can prefetch them and have them stored in the browser cache. For example, if you have a blog and on that blog a two-part article, you can make sure the static resources (i.e. images) from the second part are pre-loaded. This is done like so:
<link href="//images.example.com/sept/mypic.jpg" rel="prefetch" />. Picasa Web Albums uses this extensively to pre-fetch 2 following images to the one you’re currently viewing. On older browsers, you can make this happen by loading a phantom Image element in JavaScript:var i = new Image();
i.src = 'http://images.example.com/sept/mypic.jpg';This loads the image into the cache, but doesn’t use it anywhere. This method won’t work for CSS and JS files, though, so you’ll have to
Truncated by Planet PHP, read more at the original (another 12244 bytes)
more
{ 0 comments... » Web Performance Tricks – Beyond the Basics read them below or add one }
Post a Comment