How to Optimize Your Website And Obtain a Google Page Speed of 98-100?

First, please backup your files before you start modifying anything I write in this post.

Thank You!

First, why you should follow my advice? Well, almost anyone can tell you that a fast website is a good website and a good website is a mobile and desktop 100% compatible website but, as a developer, you need to test your site with Google’s Page Speed tool(https://developers.goo…).

Obtaining a good grade there can help your search engine traffic… So, what Google Page Speed score your project gets?

I’ve done a few projects with 98-99 out of 100, and a few with perfect 100.

I will list here a few “secrets” I used to boost my grade from 68/100 to 99/100.

1. Use only inline CSS

You need to use only inline css, period. Don’t link to any external frameworks(Bootstrap, etc.), don’t link to any Google Fonts file, to any particular style…

If you want to be productive, you ca use PHP to include_once(“”); your css files into the interpreted file.

If you want to use fontawesome or Google Fonts, you can put fontawesome file before you close your </body> tag.

You can also modify the Google Fonts .css file and include it inline into your source via PHP. Also, you can remove all the Vietnamese or Greek fonts from the Google Fonts file and use only the Latin style, works with english projects and most of the languages.

2. Insert the .js files at the end of the file

This is no secret that, inserting the .js files before you close </body> tag can get you a good Page Speed grade.

3. Use Server Side compression(gzip)

This is a pretty easy step, I provided instructions here on another post on how to do that.

4. Optimize images

Don’t exaggerate with images, use a low resolution image thumbnail, I use only < 10kb images. Specify the width and height of the image. You can use a free online tool to reduce the size of the images.

5. Minify css, js and html

This step gives anyone a lot of work if you are updating your site constantly… You can use free online tools to minify your css, html and js code.

6. Reduce the Server Response Time

Don’t load your server with requests, use, as much as you can only static content or make Ajax requests to content.

Bonus Point!

Transform your favicon in BASE64 text and include the code via PHP and get rid of a few connections that can slow down your website… I use this tool to convert my favicons: https://xaviesteve.co…

 

Hope this experience helps, try and play with this list and tell me your result.

Take a look at a sample page that I’ve recently made and got a great score: https://developers.google.com…

Redirect all 404 to 301 (.htaccess)

This is the simple code that I use to redirect all 404 errors (Not Found) to 301 (Moved Permanently). This will help you a lot if you had a previously WordPress site or another popular CMS that used a lot of permalinks to display content (eg.: tags, categories etc.).

This will also help with Google Search Console not found errors. After a new Google Crawl Index it will show a clean domain with no 404’s.

Hope it helps…

Force https and activate mod_deflate

This is my .htaccess file that manages the https and gzip compression(server side).

Why it’s ok to replace “http://” with “//” in a script

At least a dozen heavily trafficked sites use only // instead of https:// or http:// when linking to a *.css file, *.js file and sometimes, even when linking to other resources like external links. It seems to me that both versions are correct, using only // when linking to a script or style file. A relative URL without a scheme (http: or https:) is valid, per RFC 3986: “Uniform Resource Identifier (URI): Generic Syntax”, Section 4.2.

Sites like Youtube, Google, CNN, WordPress, TechCrunch, Twitter, Reddit use only // instead of http:// or https:// when linking to resource files or external links.

I can’t provide here the impact of excluding a few characters but, for heavily trafficked sites can make a difference I suppose eliminating the loading time and bandwidth.

Try it Yourself / Live DEMO

Responsive Google Map (Javascript & Google API V3)

This tutorial uses HTML5 and JavaScript to implement a responsive Google Maps map, no iframes or css code needed.

The main idea of this tutorial is to make the pointer on the map responsive / keep the pointer fixed on the chosen location on the map as we change the size of the window/map layout

Implementation guide

  • Get a Key/Authentication – Google Maps JavaScript API here
  • Edit the header line https://maps.googleapis.com/maps/api/js?key=[KEY]&callback=initMap and replace [KEY] with your unique Google Maps Key
  • Use Google Maps or other aplication to find the GPS coordinates of the location/pointer on the map and paste them on line 22 and 32 here like this: new google.maps.LatLng(51.506767, -0.1244953)

 

See a live DEMO or Download the code.