No, that\u2019s not the case.<\/p>\n\n\n\n
According to Google research<\/a>, the longer it takes for a page to load the more people would abandon a website.<\/p>\n\n\n <\/p>\n\n\n\n Also, Google has introduced Web Core Vitals (that counts as a ranking factor for websites) that goes into even more detail when it comes to the speed of loading websites. The faster your website, the better your chances to get to the first page of Google search results.<\/p>\n\n\n Hi there, my name is Artem.<\/p>\n\n\n\n I\u2019ll share our experience, knowledge of our development team, and techniques we used to improve the loading speed of our own website (FirstSiteGuide.com). <\/p>\n\n\n\n By following this tutorial, you will understand the elements that influence the speed of your website. With each element, I will show you a tool that will help you to speed up the website<\/strong> or solve a particular problem. Also, where possible, I will mention services that you can safely use, without having to spend hours on research.<\/p>\n\n\n\n P.S.<\/strong> Some steps within this guide are specific to websites built with WordPress<\/a> software since that\u2019s what we use for our site. If you are using some other website builder tools<\/a> you can apply similar speed optimization techniques based on the available features.<\/p>\n\n<\/div>\n\n\n Before doing anything, it is important that you conduct a proper test. Although you can do a lot even without one, I strongly suggest running at least one speed test so that you have a benchmark that will help you to understand how well your site performs, and how good the result is after you finish all of the improvement steps.<\/p>\n\n\n\n Luckily, there are free speed tests available to anyone. You just have to choose one, enter your URL, and let the tool perform its magic.<\/p>\n\n\n\n Since most people optimize their site for Google, the first tool I will mention is Google\u2019s PageSpeed Insights. It\u2019s quite straightforward, and you can have the result in a matter of seconds.<\/p>\n\n\n\n In my case, it took as little as 10-15sec for the test to complete and show me the results shared in the screenshot below.<\/p>\n\n\n <\/p>\n\n\n\n After seeing the green number on top where you are aiming to get a score of 100, there will be several other segments you want to scrutinize. Those are:<\/p>\n\n\n\n All three elements are a part of Web Vitals which are now included in Google’s main metrics that will show how fast or slow your site is. You can learn more about Web Vitals in our guide about how to optimize your mobile site<\/a>.<\/p>\n\n\n\n One of the most popular website speed tests is GTmetrix. It is completely free, and can be done in less than a minute:<\/p>\n\n\n\n After that, you will get a grade that will show you how fast your website is. The test will also show you details like the performance of your site, its structure, as well as web vitals that are now a core ranking factor for Google. <\/p>\n\n\n <\/p>\n\n\n\n If you haven\u2019t already actively worked on optimizing your site for speed, then chances are you will not get a perfect score. But don\u2019t worry, you can work towards that if you start following all of the steps.<\/p>\n\n\n\n A fast website starts with good hosting. No matter how hard you try to deliver the best user experience, if your hosting sucks, the speed of your website will suffer.<\/p>\n\n\n\n The best hosting companies<\/a> take care of everything, and it\u2019s not necessary that you understand what goes behind closed doors. From the quality and well-maintained hardware to regularly updated software components, there\u2019s a lot that a hosting service can do to improve the speed of your site.<\/p>\n\n\n\n To start the right way, get your site hosted with Bluehost<\/a>, one of the rare hosting companies officially recommended by WordPress.org. Years of experience and millions of hosted websites make this hosting company one of the best in their field – something that will easily translate into having a robust website.<\/p>\n\n\n\n Our world is a big place. Although internet speeds have improved drastically over the years, the physical distance between computers and servers still play a significant role in online speed. This means that loading information from a server from your country will generally be faster than loading data from across the globe, just like it\u2019s easier for you to buy a coffee table from IKEA in your hometown instead of having to drive to get one in another country.<\/p>\n\n\n\n This is where Content Delivery Networks come in. They allow you to have your website hosted on several servers across the globe. CDN can recognize the nearest location to each individual loading your site, and load the content from the nearest server. So, if a visitor tries to load your site from the USA, they will get the content from one of the USA servers, while someone coming from Europe will load your site via a server located near them, for example in London.<\/p>\n\n\n\n If you are hosting the site on Bluehost<\/a>, you can find their TrueSpeed CDN inside the control panel. Just by setting it up, your site will become global and load faster to people from around the world.<\/p>\n\n\n\n You can also get 3rd party CDN services. The most popular CDN\u2019s<\/a> are:<\/p>\n\n\n\n Modern websites are filled with CSS and JavaScript files that work together to keep web pages looking nice and working in users\u2019 favor. Line after line of code makes those files unnecessarily big, which can quickly slow down your site.<\/p>\n\n\n\n Web designers (the same people who are building the templates that you end up purchasing) like to keep their code neat. This means that they keep the code looking nice and easily understandable. However, having those white spaces, extra lines, and characters only increase the file weight, which can be easily reduced by minifying.<\/p>\n\n\n\n Here\u2019s an example of simple CSS code:<\/p>\n\n\n body {<\/p>\n\n\n\n padding:10px;<\/p>\n\n\n\n color:#f35123;<\/p>\n\n\n\n background:#f22f12;<\/p>\n\n\n\n }<\/p>\n\n<\/div>\n\n\n It can minified into this:<\/p>\n\n\n body{padding:10px;color:#f35123;background:#f22f12}<\/p>\n\n<\/div>\n\n\n While this simple difference won\u2019t make a significant impact on your site, imagine what happens when you have thousands and thousands of unnecessary white spaces and lines.<\/p>\n\n\n\n Fortunately, to minify your CSS and JavaScript files you do not have to go through the code and make the changes yourself. There are plugins that will do this automatically for you and ensure that everything works correctly:<\/p>\n\n\n By enabling browser caching, you allow the content to be stored in peoples\u2019 browsers. That means that if a visitor decides to come back to your site, they will not have to download all of the files from the server again as they already have them stored in their browser.<\/p>\n\n\n\n Browser caching can significantly improve the speed of your website for returning users.<\/p>\n\n\n\n To enable this on your site, all you need is a free WordPress plugin such as:<\/p>\n\n\n\n If you\u2019re using W3 Total Cache, for example, all you need to do is to install the plugin<\/a>:<\/p>\n\n\n <\/p>\n\n\n\n The plugin will automatically set up your caching settings and they will immediately start working in your favor. If you decide to go into more details, you can open the Performance tab that\u2019s now visible on the left-hand side of the WordPress menu where all of the plugin settings are visible. Here, you can change other options if necessary.<\/p>\n\n\n\n Your WordPress website can\u2019t work without a database. Everything that you do and have on the site is stored there. As you can imagine, themes and plugins don\u2019t always keep it clean, so even if you uninstall a specific plugin, it will leave some data in your database. Over time, the database will become cluttered and inefficient which will result in a slow website.<\/p>\n\n\n\n Although it is possible to clean up the database manually, that would mean that you have to understand how it works. And even if you do, chances are that you could still mess it up.<\/p>\n\n\n\n Luckily, there are free WordPress plugins available that will optimize and clean the database for you. However, before you do anything, make sure to create a full backup of your website<\/a> or have a way of undoing changes. Even though WP-Optimize<\/a> is a well-known and secure plugin, directly editing a database can sometimes go wrong. <\/p>\n\n\n\n So, in case something does go wrong, I suggest WP Reset<\/a>. This plugin will create a snapshot of your site and allow you to quickly roll back any changes done. So, in case something goes wrong, you can restore your database in a couple of minutes, as opposed to restoring a full backup that can take more time.<\/p>\n\n\n <\/p>\n\n\n\n Templates and themes are not only visual. To create them, web designers have to code in features, options, and insert images that will all combine into a single working theme.<\/p>\n\n\n\n As you can imagine, a template that loads five files and three images, for example, will load much faster than the one that comes packed with ten files and twenty images. The sheer number is not the only important factor, but how well everything is optimized comes into consideration as well.<\/p>\n\n\n\n Since there are so many WordPress themes and templates available, it is hard to determine the best ones. Here are some of the popular WordPress themes<\/a> that are designed to look good and load quickly:<\/p>\n\n\n\n Images can easily become one of the main speed issues of your site. Unoptimized images will remain unnecessarily large and hard to download. If you use too many of them, users will have a hard time loading the entire page of your website, and probably end up leaving before they see the content.<\/p>\n\n\n\n Luckily, it is not that hard to keep images optimized. It is important that you examine your theme\/template to learn what image sizes you need. You can then take care of the image before you upload it by resizing its size and changing its quality settings.<\/p>\n\n\n\n If you only need to optimize a couple of images, you can use a 3rd party service like TinyPNG<\/a>. This image optimization tool will let you upload your source images, and will then be automatically optimized. Just drag & drop the images, and let the Panda work its magic. You will then get to download the optimized versions of your images that you can safely put on your website.<\/p>\n\n\n\n If you already have an active website and don\u2019t have the time to optimize images one at a time, there\u2019s a freemium plugin that will solve all of your problems. ShortPixel Image Optimizer<\/a> will take care of all of your images that are available in your Media Library. It also works great with NextGEN, Foo Gallery, as well as other gallery and slider plugins.<\/p>\n\n\n\n The free version lets you handle up to a hundred images. Some of the features include:<\/p>\n\n\n\n All you have to do is to install the plugin and customize the settings to the way that you want. Choose the compression you need, set the size of the images, and hit the button when you\u2019re ready for the plugin to start the optimization process.<\/p>\n\n\n <\/p>\n\n\n\n Usually, when a user opens a website, the entire content that should be displayed starts loading automatically. So, even if a user only needs the above the fold content, they would still have everything available on that page loaded.<\/p>\n\n\n\n Instead, by lazy loading images and videos, you can have users only load content that\u2019s visible on the screen. Once the user starts scrolling, images and videos that move into the visible area of the screen will start loading. This way, the entire site will load faster and allow a better user experience.<\/p>\n\n\n\n How to enable lazy loading in WordPress:<\/p>\n\n\n <\/p>\n\n\n\n Hotlinking is an action that involves copying the source of an image from one website to use it on another. While the image will show without problems, it is actually not loading from your server. Instead, it uses all of the resources of the original site, and it\u2019s actually considered illegal.<\/p>\n\n\n\n By preventing hotlinking, you can stop other people from stealing your images. This way, you\u2019re saving resources on your own hosting service, which means that your site will be the only one using those resources, which results in a faster website for your visitors.<\/p>\n\n\n\n There are several ways to prevent hotlinking:<\/p>\n\n\n\n When you start a website, it makes sense to have all of your videos and large media files on your own server. However, what you may be missing is that storing and reproducing large files takes up server resources. When it comes to the speed of your site, it is much more convenient to offload videos and large media files on 3rd party services to save bandwidth.<\/p>\n\n\n\n A video loaded from YouTube will work just as well (if not better) than loaded from your server. And if you have higher traffic, this means the lesser impact on your bandwidth which results in a faster site.<\/p>\n\n\n\n When it comes to videos, you can host them on:<\/p>\n\n\n\n Each plugin enhances your website. However, each new feature also means new files that take up space and bandwidth. Also, not all plugins are coded the same, so chances are that you have a plugin that slows down your site by loading unnecessary elements that you may not even be aware of.<\/p>\n\n\n\n Before you start disabling all plugins, I suggest doing a speed test.<\/p>\n\n\n This plugin will run some tests on your website and show you a graph and details. What you\u2019re interested in here is the \u201cRuntime by Plugin\u201d tab that will draw a graph showing you all of your active plugins and their impact on the site.<\/p>\n\n\n\n Check for the largest \u201cpieces of cake\u201d on your graph which shows the plugins that are the slowest on your site. Note that this doesn\u2019t mean that you have to get rid of that specific plugin. <\/p>\n\n\n\n This test will allow you to analyze all of your add-ons, so that you can weigh the pros and cons and decide which slow plugins you can uninstall or find an alternative for.<\/p>\n\n\n <\/p>\n\n\n\n Having redirects improves user experience, and can even improve your SEO<\/a> if done correctly. Having active redirects will not have a negative impact on your site. However, with every redirect, your site gets a little bit slower. So, if you end up having too many redirects (creating a so-called redirect chain), milliseconds will add up, and your site will become slower.<\/p>\n\n\n\n One of the most popular tools for handling redirects is Screaming Frog<\/a>. You can also check out:<\/p>\n\n\n\n By installing the software or running an online scan (depending on the tool you chose), you will be able to scan your website. It will show you a detailed analysis of the website, and quickly show you redirected URLs. Since only knowing that a URL is redirected won\u2019t make much sense, you will love the feature that shows you the source of a redirect. This will help you to understand your website, and allow you to act on the redirects by removing the ones that are not necessary.<\/p>\n\n\n\n If you find a redirect chain that\u2019s slowing down your site, the solution is simple – instead of redirecting from link A to link B that goes to link C, you should just change the redirect to the last link in the chain.<\/p>\n\n\n\n For handling redirects in WordPress, you can use a free WP 301 Redirects<\/a> plugin that will help you manage all of your redirects.<\/p>\n\n\n\n Sometimes, you can do a lot by changing small things. If you write <\/a>a blog, you can achieve a faster site by controlling the content. When showing the latest articles from the blog, use excerpts instead of loading the entire article.<\/p>\n\n\n\n If you\u2019re using a classic editor, showing a custom excerpt is relatively easy:<\/p>\n\n\n![\"page](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/page-load-times-1024x581.jpg\")
<\/figure><\/div>\n\n\n14 steps to improve website speed<\/h2>\n\n\n
\n
Step 1: Run a speed test<\/h2>\n\n\n\n
Free tools<\/h3>\n\n\n\n
Google\u2019s PageSpeed Insights<\/h4>\n\n\n\n
\n
![\"pagespeed](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/pagespeed-insights-test-1024x505.jpg\")
<\/figure><\/div>\n\n\n\n
GTmetrix<\/h4>\n\n\n\n
\n
![\"gtmetrix](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/gtmetrix-test-1024x424.png\")
<\/figure><\/div>\n\n\nStep 2: Get fast and reliable web hosting<\/h2>\n\n\n\n
Step 3: Implement a Content Delivery Network (CDN) service<\/h2>\n\n\n\n
\n
Step 4: Minify CSS and JavaScript files<\/h2>\n\n\n\n
\n
Step 5: Enable browser caching<\/h2>\n\n\n\n
\n
\n
![\"w3](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/w3-total-cache-setup-1024x837.jpg\")
<\/figure><\/div>\n\n\nStep 6: Optimize and clean the WordPress database<\/h2>\n\n\n\n
\n
![\"wp](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/wp-optimize-setup-1024x691.png\")
<\/figure><\/div>\n\n\nStep 7: Use optimized\/premium and simple themes<\/h2>\n\n\n\n
\n
Step 8: Optimize all images on your website<\/h2>\n\n\n\n
\n
![\"shortpixel](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/shortpixel-setup-1024x467.png\"){kind=tracking}
<\/figure><\/div>\n\n\nStep 9: Lazy load images and videos<\/h2>\n\n\n\n
\n
![\"lazy](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/lazy-load-setup.jpg\")
<\/figure><\/div>\n\n\nStep 10: Prevent image hotlinking<\/h2>\n\n\n\n
\n
Step 11: Host videos on 3rd party services and offload large media<\/h2>\n\n\n\n
\n
Step 12: Keep plugins at a minimum\/find the plugins that are slowing you down<\/h2>\n\n\n\n
\n
![\"p3](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/p3-plugin-profiler-test.png\")
<\/figure><\/div>\n\n\nStep 13: Control redirects on your website<\/h2>\n\n\n\n
\n
Step 14: Optimize content (use excerpts, split long articles and comments, etc)<\/h2>\n\n\n\n
![\"custom](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/custom-excerpt-1024x442.png\")
<\/figure><\/div>\n\n\n![\"paginate](\"https:\/\/firstsiteguide.com\/wp-content\/uploads\/2018\/04\/paginate-comments-1024x301.png\")
<\/figure><\/div>\n\n\n