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
- 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.
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 that 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.
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.
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:
Use Asynchronous Script:
Avoid plugin is a 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 fonts, try to host it in your root folder either call it from other resources.