Why PageSpeed Matters
It's no secret that everyone prefers faster load times. Our fast-paced world demands more information processing in less time with every new development in technology. We have been conditioned to want information in a matter of microseconds and this expectation is becoming closer and closer to reality. From dial-up modems, to DSL, to fiber optics and eventually quantum computing, speed is a direct part of the web browsing experience. Tests have indicated that many users will leave a slow loading website before even discovering the content of the page. Users are also much more likely to return to faster loading websites than they are to slower loading sites.
The PageSpeed Ranking Function
The PageSpeed ranking function is coming soon. Below is a starting rough approximation.
Y=f(t)*R+U*Bytes/PSHow To Optimize Page Speed
Minify Resources
Minifying HTML, CSS and Script is an easy and effective way to reduce the byte size of any file. Every character in a file is equal to 1 byte and although a single byte does not significantly affect the load time of a page, often times a single page is needlessly using hundreds to thousands of extra characters and spaces.
Simple File Minimization Tips
- Abide by the Google HTML and CSS style guide.
- Minimize and shorten the use of comments. Use shorthand writing techniques when possible.
- Use abbreviated id and class names when possible.
- Reduce white space and empty lines.
Optimize Images
In most cases, the images on a webpage account for a large majority of the bytes and hence download time. Most images range from 5 kilobytes to 200 kilobytes and sometimes a lot more. There are several things you can do to reduce image size without sacrificing the quality of the image.
Losslessly Compressing Images
Yahoo! has a great tool that compresses images without affecting the quality at all. Simply upload your image to Smush It and get a losslessly compressed version of your image.
Image Optimization Tips
- Crop the image to allow as little white space or border as possible. Instead of using a natural margin within the image, try to use CSS styles to set margins and backgrounds.
- Use appropriate file types (jpg, png, gif, etc...). See advice for choosing image types
- Reduce the image size to as small as needed. Try not to have to resort to CSS for resizing images.
- Losslessly compress all images
Leverage Browser Caching
Prioritize Above-The-Fold Content
Improve Server Response Time
There is not a lot you can do to improve your server response time, but you can monitor your server's status to make sure it has limited downtime. Uptime Robots provides a free and very effective service for monitoring your server response.
If your server does poorly (less than 98% uptime) you can often resquest to fix the problem and be placed on another server if it's available.
Prevent Render-Blocking Scripts
Optimize CSS Delivery
Enable Compression Using Gzip
Avoid Landing Page Redirects
Avoid Third Party Plugins
Use Asynchronous Scripts
Add the 'async' attribute to your scripts