My Gotein Case Study

Results

Eliminate render-blocking CSS and JavaScript

Render-blocking CSS and JavaScript is when CSS and JavaScript files are delaying a website from being able to apply their styles and functionality to the content in an instant. The more CSS and JavaScript files a website has, the longer it will take to apply the styles and functionality, especially if the CSS and JavaScript files are big in file size. Because of render-blocking CSS and JavaScript, the website was not even able to show its content until all of the CSS and JavaScript files have been downloaded and applied. Render-blocking CSS and JavaScript was occurring in the above-the-fold-content, which is when the CSS and JavaScript files are being loaded for content that is visible on the user’s screen. Render-blocking CSS can be eliminated by splitting the CSS styling into two files. The first CSS file would contain styling for users to be able to see the website’s header and footer. This indicates to users that the website is running, but is still loading additional resources such as images. The first CSS file would also contain a loading icon/screen to visually show users that additional resources are still being loaded. The other CSS file would contain styling for users to be able to see the website’s main content after the additional resources have been loaded. Splitting the CSS styling into two files allows the main content to be shown to the users once the website has finished loading. Then any JavaScript files can be executed after that by placing them at the bottom of the HTML documents to eliminate render-blocking JavaScript. Prioritising what content should be visible first (website’s header, footer and loading screen) will eliminate render-blocking in the above-the-fold content by the time the additional resources have been downloaded for the main content.

Optimise images

Images on the web should be small in file size. The smaller the file size, the faster they load, allowing a website to load quicker overall. This is particularly useful if users are accessing the website on a mobile device who might be using a cellular network or have restricted data plans. Images can be optimised by reducing the file sizes of them in an image editor or the PageSpeed Insights tool by Google, which can automatically compress a website’s images when supplying the tool with the website’s URL that does not have optimised images. Another way to optimise or even reduce the number of images is that any which contain approximately the same width and height dimensions as each other should just be one image instead of say nine images for example. This is called CSS image sprites, which reduces those nine resources to just one, allowing other resources to load quicker. The required CSS code can then be implemented that sets the width and height of how big the sprite is and the location of what sprite to show. CSS image sprites should only be used if there is text that relate to them and can be read out loud by assistive technologies. If there is no relating text, then CSS image sprites would have to be individual image files, where the HTML alt attribute can be used in the img element.

Enable leverage browser caching

Browser caching is when a website’s resources are locally stored on a desktop or mobile device. Browser caching should be enabled to prevent users from having to download the website’s resources for every page that they visit. This can save many kilobytes of data and results in a faster loading time due to the website’s resources already stored on the user’s device. While browser caching allows the website’s resources to be locally stored, this can become a problem if a web developer wants to make changes to resources such as images and CSS files. The local devices will still load the resources from the cache rather than download them from the website. To prevent this from happening, create an .htaccess file and inside of that, add the file types and their time periods as to when the resources stored locally should expire using ExpiresByType. What this does is, once the time period has passed for say JPEG images for example, the local devices will ignore its cache of those files, resulting in any JPEG images that were previously cached to be downloaded from the website again. Setting time periods of when resources expire will ensure that users will not access and interact with content that will not download the latest resources for an infinite time period.

Enable keep alive

Keep alive is a method for allowing requested resources to be downloaded in the same TCP connection rather than open new TCP connections per requested resource, including resources from third party websites. Having additional TCP connections can take longer for the website to download the requested resources due to the server having to open new TCP connections for each resource that is requested to be downloaded. To download the requested resources using only one TCP connection, create an .htaccess file and inside of that, set the header connection to keep alive. What this does is it tells the server to add keep alive headers to the requested resources, resulting in one TCP connection that contains all of the requested resources and ready for download at the same instance.

Enable compression

Compression allows files to be reduced in file size, resulting in the website loading faster. Depending on the configuration the server has, file compression can be set by creating an .htaccess file and inside of that, add the file types using AddOutputFilterByType for each file type. What this does is it tells the server to compress the following file types identified in the .htaccess file, which then returns the resources at a reduced file size. Using the server’s file compression does not include minification of CSS and JavaScript code, which in this case additional tools would have to be used alongside the server’s file compression.

Reduce server response time

Server response time is how long a server takes to acknowledge that a browser is requesting resources from it. If a server’s response time is slow, then it could be down to either the website being on a hosting plan that involves sharing the server with other websites or the recommendations identified in the case study have not been considered and/or implemented into the server’s configuration and website’s files. The more traffic a website receives, the slower the server is in downloading the requested resources and if that is the case, then it becomes the question of how much money is invested into paying for a dedicated server. The alternative to that would be to review the other identified recommendations to try and use them with a shared hosting plan more efficiently.

Minify CSS and JavaScript

Minification is where CSS and JavaScript code is reduced to provide a website with faster loading times. Minification checks the current formats for each of the CSS and JavaScript and removes any white spacing and comments from the code, which then reduces the lines of code for each CSS and JavaScript file from multiple lines to just one. Minifying CSS and JavaScript code allows other resources to load quicker due to the code only containing one line of code. There are many minification tools out there that can minify CSS and JavaScript code either using online tools or offline watchers. The YUI Compressor is excellent for minification, as it can minify both CSS and JavaScript code. The YUI Compressor can also be added into integrated development environment programs, such as PhpStorm, which creates and updates the minified versions of the website’s CSS and JavaScript files used in development.