Why Is My Website Slow?
Have you ever experienced visiting a site and it seemed like it took forever, more like 20 second lol, to load. Some websites seem to be continuously loading even as your browsing the site. You may be faced with the dreaded spinning circle of death, or a lag in retrieving the content for the site.
We have all been through it once or twice, and sad to say it is quite annoying! I know I left a site many times if it seems as if the content is not loading right away or properly. It just ruins your browsing experience and is cumbersome to finding the things you were looking for.
I mean let’s face it, our attention span has been shortened since the invention of the internet, along with mobile devices, and we may forget what we were looking for just waiting for the content to load.
So what causes a lag in loading times? Well it can be many factors that play a significant role in this: from your images, to http request of your content, or how large your javascript file are. The number one thing I think that will help in your sites performance really boils down to one word—OPTIMIZATION.
No I don’t mean search engine optimization, although the performance of your site can help in page ranking. Optimization can come in the form of how your files are best structured for efficiency. The sizes of your images are usually the biggest contributor to your sites performance.
What I will break down are some of the reasons why your site could be running slow and some ways that you can improve to help create your site. This will improve your site to load much faster, therefore improving your skills as a developer producing better code for your next project.
What is Optimization and How Do You Do It?
Optimization can be defined as making the best or most effective of a resource. As mentioned earlier one of the first things I could suggest are looking at the size of your images you place on your site. However, before I even get into how optimizing works and some ways you can implement these practices; I think we should discuss how a website loads so you know what is happening in the background. For Front End Web Developers it is one of the foundations you should know. Therefore, when your structuring your site you are actually building with the intention of optimizing your site ahead of time.
So if you know how a site is developed, first the content is created in which is written in HTML, then the design of the overall site with CSS, and if you want to add any functionality to it you add some Javascript. So when the site is first accessed, it reads the HTML page, gathers the information, and reads the content then loads from the top of the document down.
There is a section in the HTML document referred to as the head, wrapped in <head> tags, where your links such as the CSS file and web fonts you might use, or information about the site for search engines to read/crawl.
Once the request is made the server will retrieve the data, read all this information, and then begin to render and load what it comes in contact first. That is why they say when you add script tags for your javascript file, it is best practice to place it towards the end before your closing body tags. The reason is because it allows all of the content to load first without having to stop to load any javascript. This can create a great delay as well.
Therefore the bigger the file the longer it may take to render, and as the server runs through the data of the HTML file, or CSS file, and encounters images that are of large scale than each and every individual image will dictate a reduction in page load time if not scaled properly.
Let’s not forget scaled images. If you add an image to your file but within the design you had it rendered from a larger image to a smaller dimension, than the server processes all that and takes more time to scale down to the specified dimension you desire.
Fortunately all this can be avoided in the development process. Now to move on to the good stuff, how to optimize your images.
How To Optimize Images.
What this simply means is reducing the image to a smaller file size, or even the right dimensions, when the server makes the request for the image. The way you can do this is simply scaling the image down for web use. If you have photoshop they have a great option available designed just for that called “save for the web”. What this does is reduce the file size to its smallest capacity, all while keeping the quality for its best use on the web.
Side note: jpeg images are actually smaller than png files so unless you have a transparent background try to save your files as a jpeg.
There are also a number of resources online if you do not have photoshop, one resource that you can use is Web Resizer, Tiny Png (for pngs), or Image Optimizer. If you do not like any of those, as I mentioned many times, and as a developer, this should be your first thought in trying to figure out any problem…Google it. Google should be your best friend because there is so much knowledge and resources online.
What Else Can I Do To Help My Sites Performance?
Another thing you can do for site performance that will help reduce file size is something called minification. Minification really comes into play for developers because let’s say you have over 1800 lines of code and you have done your best in creating functions in your JS files so you don’t end up repeating yourself (which is called the DRY method) and your css files is written to the best of your ability. There are sites that will take your code and simplify it into a smaller size reducing spaces and unnecessary fillers. It really takes a lot of the work out for you trying to do it yourself.
Here are some of the links to help in that process: CSS minifier, javascript mini
You can do this for your JS files and CSS files. The less requests the server has to make to getting the files for your website the better response time. This method of requests is actually called http request. So, if you ever seen this term before this is what it actually doing. So the fewer requests the faster the site.
Also another thing you can do to help your site is using something called a CDN, or a content delivery network. What this does is act as a database or a remote server and store your content so that it can take the load off your server from providing what your site needs. think of it as a cloud server. I believe the CDN will access the closest server to where a visitor is accessing your site which will provide your content much faster to them as opposed to getting all your content from one source.
This calls for more research on how CDN works and servers. Another blog post anyone?
Usually CDNs are great for storing images as your primary server. This will reduce the load time of the HTML and CSS, and then it will grab the rest of your content from the CDN.
Another way you can improve your site is creating static websites. Don’t sleep on the static sites. What a static site basically means is that each page of the website is built out individually with your HTML. In other words— faster load times. It also depends on the CSS and JS, because it is just accessing the HTML for each page. Usually static sites are made for simple sites: like a promotional, or landing page, or even a portfolio site that won’t require a lot of upkeep. However, do not limit yourself to what can be made with static sites. Your only limited by your mind.
When it comes to WordPress sites the same process can go when it comes to improving load speeds. As I said check your image sizes first. This is a huge factor for WordPress sites. I know if your not a WordPress developer it can be daunting to mess with the code because you might be afraid to break something, but if your developer don’t be scared. Jump right in and fix it if something does go wrong.
Fortunately, that is why backups and plugins were made. Most of the things that you need to do to improve your site has already been provided through a plugin. So look up plugins that will minify your CSS files and JS files and see how that alone can improve page speeds.
Some plugins I recently discovered for this is “Autoptimize” and “Swift Performance“. Check these out and look up some videos if your not sure how to use them and just see how your site can be a few seconds faster, which means a lot online.
Also another resource that is good for checking how your site is doing is Pingdom and Gtmetrix. This will grade, or rate, the overall performance of your site and suggest practical solutions to helping you enhance your visitors experience.
Knowing how to use these tools can also result in creating opportunities for you job wise. You can review a companies site and find where it lacks in performance and then offer your services as a solution to help improving their site in rankings and for their business.
Those are just a few ways that can help your site to move a little faster, and for some a great difference. Of course, there are many more but this alone will give you a head start in the game. If you wanna see how a site can load fast even with video on his site check out Scotttolinski.com. Every time I go to his site I am simply amazed. He also has tutorials on youtube called Level up tuts that can help in this area as well.