Using Google PageSpeed Insights to Improve Web Performance

This course covers how to analyze your web pages to make sure they are following known performance best practices and shows you how to implement these practices in an ASP.NET application.
Course info
Rating
(29)
Level
Beginner
Updated
Jul 16, 2015
Duration
3h 19m
Table of contents
Getting Started
Initial Website Analysis and Performance Principles
Enabling HTTP Compression
Leveraging Browser Caching
Image Optimization
Using CSS Sprites
Correctly Ordering Styles and Scripts
Minification and Bundling of CSS and JavaScript
Additional Recommendations
Description
Course info
Rating
(29)
Level
Beginner
Updated
Jul 16, 2015
Duration
3h 19m
Description

Developers today have access to multiple tools that can quickly analyze a web page for performance best practices and give specific suggestions on what items should be addressed. This course first covers the different analysis tools that are available. It then uses one of these tools, the Performance Scorecard Chrome extension to analyze a sample website. Then, the course walks through each of the important recommendations given by the extension and shows how to fix them. By the end of this course, you will have a firm grasp of the most important web performance issues and how to address them.

About the author
About the author

David Berry is a software engineer with over 15 years of experience developing applications in languages such as Java and C#. Throughout his career, he has worked extensively with enterprise database systems including Oracle and SQL Server.

More from the author
More courses by David Berry
Section Introduction Transcripts
Section Introduction Transcripts

Initial Website Analysis and Performance Principles
Hello and welcome to Pluralsight. My name is David Berry and this is the second module of the course Improving Website Performance with Google PageSpeed Insights. In this second module we'll conduct an initial analysis on a demonstration website and put together a plan to improve this website based on the recommendations we get back. For this module I put together the sample website that you see on your screen, and I made sure to include all kinds of poor performance practices when creating this demonstration site. What we're going to do in this module is to analyze this site with PageSpeed Insights, and then in the following modules work through the recommendations we get and fix them in this site. This way you can understand exactly why PageSpeed Insights is giving you the recommendations it is, what the impact of these are, and how to approach fixing the problem. This way when you encounter these issues on a real site, you will know exactly what to do. You might find it useful to follow along with the code for the website that we are analyzing, so I've made that code available at the location on your screen. The code is accessible regardless of your Pluralsight subscription level in order to make sure that you can follow along if you want to. Looking through the code you will see that the website is just for demonstration, it is in no way a fully functional website, but it does have all the elements we need in order to get some hands on experience with PageSpeed Insights. So if you wish you can pause the video now to get the project downloaded and set up. Next we'll run our initial analysis of the homepage of the site and formulate a plan to work through the list of recommendations that we get back.

Image Optimization
Hello. My name is David Berry. Welcome to this module on Image Optimization. The next two recommendations we're going to take a look at are two recommendations around images, which are Served scaled images and Optimize images. We see that for our page, both of these are marked with an H for a high priority recommendation. For many sites, you will find having your images properly optimized is a big component of the overall performance of the page, as images are often some of the largest assets on the page. If we click over to the Network tab, and then click on the Images filter to only show the images in our file list, we see that on this particular page, images comprised of 1. 7 MB of the 2. 1 total megabytes for the page. So we understand right away that images are pretty important. There are two sets of recommendations from PageSpeed Insights, and we will tackle them one at a time. The first is around serving scaled images, which is all about serving up images with the proper dimensions for the page that it is on, so we'll address that one first. Then we'll look at the second recommendation of optimized images, which has to do with applying proper lossless compression to an image to minimize its size. Each of these recommendations is aimed at making sure that we are sending images to our server that are as small and efficient as possible. With this idea, once again, we want to make sure to minimize the number of bytes that the browser has to download. So with that, let's jump right in to understanding what we can do about this recommendation around serving scaled images.

Additional Recommendations
Hello, my name is David Berry. Welcome to this final module of the course on Additional Recommendations to improve the performance of your website. In this module, we're going to start off by talking about the recommendations PageSpeed Insight gave us that I chose not to address in this course and the reasons why I chose not to address those recommendations. Next, we're going to talk about some additional recommendations outside of PageSpeed Insights that you'll want to make sure that you are implementing on your website. Then we'll discuss how we can take advantage of the network throttling capability built into Chrome to allow us to simulate different connection speeds. After that, I want to introduce you to the WebPageTest tool, which is another tool that provides a lot of useful performance information that you may want to incorporate into your processes. And finally, I'll wrap up with some thoughts about deciding what pages to optimize first based on page view statistics and how to document your efforts. So let's jump right in and take a look at the PageSpeed Insights recommendations that we did not address in the course.