Hey guys! You have landed on this page because you want to speed up your website by hosting Custom Google Search libraries and dependencies on your web server and could not find an easy source to accomplish it. Well, in this article I will tell you how you can host Google Custom Search (GCE) on your web server so that it does not add unnecessary load time on the server and also the fact that it is render blocking.
I spent quite some time dissecting google custom search form and how does it work. Google search form that you see on my website just below the navbar, it make use of the the shiny.css file which is offered by google on it’s server. Because of this css file, I was getting a warning in Google Pagespeed Insight tool. This file is not minified and is causing extra load time while rendering the webpage. Can you believe it, google offer unminified version of their css when you generate GCS from google’s console. If you are using GCS on your website make sure you this file is minified and does not block the page render.
Google Custom Search Form
Apart from this, google uses javascript to load entire form. This javascript was again hosted on their servers so there was nothing much I can do for that unless I find out a way to host these dependencies on my server. I started experimenting with the google form and in less than 40 minutes I was able to find the bare minimum requirements for GCS. I only kept the part of the form that was required and rejected everything else. Find the code for GCS below,
<form role="form" class="form-inline" action=URL_OF_YOUR_SEARCH_PAGE id="cse-search-box" style="margin-top: 2em;" _lpchecked="1"> ?????<input type="hidden" name="cx" value="YOUR_PARTNER_PUB_ID"> ?????<input type="hidden" name="cof" value="FORID:10"> ?????<input type="hidden" name="ie" value="UTF-8"> ?? ?????<input type="text" style="width: 100%;" class="form-control" name="q" placeholder="Type anything and hit enter..."> ???<button type="submit" class="btn btn-green" name="sa">search</button> </form>
Above code is just the bare minimum that you need in order to create a Google Custom Search input box. Now, there is no need of of any external css. You can style this form in whatever ways you want. For ex – Have a look at the above code in action below.
Type anything and hit enter
The above search input box is fully functional and does not depend on any other external source. You can try to search from above form and see the results in the results page. Let’s create a search page to show the results of the search query submitted from the above input box.?