Web performance optimization - get higher marks on Google PageSpeed Insight

By default, the optimization options in "Publish Website" under Preferences are selected as depicted below which correspond to part of the performance advices by Google PageSpeed Insight (https://developers.google.com/speed/pagespeed/insights/):

Optimization advices from PageSpeed Insight:

Avoid landing page redirects
Eliminate render-blocking JavaScript and CSS in above-the-fold content
Minify CSS
Minify HTML
Minify JavaScript
Optimize images
Prioritize visible content

As we use Responsive Web Design, the same page is used for all devices so there is no need to redirect visitors to another page prepared specifically for each device. Therefore we can avoid landing page redirects.

The following two options are for eliminating render-blocking JavaScript and CSS in above-the-fold content:

These three are for minifying CSS, HTML and optimizing images.

For JPG images, you may need to select the lossy method and progressive mode as shown below in order to pass the test at PageSpeed Insight.

Javascript files provided by us are all minified so there is no option to do this.

We will use the Sample Website 2 to demonstrate "Prioritize visible content". When we check this website on PageSpeed Insight, it shows "Prioritize visible content" as possible optimization for the mobile. The reason is "Only about 52% of the final above-the-fold content could be rendered with the full HTML response". Though we already use responsive images for that image, it seems that it still exceeds certain threshold. What we will do is to swap the position of the image and the text element below when in mobile layout as shown in the second screenshot.

To swap the image and the text element in mobile layout. Follow the steps below:

Select both the image and text elements.
Click on this button on the toolbar or select "Edit" > "Responsive Web Design" > "Group Elements for Mobile Layout" from the main menu.
Select the options "Add Group" and "Reverse the order of the elements".
Click on the OK button to save the setting.
Now when in mobile layout, the text element will be on the top.

Click on these links Sample Website 1 and Sample Website 2 to see a sample test on Google PageSpeed Insight.

Besides the above, there are other optimization advices as listed below that are needed to be set on your web servers. For details, click on the link to Google PageSpeed Insight below: