Have you ever used a Google PageSpeed Insights?

Google PageSpeed Insights analyzes each content of a website and suggests you how to shorten the page loading time for mobile and desktop devices in order to optimize web performance. As Google officially announces the loading speed of a website affects the search engine results ranking, you need to make your website reduce the speed and improve usability and the user experience.

The loading speed is an issue that cannot be ignored for not only SEO but also for usability improvement. It would be better to be faster. Especially if the load time of your homepage is slow, many visitors may click “back” and you will lose the opportunity of engagement. To avoid it, you should take the advice of Google PageSpeed Insights and provide better web performance to users.

How Google PageSpeed Insights Works

Google PageSpeed Insights is very easy to use although fixing the problems takes time and efforts. First, go to Google Developers PageSpeed Insights and enter a web page URL which you want to analyze.

Google PageSpeed Insights

I will show the results of google official blog. The analysis is provided for both mobile and desktop devices. The score range is from 0 to 100 based on the rules the web page will be evaluated. In the results you will see the priorities are different depending on three colors – Red (should fix), Yellow (consider fixing) and Green (not problems found). Therefore, it would be wise to start fixing problems with red priority because those have a big impact on the page display speed.

For mobile you will get advice about speed and user experience, while for desktop devices you will get a summary of suggestions. Here are the main 15 rules on Google PageSpeed Insights.

10 Speed Rules

Mobile - googleblog Laptop - googleblog

1. Avoid Landing Page Redirects

Since HTTP request is generated every time you redirect, it is possible to improve the web page performance by minimizing the number of redirection.

2. Enable Compression

You can reduce the download time by returning the files that have been compressed on the server to gzip format to decrease the data usage, not the original files that have not been compressed. Make sure that you have enabled gzip compression on your server.

3. Improve Server Response Time

The response time of the server is the time taken to read HTML from the server to start the rendering of the page. If the response time takes much time greatly, the web performance would be a problem. You should reduce the server response time to more than 200 milliseconds.

4. Leverage Browser Caching

In case you visit a site more than once, you are able to eliminate the download time if you read from cache without having to reacquire the images, JavaScript, and CSS.

5. Minify Resources

If there are any extra space, line breaks, and indentation in each file of HTML, CSS and JavaScript, it is possible to reduce the file size by removing them. You can also make it by shortening the variable names.

6. Optimize Images

By converting to the proper formats like png, gif, and jpg, removing the unnecessary elements of you image files, you can reduce the size.

7. Optimize CSS delivery

The browser blocks external CSS files before drawing visual contents. Optimizing CSS delivery helps you to inline the CSS file and eliminate the waiting time.

8. Prioritize Visible Content

If the amount of the requested data exceeds the congestion window, round trips between servers and users to read a web page will be needed. In the case of slow network, the load time will be also significantly delayed. You should reduce the size of the above-the-fold content of your page.

9. Remove Render-Blocking JavaScript

Since it is necessary to analyze the JavaScript before starting the drawing browser, it takes time to download contents and execute them so you should try to avoid render-blocking JavaScripts.

10. Use Asynchronous Scripts

Asynchronous script makes page rendering faster. So use asynchronous scripts to optimize web performance.

5 Usability Rules

1. Avoid Plugins

With plugins, it is possible to make it easier to process a special type of contents including Flash, Silverlight, and Java in the browser. However, it would be a major cause of the problems like hang, crash, and security. Therefore, you should avoid plugins as much as possible.

2. Configure the Viewport

Viewport controls the appearance of the web page on a mobile. If you don’t have a viewport, the mobile devices will render the page in the width of the desktop screen in general. If you set the viewport, you will be able to control the scaling of a variety of devices and the width of the page.

3. Size Content to Viewport

On both mobile and desktop devices the user experience decreases if users need to scroll horizontally or reduce the display to see the entire page. To prevent the need of scrolling horizontally, you have to adjust the content to fit the width of the viewport.

4. Size Tap Targets Appropriately

In touch screen devices, it becomes difficult to tap more accurately than a mouse cursor if buttons and links are too small or too close. To not make users confused to tap by mistake, you must create target taps largely and place each taps separately enough.

5. Use Legible Font Sizes

The four units of web font size are px, pt, em, and %. Viewport affects the scaling of the font of the mobile devices. So always use legible font sizes to make your web page load faster.

How do you reduce the loading time? Let me know your experience in the comments!