Web page optimization is as hard as marathons. Thankfully, in today’s world of dynamic systems you only have to optimize a handful of templates and keep some guidelines in check. There are two main evangelical movements to make the web faster. Slow (backed by Yahoo) and PageSpeed (a son of Google). According to Yslow you need to keep the following in check:
- Making fewer HTTP requests
- Using a CDN
- Far-Future Expirations
- Last-Modified Header Removal
- ETag Header Removal
- Gzip Compression
- CSS and JavaScript Placement
- Making CSS and JavaScript external
- CSS and JavaScript Minification
- Using Sub-Domains on Cookies
- Caching Compiled Scripts
YSlow Optimization
YSlow works in three phases to generate its scores. For example, Yslow works in the following fashion:
- YSlow crawls the DOM to find all the components (images, scripts, stylesheets, etc.) in the page. After crawling the DOM, YSlow loops through Firebug’s Net Panel components and adds those to the list of components already found in the DOM
- YSlow gets information about each component: size, whether it was gzipped, Expires header, etc. YSlow gets this information from Firebug’s Net Panel if it’s available. If the component’s information is not available from Net Panel (for example, the component was read from cache or it had a 304 response) YSlow makes an XMLHttpRequest to fetch the component and track its headers and other necessary information.
- YSlow takes all this data about the page and generates a grade for each rule, which produces the overall grade.
Google PageSpeed
Google PageSpeed is quite different and easier to optimize for in my experience. Page Speed Insights measures the performance of a page for mobile devices and desktop devices. It fetches the url twice, once with a mobile user-agent, and once with a desktop-user agent.
As you can see, I’m barely starting to optimize my page. Luckily we can use tools such as GTMetrix to guide us in this optimization process and achieve the fastest possible speeds. A faster website translates into:
– Higher rankings
– Lower bounce rates
– Reduced hosting costs
– Higher pages per visit count and
– Increased referrals
WordPress Optimization
If you use WordPress is important to install a caching plunging such as W3 Total Cache and follow GTMetrix special guide for WordPress sites. If you don’t have much time, refer to this 6-minute video to get a quick glance about the process:
Web Page Optimization Resources
1. GTMetrix Web Page Optimization (Free Wizard)
2. PageSpeed Insights (Analyze your page for free)
3. Yslow site (full of free tools)
4. Common Mistakes In Website Performance Optimization, my article on a list of pitfalls to avoid.
5. Speeding up WordPress load from 4.23s to 1.33s (Case Study)