A Quick Overview of Google Pagespeed insights

Google Page Speed Insight is the first rule that a webmaster needs to care about presenting their website accurately. Let’s see why Google sets those standards and why it is crucial to structure a site properly. Google Page Speed Insight mainly consists of ten essential rules. You have to care for some other additional states to achieve the primary goal. Here we are going to sort them now:

  • Avoid Landing page redirects
  • Remove render-blocking JavaScript and CSS
  • Enable Gzip or deflate Compression
  • Improve server response time
  • Enable Leverage browser Chaching
  • Minify resources
  • Optimize CSS delivery
  • Optimize images
  • Prioritizes visible content
  • Use Asynchronous Script

To achieve these goals, you have to take care of some usability rules to simplify the process as much as possible. These  rules are given below:

  • Avoid plugins
  • Configure the viewport
  • Size content to display port
  • Size tap target’s appropriately
  • Use legible font size

Avoid Landing page redirect: Landing Page redirects rules are for them who use to be redirected their page more than one time. For example:

  • If your website uses a responsive design, then don’t use any redirect for your main landing page.
  • If you use a subdomain for mobile version your mobile user should be redirected to a subdomain (e.g., facebook.com => m.facebook.com)
  • If you redirect your mobile user’s from a subdomain to another subdomain, it will be very slow in mobile versions. e.g. (yourdomain.com => www.yourdomain.com => m.yourdomain.com.

It is slowing down the speed of the mobile user’s because your web browser needs more time to look for the DNS lookup and other relevant details for each redirect.

Remove Render blocking JavaScript and CSS: In a simple word render-blocking JavaScript and CSS are this large and extended Script that prolongs the download process for a web page. If you use JavaScript and CSS, you just need to either directly put them into the header area (if they are small) or use HTML async attributes (only for JavaScript) or entirely defer them into footer area. So, they cannot block a page loading. Learn how to fix to render-blocking JavaScript for big files.

As like as JavaScript, you can take care of the CSS resources. You can directly put the critical part of your CSS in the header area, remove the white space and comments from the CSS files and combine all CSS file’s in central data to minimize the HTTP request from the server. Learn more about how to fix to render-blocking CSS.

Enables Gzip or Deflate Compression: Compressed web pages are working like a zipped folder which sends from servers quickly and extracted by the browsers. Most of the modern browser is supports web page compression. It is straightforward to enable web page compression by editing the .htaccess file. But before allowing compression for a website, make sure that your web server supports this feature.

Improve server response time: Server response time is a problem for site speed. To get faster speed use standalone IP and an excellent webserver to hosting your website’s files. There are a lot of tools are available on the net, where you can test your site server response time. You can use Pingdom, GTmetrix or Seositechekup to check your server response time.

Enable Leverage browser Chaching: Leverage browser Caching actually allows the browser to save your web page data in browser cookies. When you request a website the browser firstly checks it in the computer system, if it was stored in the browser before, it is loading faster. If your requested web page is not saved before then, the browser sends a request to the server to download the page on your device.

Minify resources:  Removing whitespace and comments from your HTML, CSS and JavaScript resources can reduce the time for loading a web page. You can minify your HTML, JavaScript and CSS resources quickly using jscompress.com, cssminifier.com or PHP minify from Binpress.

Optimize CSS delivery: Optimize CSS delivery is very simple. Check the header area. If you see more than one HTTP request for CSS files or more than one file, try to combine those data in a large file. You can set the priority for the CSS codes or inline small CSS files. Don’t inline your CSS, if you have a significant amount of data and don’t use the CSS attribute’s in your HTML resources.

Optimize images: Optimizing images need precautions. Don’t use the big picture for small purposes. Resizing your image as needed can be a good solution. But take care of the image compression. You can either compress your website images lossy or lossless. You can also use a Content Delivery Network to reduce the data usage from your server.

Prioritizes visible content: Set the priority for visible materials that can reduce the time for a page download. You can configure the priority by modifying your CSS files, Deferring JavaScript files, Inline the critical part of your CSS markup in the header area. By the way when your website user’s request for a page your prioritize contents will be shown first. For example, content area or others significantly visible contents for which your visitors are looking for.

Use Asynchronous Script: If you use inline JavaScript try to use the asynchronous method. You can use async your js script by using the HTML async attribute. Asynchronous Script lets the browser loading the web page quickly and slowly download the script afterward.

Avoid plugins: Avoid plugins is the precaution for loading your website more quickly. Use functions and specified templates to load your site faster.

Configure the viewport: Use media query for CSS and responsive menu to set up the viewport for all types of devices. Set the width of 100% of all visible elements.

Size content to viewport: Your content size is a significant matter for a responsive solution. But you can use percentile instead of using a fixed dimension in a media query.

Size tap target’s appropriate: For a touch screen, make sure that your HTML elements are finely designed. Don’t use too big or too small buttons or HTML elements that are too much closer or overlapping. Configure the size of every HTML element and make sure that each of them is nicely viewed on mobile devices.

Use legible font size: Do not use too big or too small font size for essential elements. Make sure that your website fonts are easily viewable and readable from any device. If you use custom font’s, try to host it in your root folder either call it from other resources.