Websites Should Be Fast
To display a webpage, a device and browser combination must request a file, receive a file from the server, then read and render that file. This process can take considerably more or less time depending on how everything is assembled.
Here a handful of principles to follow.
- Use the cleanest code possible. Write error free code and less of it.
- Leverage caching to maximize the re-use of items.
- Make the fewest requests possible (10-20 or less).
- Create the smallest packet possible (size in MB).
- Use a high powered server to deliver content – perhaps the use of a Content Delivery Network
Keeping these principals in mind from the very beginning of a build is key. As you develop, apply these more specific techniques.
- Use code validators to find and remove mistakes.
- Specify image size in your HMTL
- Use code compressors to remove unnecessary characters (comments, spaces, tabs, returns etc).
- Optimize and compress all images
- Use what you need on that specific page. Only load CSS or JavaScript intended for that specific page.
- Load JavaScript at the end of the file where possible.
- Compile CSS and JS into one file (1 CSS and 1 JS, two total), rather than loading multiple of each.
- Separate structure from style in your CSS, and load structure first.
- Never use in-line styles
- Use .jpg unless a .png is absolutely needed. Load one image as a sprite rather than a handful.
- Use font based icons
- Run single file applications as opposed to a traditional web site with multiple pages
Balance Server Side and Client Side Work
To optimize page speed to the utmost, consider using more client side scripting, rather than multiple return trips to the Server. Storing information in the Dom rather than on the server reduces return trips to the server, saving a tremendous amount of time.
Test for speed an optimize
To confirm you have a concise, error free, lightweight page, run it through a series of page speed testers. I recommend GT Metrix and Pingdom, but there are others. Not only will you receive a page speed rank or result, but a list of ways to improve the page.
Website Site speed checklist
- Caching
- Sever side cache
- Client side cache script
- Remove version from URL
- Requests
- Enable keep alive
- Small number of requests
- Prioritized requests
- Use of sprites
- Use of font based icons
- Packet size
- Packet size under 1MB
- Enable Gzip or deflate
- Minify HTML
- Minify CSS
- Minify JS
- No use of inline styles
- Serve scaled images
- Serve optimized images
Caching
Most modern websites use a language that runs on the server where the website is hosted. These server side languages allow developers to create more web pages in less time.
When someone requests a webpage, the server side language runs and assembles an HTML document to send to the client (the end user). The client’s device then renders the HTML document as a webpage.
Server side caching saves those HTML documents, so the server side language does not have to assemble it every time someone requests a webpage. Not processing the server side language to create an HTML document for each and every request saves a tremendous amount of server side processing power.
Using WordPress? Try CometCache for a simple and effective caching solution.
Browsers and devices also save items and re-use them in order to speed things up. If you have visited a web page (and client side caching is properly configured), the browser will store a copy of major website elements.
As an example – rather than downloading the logo every time you go to a new web page on a website, the computer can store that image and re-use it.
Client side caching is enabled and configured via the .htaccess file
CSS and JS files often come in versions. Calling the resource with a version in the URL (/custom.js?ver=4.3) effectively eliminates that resource from being stored in a cache.
Requests
Without keep alive enabled, a connection to the server may occur for each file requested. Connecting to the server can be a relatively time consuming process. Eliminating the need to re-connect for each file request per download increases the speed at which the website downloads.
To further speed up a website, combine resources to reduce the number of requests required for a webpage. Compile CSS and JS into one file (1 CSS and 1 JS, two total), rather than loading multiple of each.
Use what you need on that specific page. If a particular script is only used on one page, only load it on that page, not every page of the website.
Using WordPress? Make use of Dequeue Script and Dequeue Style functions.
Once the resources have been effectively combined, load them in a prioritized manner. Depending on the resource and the browser, requesting a resource may cause all other resources to stop downloading. Load only the most essential items in the head, and load the rest at the bottom of the body.
Test speed, make changes, and check again in order to optimize the order and combination of resources.
A sprite combines many images into one image to save download time. One larger image downloads and processes faster than multiple smaller images.
Font based icons load faster than image based icons because a font file is much smaller than an image file. An additional bonus is that font based icons scale for mobile or living room seamlessly.
Packet Size
Enable Gzip or deflate, and minifying the HTML, CSS and JS files all make the files for a website smaller and thus the website faster. The do however work differently and both methods should be used. Gzip reduces duplicate strings, whereas Gzip removes whitespace.
Gzip is enabled in the .htaccess file. Minification can be achieved dynamically via a sever side script, or during the compiling process.
Using WordPress? Try the Autoptimize plugin to minify HTML, CSS, and JS.
Inline styles are inefficient by design and were replaced with CSS quite some time ago. Inline styles act on one item at a time whereas CSS can style many items at once which makes CSS much more efficient.
Serving scaled images is the use of smaller images, particularly on mobile devices. Rather than making the images look smaller through CSS, the website loads images that are actually smaller. Smaller images download and process faster than larger ones.
Images are files and just like HMTL, CSS or JS can have extra information attached to them. Just like removing white space and comments from your code, you can also optimize your images to shrink them. Try opening an image with a text editor and you quickly realize how much information is stored in a simple image file.
Using WordPress? Try using WP Smush By WPMU DEV or EWWW Image Optimizer.
Want to learn more? Check out my full checklist for website quality assurance and quality control.