Having a fast website is very important nowadays. The way a website loads is important not only to the visitors but to the search engines like Google as well. This makes the website loading time one of the most important aspects when creating a successful website. The speed of the website depends on several different criteria and one of them is the hosting provider. Having a secure fast hosting environment can save you a lot of time efforts and can boost your rankings dramatically over non-optimized hosting that is cheap but offers bad user experience and loading time. In this article, we will show you our professional experience of optimizing websites to the extent that they get highest possible results in websites like GTmetrix and Google Insight. Also, so we will show you how to use Google Chrome browser to check if the website is working as it’s supposed to and to see the loading time of all elements of your website so it can be fully displayed to the end visitor. In the long run, this will help you get the needed fast user experience and all your website optimization efforts will definitely tell Google that you’re a person who cares about the performance of your website and that your website matters to you.
Is there a general website optimization guide?
As a web hosting company, we have quite a lot of customers who use different website building applications and tools and it is very important for us to know how these applications work, how and what files do they load and what makes them fast and what makes them slow. It’s virtually impossible to know every single application in the details that developers know it but our job has taught us how to find critical components that slow the website, make the site performance bad and influence your Google rankings.
What tools to use to measure your website performance?
We use websites and tools that give suggestions what are the weak points of your website and give simple suggestions what to fix. On top of this, we have optimized thousands of websites and we have gained the needed experience to see the weak points in a matter of minutes. As mentioned before, such websites and tools are Google Insight, GTmetrix, and Chrome browser. Every website owner should know how to fix the main suggestions from these websites, however, if you want to focus on your business and effectively grow, the best way will be to dedicate this work to someone who is more focused in this niche and has the experience. As a web hosting company, WebHostFace has done website optimizations and we can show you what is important to us when we start the process of making a website faster. At the end of this article, you will know how to optimize your website on your own. It might take you some time to check the resources provided and make the needed changes but believe us, the result is worth the time invested. If you are not a tech guy and wish to focus on growing your business, we can do the website speed optimizations for you so you can devote your time to other aspects of your business like writing content, doing SEO for your website, making the website popular with link building or doing some leisure activities with your family and friends.
Why and how to optimize your website for Google Insight? Can I achieve 100 out of 100 points?
Let’s start with the developers’ platform Google PageSpeed Insight. Don’t be scared, most of us are not developers too, but we are still using the Google Insight platform because it gives valuable suggestions about the performance and speed optimization of your website and of course, most importantly, they come from Google. As the name states, it’s a product by Google that shows you how your website’s performance is rated on a straight out of 100 points scale. The higher your website rank is on mobile and desktop, the better Google might rank you. It’s not explicitly written that if you score 100 out of 100 on your website Google will rank you on page 1 or in top three results but the fact that Google has made this tool and the fact that it is proactively showing it’s importance, definitely means you should consider it a top priority. It reveals some of their algorithms and best practices to facilitate and help you optimize your website to their best performance website guidelines.
Another fact about Google Insight is that you get the results of your website performance in terms of speed and user experience in the Google Analytics. You know that the Google Analytics is one of the single most important tools to measure the visitors’ metrics of your website. Inside the Google Analytics, you get your own space where you check the behaviour of your website visitors and you can see the loading time of your entire website. Google Analytics also shows the timings of each page on your website pages and the speed suggestions are connected with the Google Insight. This section shows the average page load time, the PageSpeed suggestions and the PageSpeed Score. Based on our experience, PageSpeed scores below 60 need immediate attention especially if the pages associated are important pages of your website. This is a very fast and effective way to see what Google has to tell you about your website and its pages in terms of speed optimization. Also, there is a link directly leading you to the Google Developers platform – Google Insight or also called PageSpeed Insights website where we can check the suggestions. This shows one more time the importance of the user experience and why the website needs and should be optimized for speed.
Google PageSpeed Insights Tips learned the hard way!
Here is a quick tip for you: it’s easy to complete the Google guidelines and get 100 out of 100 on a website that is not very popular and is just starting to grow. If your website is not full of fancy customer oriented plugins, ads, popups, social features and statistics measurements, it is normally easy to achieve 90 and above. If your site is heavy traffic and requires detailed statistics, traffic conversion plugins like popups and chat, don’t always push yourself to get 100 out of 100 from your website. Sometimes it is virtually impossible to get 100 out of 100 and still have the functionality you wish and require for your website to work properly. Our experience shows that anything above 80 is a super result for mobile and desktop in the Google PageSpeed Insights tool.
Another tip for you is that you can’t optimize everything.
As we mentioned Google Analytics a while ago, it requires a special code to be implemented on your website so you can track your visitors, where they’re coming from, what are they doing on your website. It also shows how much time they spent and what are their activities on your website as well as the page speed and the opening timings of your pages. If you run tests on several different websites that use Google Analytics, you might see that there is a suggestion that you optimize this resource in the Leverage browser caching section. However, this resource is an external resource to your website and you don’t have a direct access to it nor it’s code. So you simply get the code from Google Analytics, paste it into your website and you can’t modify the expiry header. Although Google PageSpeed Insight is telling you to Leverage Browser Caching for it, you are with your hands tied. So don’t always push yourself to optimize everything as it is virtually impossible.
What is the Google Speed Insight suggestion – Leverage browser caching?
Leverage browser caching is a setting to help you declare the expiry date or a maximum age in the HTTP headers for static resources. This setting instructs the browser to load previously downloaded resources from local disk rather than over the network. Such a resource is the Google Analytics tracking code and to be specific the – https://www.google-analytics.com/analytics.js (2 hours). The 2-hour period in the brackets shows the expiry date or the maximum age which as you may see is quite little. Depending on the type of the file, the leverage browser caching differs. The idea is – the lower the chance to change the file, the longer it should be kept. Meaning you do not change the logo of your site every day or every week. Normally, you do it once or if your project gets rebranded, so you can set the expiry for the images .png files for access to 1 year.
Check our case study, how we optimized the websites of our clients following the Google Speed Insight suggestions (coming soon)
Why and how to optimize your website for GTmetrix tests? Can I achieve score A on all tests?
Let’s now check the website called GTmetrix. It is a free web speed test tool that gives you access to different server locations in Europe, North America, South America, Australia. You can use these different server locations to test your site in terms of speed, how fast it loads and what is the number of connections that are made to your website in order to load completely. Also, you get a nice visual score for your Page Speed score and for Yslow. The maximum score in GTmetrix is A so we need to head in this direction and it is pretty possible to be achieved!
If we need to make a differentiation between Google Speed Insight and GTmetrix, the GTmetrix shows you what elements are taking too long for your website to load and how to optimize them, including detailed suggestions and information with tutorials and easy-to-follow articles.
Why do we like GTmetrix?
Well, it’s free, it’s very well written and it gives you quite a handful of suggestions. On top of this, you get different server location so if your visitors are mainly from Europe or North America you select the server that is near the main visitor stream of your website and you get the most accurate analytics for how long they open the website fully, what is displayed first and, of course, what to edit in order for them to get the best possible user experience.
Will you wait 10+ seconds for a website to load?
Based on my personal experience, I don’t like websites that load slowly. There are so many different resources over the Internet and if a website doesn’t load fast in let’s say 2-3 seconds, I simply don’t wait for the website, close it and go to the next resource. With more than several billions of websites, it’s a shame to wait for slow websites to load. Of course, some websites are meant to be slow and their owners know the sites take a little longer to load.
What does this mean and why some sites are intentionally slower?
These websites are heavily dependent on different tracking and analytics tools. We spoke about Google Speed Insight and it is just one of the many visitor activity tracking tools. If your site has lots of visits you will definitely need to know what these people do on your pages and how they interact with your website. Here comes the bad part of implementing important but sometimes heavy and website slowing tracking tools and scripts that give valuable information about your visitors. I personally like Piwik (now Matomo) as a visitors activity tracking tool on top of the must-have Google Analytics, however, Piwik (now Matomo) has some downsides. One of these downsides is exactly the decrease in the fully loaded website speed. This tool can be made to load at the end of the loading of the website when everything else is loaded so virtually your visitor will not see the difference in terms of speed but for machines tracking your website, tools, and search engines like Google monitoring and tracking your website with every visitor, this can make a huge difference.
Check our case study, how we optimized the websites of our clients following the GTmetrix suggestions (coming soon)
Why and how to optimize your website with Chrome browser? What to look for in the Network tab?
Let’s talk a little bit more about Google Chrome browser and how it can help you optimize the speed of your website and see if the website is working as it should be. In order to understand if your website is loading fast enough, we will introduce some terms like DOMContentLoaded and Load times.
As a browser developed by Google, it implements some very important and widely used tools not only for developers but for website owners and webmasters as well. Let’s start with some updates – from the beginning of January 2017 when Chrome introduced some important SSL (secure socket layer) changes. All webmasters who use the Google Search Console got messages stating – Nonsecure Collection of Passwords will trigger warnings in Chrome 56. This made the SSL an important and mandatory part of every website that wants to make legitimate online business. The SSL sign or the https and the green lock on top of the browser where you write the URL were introduced as something that you should do right away. The good part was that a lot of the hosting companies who took their business seriously introduced Let’s Encrypt: an option that allows you to install free SSL for your website in a matter of 3 mouse clicks. You simply log into your CPanel, locate the let’s encrypt button and install the SSL for the website you wish.
So following the guidelines that are coming directly from Google is something that every website owner should do. That is why optimizing your website using the Chrome website browser is as important as optimizing the speed and opening time of your site with Google Speed Insight and GTmetrix.
What to look for in terms of website speed optimization in Chrome?
When you open your Chrome browser and hit the F12 (for Windows) or Command+Option+J (for Mac) button on your keyboard a new type of console will open on the right-hand side on your screen. It will make your website a little bit smaller as it will adjust your site in the space left on your screen. Note this is a good way to check if your website breaks on different resolutions i.e. on different devices like laptops, tablets, smartphones – simply drag the new separator that appears on the left and right to make the site smaller or larger and see how it rearranges on different screen resolutions. Note that a 4.7″ Apple iPhone 6 viewer reads your website on a 375 x 667-pixel screen, so you can see what is the visible part of the website for such users using the Chrome browser.
As for the website speed optimization, there are several different buttons in this console but we will stick to the Network button as it will give us some important metrics on how fast your website loads and, as mentioned earlier, the DOMContentLoaded and Load times.
When the console is opened with F12/Command+Option+J, simply type in your website in the browser and hit enter like you normally do to open a website or simply use F5/Command+R to reload it if you have already opened the site. On the right-hand side, you will see the different parts of your website start to load like different files with different file extensions such as: .php, .js, .css, .png, .jpg. These are the components of your website, the code of your website, the styling and the CSS, the pictures and everything the browser needs to display your website to the end visitor. Every single file takes some time to be loaded and to be extracted from the hosting server and displayed by the browser to your visitors. The most important part of this network tab inside Chrome browser console as said is on the bottom of the console where it’s written DOMContentLoaded and Load. The results are in milliseconds or seconds and the less these seconds are the better for your visitors, for the search engines and for you.
What is DOMContentLoaded and Load times in Chrome Browser?
Both of these metrics are very important and show how Google and especially Chrome browser will load your website and the timing of this process.
The explanation of the DOMContentLoaded is – the event is triggered when the initial HTML document has been fully loaded and parsed. This is without the waiting time for the stylesheets, images, and subframes to finish loading.
The Load time on the other side of the picture is considered to be the fully loaded time for your website.
If your website is optimised it should completely load, which is the red text, in less than 2-3 seconds, and this is your ultimate goal. If the website needs some work and loads above the two-three seconds limit, you will see which component takes the most time to load in milliseconds or seconds in the elements listed above. You’ll see if it’s a .php file, if it’s a picture that is too large and it is taking too much time to fully load or if it is your CSS styling sheets data giving you trouble.
The real question is – Do hosting companies want your site optimized and with perfect speed performance?
Let me reveal a secret to you – the hosting companies don’t wish to have optimized websites on their servers. I’m sure that most of you who have popular sites know the answer but let me tell you what is the real truth behind this. If a website is not well-optimized and it has a decent amount of visitors it will take more and more resources over time.
You know that there are several different types of hosting and the entry level is called SSD shared hosting where a lot of people are sharing one and the same server. Normally this server is a monster machine that has hundreds of GBs of RAM, at least 32 CPU cores and powerful CPU processors with large SSD drives, but still, these resources are limited, although it looks as a hell of a powerful machine. Imagine you have several very popular and poorly optimized websites on the shared hosting server. The work of the hosting company and the system administrators is to monitor the performance of the server if the server gets load it means it is busy and all the customers get poor quality of service and a decent amount of loading time due to the depleted server resources. The server administrators or the automated server monitoring tools will see which account and specifically which website is getting these requests and will limit them so it doesn’t slow the whole server.
Even if you’re not an expert you already know that the work of the system administrator is to simply cut off these requests or temporary block your website so the load of the whole server drops.
In the normal case scenario, these will be real people willing to visit your website, read your articles, get your products, subscribe to your services and hopefully generate some income to you.
The server administrator will not start optimizing your website and they will simply open an abuse case to you and they will tell you that your website is taking way too much resources than the resources allocated to you. The next step will be to show that the shared hosting accounts are not suitable for you anymore and you will be forced to upgrade to a higher hosting solution like a virtual private server hosting (VPS) or even a dedicated server hosting (a private server) only for your website and the needs of your projects.
This is far more profitable to the hosting company as the difference between shared hosting which is the entry level and the virtual private server hosting (VPS) is like 5 to 10 times more and from VPS to a dedicated server it is again 5 to 10 times more depending on the resources you get in these packages. And not to mention that the VPS and dedicated servers are paid monthly so this all means that you become a very very profitable customer to your hosting company.
Well, we at WebHostFace have quite a different strategy!
We know that people love to install different plug-ins that do different fancy things on their websites like something to pop up, some newsletter sign-up forms, contact forms and chats, to have different tracking tools to monitor the activity of the website visitors or simply have plugins that make backups or save some entries to the database of the website. All external plug-ins that are installed on your website take valuable resources and based on our experience, people use hundreds of different plugins and the website finally gets very very slow.
How can WebHostFace help you with your website speed optimization?
Here comes the good part: we have the experience to tell you which plug-ins are good, which are taking too many resources and give you almost nothing for your website performance and growth and we can substitute them with working plug-ins or simply optimize the ones that you use. Optimizing existing plugins by tweaking their settings and making them perform much faster than before is vital for the website speed and performance for your visitors, the search engines, and you as a website owner.
Another good thing is that the website speed optimization process gives very visible results to the end user, the people that you wish to attract and do business with, and to the server resources that your website uses. Pretty much it is a win-win-win situation where everyone is happy. You as a website owner have a website that is working fast, it is optimized and it can still be hosted on a lower-end hosting solution that is not so expensive, your visitors get the best user experience possible as the website loads fast and they get the resources they are looking for in a matter of two or three seconds, and the last but not least your hosting provider doesn’t have to monitor your website and to temporarily suspend or limit it is resource usage. Pretty much it’s a win-win-win situation for three different parties your visitors, your hosting company and you. There is someone else who is also monitoring the performance of your website – the fourth one is Google and the other search engines who care and check your website speed performance regularly.
