The loading time of a website is one of the most important aspects in web development that often gets overlooked. Websites are getting more and more complicated and although broadband speeds may be skyrocketing as websites become more complex the need to optimise these websites grows.
It ensures that a visitor’s limited attention span and time are spent on actual content and not wasted waiting for images and scripts to load. A lot of studies are telling us that users will wait maximum 4 second for a website load. If your website does not offer a fast loading time, the user will get bored and leave. Online audience has a lot of options when it comes to consuming content on the internet, and a slow performing website will angry your users, and send them to other websites. But a faster and more responsive website will keep them engaged and focused on your content, rather than waiting for scripts and images to load. Just now Google announced that they are using web pages speed in their ranking algorithm so this means that faster performing sites may rank higher in search engine results.
The speed of a page is made up of both Front-end and Server-side components; this means that when a request for your web page is made, the Front-end and Server-side components both take a certain amount of time to complete their operations. Since their operations are essentially sequential, their cumulative time can be considered the total page load time.
Your front-end structure needs to be speedy, and the generation of your page (the server-side) has also an important role in your websites loading time too.
Now knowing that the speed of our webpages are important for both user experience and ranking, I came across this very helpful tool, so helpful infact I just had to make a post dedicated to it.
GtMetrix is a powerful analytics tool that will grade your site on different aspects of site speed and give you pointers as to how to improve it. GTmetrix assesses the front-end structure of your web page to ensure that it is delivered as optimally as possible to your online visitors, but an optimized server-side is also an important part of the equation in offering a fast and seamless site experience. GTmetrix offers a full guide on how you can optimize your Front-end and Server-side components.
There are two major speed analysis tools that most people:
Page Speed, created by Google and YSlow, by Yahoo. In order for these tools to function they require Firefox and the Firebug add-on.
Google’s Page Speed analysis tool helps you evaluate the web page’s conformance to a number of distinctive rules. These rules are general front-end best practices which you can apply in any stage of your web development.
Yahoo’s YSlow tool helps users to find out ways to make their web pages load faster by grading web page based on one of three predefined or user-defined set of rules. YSlow also offers suggestions on how to improve you web page performance, displays statistics and summarizes your page components.
With the help of GTmetrix you will be able to analyze your website pages using both services, giving you different perspectives on how to optimize your code and reduce your websites loading time.
GtMetrix also gives you a lot of advice regarding good search engine optimization for your website. Below you can find just a few best practices that can help you optimize your websites loading time.
- Minify JavaScript, CSS and HTML code. This process will remove unnecessary characters from the files to reduce its size, thereby improving its loading time. When a file is minified, comments and unneeded white space characters (space, newline, and tab) are removed. By completing this process you will reduce network latency, enhance compression, and faster browser loading and execution. Also it will improve the response time of your website because of the reduction of the downloaded files size.
- Minimizing the request size. Ideally, an HTTP request shouldn’t exceed more than one packet. The most widely used networks limit packets to approximately 1500 bytes, so if you can constrain each request to fewer than 1500 bytes, you can reduce the overhead of the request stream. HTTP request headers include: Cookies, Browser-set fields, and GET/Host fields.
- Create CSS Image Sprites. An image sprite is not more than a collection of images which are inserted into a single image. A web page that has many images can generate multiple server requests and in conclusion it can have a long loading time. By making and using image sprites you will reduce the number of requests to the server and finally you will also save bandwidth. As an example you can combine images that are loaded on the same page and that are always loaded together. For instance, a set of icons that are loaded on every page should be sprited. Dynamic images that change with each page view, such as profile pictures or other images that change more often may not be good candidates for spriting. You can learn how to make image sprites by accessing this link or if you want you can use a spriting services such as SpriteMe that can make it easier to build CSS sprites.
- Avoid bad requests. Sometimes you’re HTML / CSS will request a resource like an image or an html file that does not exist. When this is happening, the browser and server make more round trips that serve no purpose and this is because the image or file that is being requested is not there. These requests really slow down your web pages. Not only does it cause more pointless round trips, it may also be causing more DNS look ups which could even further slow down your page. This can happen more often than you realize. For example, if you make a website from a template, and you change some things then you discover later that the CSS file is calling for something that you are not using at all (maybe a background image).
- Enable gzip compression. Gzip (the G stands for GNU) is a software application used for file compression and decompression. If you compress your HTML and CSS files with gzip in most of the time you save up to 70 percent of the file size. In conclusion it will take lesser time to load your web pages, and it also save a lot of bandwidth that it is used. You should really use this tool because if you are not using it for some reason, your web pages are for sure slower than your competitors. To enable the compression you have to add a small portion of code to the file called .htaccess on your web host or server. This means going to the file manager (or wherever you go to add or upload files) on your webhost. You can find out more guidance regarding howyou can succeed with this step by visiting this page.
By accessing GTmetrix website you will be able to find a lot of information and SEO tools in order for you to optimize and create a successful website with not more than 4 seconds loading time.
GTmetrix tips
- A LOT of website owners ignore site speed, or they pay attention to it but don’t use a tool like GTmetrix which is by far one of the best if not the best analytics tool of this type. Why not see how your competitors fare? I personally spent little over an hour going through some of the recommendations and improved the score of one of my websites from C to A for site speed and C to B for Yslow.
- You don’t have to be perfect, so long as you consider and implement a good number of their suggestions you’ll be doing your website a huge favour.
- YSlow has it’s own separate recommendations in the GTmetrix performance report “breakdown”
Understand the recommendations
They are meant to be generic, best practices; not everything will apply to your site.
Rules are sorted in order of impact upon score
Optimizing rules at the top of the list can greatly improve your overall score.
The post How to speed up your website with GtMetrix appeared first on Youngwebbuilder.
