Skip to content

hardhatdigital/google-page-speed-guidelines

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

7 Commits
 
 

Repository files navigation

Google Page Speed Insight Rules:

Google’s pagespeed module gives you a number of tools that can speed up front-end performance by making minor tweaks (trimming the domain out of local URLs, inserting DNS prefetch tags, collapsing whitespace) or major ones (lazy-loading images)

1. Avoid Landing Page Redirects

Avoid having more than one redirects from the given url to the final landing page.

2. Enable Compression

Enable that the assets served to clients are in gzip compression.

3. Improving Server Response Time

Ensure that the server response time is not more than 200 ms.

4. Leverage browser caching

Ensure that the response from server includes caching headers or the resources are specified to be cached for only a short time.

  • Move favicon.ico to assets folder and use favicon_link_tag.
  • Use the following Nginx config to ensure http cache-control on images in /public/images directory:
# Media: images, icons, video, audio, HTC
location ~* \.(?:jpg|jpeg|gif|png|ico|cur|gz|svg|svgz|mp4|ogg|ogv|webm|htc)$ {
  expires 1M;
  access_log off;
  add_header Cache-Control "public";
}

5. Minify Assets (CSS, and JavaScript)

Ensure that the CSS and JavaScript assets could be reduced through minification.

  • minify your CSS, and JavaScript resources. This is done by default through sprockets and uglifier in Rails.

6. Optimize Images

Reduce the filesize of ithe images without significantly impacting their visual quality.

7. Optimize CSS Delivery

Avoid including render blocking external stylesheets.

  • No @import calls for CSS.
  • No more than one external CSS stylesheet of an reasonable size (less than 75k or so).
  • Inline small CSS into HTML using style tags for above the fold content.
  • No CSS in HTML things like your divs or your h1s (in element CSS).

8. Reduce the size of the above-the-fold content

Reduce network round trips that are required to render the above the fold content of the page.

  • Enable Keep-Alive HTTP connection.
  • Structure your HTML to load the critical, above-the-fold content first.

9. Remove Render-Blocking JavaScript

Avoid referencing a blocking external JavaScript file in the above-the-fold portion of the page.

<%= javascript_include_tag 'application', async: Rails.env.production? %>

10. Use Asynchronous Scripts

Leverage asynchronous loading of scripts.

About

Guidelines to optimise page speed as per Google Page Speed Rules

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published