Let's take a look at what we've covered up to this point.
We looked at some advantages and disadvantages of using responsive web design. Implementing it badly can result in a slow, underwhelming website that drives users away instead of keeping them clicking and happy.
In Chapter 1, The Good, the Bad, and the Ugly of Responsive Web Design, we talked about what responsive designing is and how it can make a difference to a website's accessibility and content representation. We also discussed why responsive designing came into being and what advantages or features it brought with it. We also saw how it can impact the end users' overall website experience.
In Chapter 2, Tweaking Your Website for Performance, we focused on ways to tweak the overall performance of your website, focusing on where to place resources in the DOM and DOM overloading, and briefly covered preloading. Placing scripts and style sheets in the correct places in your DOM can dramatically improve the overall load time and even user experience. Scripts that change the layout of your site should be placed at the top of the DOM in the <head> tags. The files that are not critical can easily be placed at the end of the DOM, just before the closing <body> tag, otherwise they will increase the load time. Scripts at the top—in the <head> tag—block the site from loading until the browser has downloaded those files. In contrast, if you place JavaScript files that affect the layout at the bottom of the DOM, just before the closing <body> tag, you might display to the user a mangled website that has not been formatted as per your code.
This chapter also briefly delved into content preloading using plugins such as CreateJS. Preloading content is a great way to have your site populated with the important bits before displaying it to the user. Another topic covered was DNS prefetching. This is a useful technique when your website accesses multiple sites that are on different domains. DNS prefetching attempts to resolve domain names before the user follows a link to that domain. If the domain has been resolved, the advantage of this will be that there is effectively no delay due to DNS name resolution.
The web is the master of images. Chapter 3, Managing Images, took this to heart as we focused on managing images on our website. We discussed the importance of choosing the correct format for the image on our website, and how each format differs. Optimizing images is crucial to performance. You will see on most website analyzers that image optimization is one of the main areas when it comes to reducing load time.
We talked about progressive images, conditional loading for images, and properly defining image size. This chapter also relooked at overpopulating the DOM with unnecessary elements. The chapter touched on how hidden elements in the DOM can slow down browsing experience, and proposed some solutions to overcome this problem. We also discussed the caching of images. This is a good way to decrease load time on your website. Your browser can save copies of images, style sheets, JavaScript, or even entire web pages.
Chapter 4, Learning Content Management, talked about managing the content of our site. This chapter had a lot of content and covered style sheets, media queries, and viewports. We also talked about background images with media queries and working with JavaScript.
This chapter also focused on the usage of Sassy CSS, or SASS, on your site. Even though this is not directly linked to increasing the performance of your site, it does increase your proficiency as a web developer. SASS supports complex functions that CSS simply does not offer. Variables alone make it a worthwhile expedition, for me.
We described how JavaScript can help ease the load time of our site. I mentioned AngularJS and gave a brief tutorial on using it to make a simple notes application. Next on the list was conditional loading. PHP also had an honorable mention, and then parallel downloads had the floor. One thing to keep in mind is that some browsers don't download JavaScript files in parallel, so spreading those files across multiple hosts may yield no benefits. You should not take JS files into consideration when allocating resources to multiple hosts.
We covered image scaling, explained why it is a bad idea, and suggested what you should do to avoid this.
In Chapter 5, The Fastest HTTP Request is No HTTP Request, we covered HTTP requests, boldly stating that the fastest HTTP request is no HTTP request. We discussed how sprite sheets can help remove unnecessary requests by combining certain images into a sprite sheet and not loading them one by one. Image framing using sprite sheets in <image> tags instead of background images was also discussed. The frame consists of a container element, a frame element, and the image element. This chapter also covered combining files to help reduce requests. The rest of the chapter focused on server-side optimization.
The next chapter, Chapter 6, Testing, Testing, and Testing, talked only about testing. The more you test, the less you have to fix at the end of your project. You also appear more professional and your clients are more satisfied. We discussed some web tools you can make use of to test the performance of your site. We also took a look at how waterfall charts work and how to use your browser's developer tools.
Chapter 7, Speeding Up Development with Design Concepts, Patterns, and Programs, covered the mobile-first principle and relooked at single-page application frameworks, such as AngularJS, as a solution for your web applications. Learning design concepts to enhance performance was the main purpose of this chapter. We took a look at how the mobile market has grown in recent years and how it has affected our job as web developers.
Chapter 8, Using Tools for Performance, covered tools for your development process. This wasn't directly related to responsive web design, but it was intended to make the road to getting your site up-and-running easier and faster. We looked at tools used to manage our projects and applications, help develop and test our websites, and keep our projects backed up with version control.
Finally, you're here, in Appendix, Taking the Next Steps. There is no road map that can take you to your destination of becoming an amazing web developer. The only thing you can do is read what others have to say. Learn how they approached common problems such as browser restrictions and non-cross-compatible features—the list is quite long. There are a plenty of developers who have made a lot of progress. Here is a list of a few developers whom I find very helpful and whom you should take note of.