metatransmission
Junior Member
- Apr 13, 2019
- 109
- 28
I've heard a lot of people asking about this so I thought I'd do a write-up and share some of what what works for me with some of you at the novice end of web design:
Let my mistakes be your salvation : )
Page load speed or your website's overall speed is a very important metric. I am sure you've heard about improving SEO by increasing your page load speed. Just like how Google's algorithm rewards a secure site, it also rewards a faster site over one that's slow to load. I've struggled with slow websites in the past and searched all over the internet for ways to make my site load even faster and here I'm going to outline all the important things.
The problem:
You've built your site, tried every trick you know, and your pages still load slowly. It's a very commonplace problem, honestly. Sometimes, it's bad hosting while for others, it's the assets (like images or front-loading javascript code) that slow the site down. There's a term called the first contentful paint. You want it to be as low as possible. It's a term for when the first content is "painted" for the user agent (the end-user's browser in this case).
How do you know whether your website is okay, fast, or slow?
Google's PageSpeed Insights can help you get a good idea about your speeds and how to improve them.
Page Speed Test from SmallSEOTools is also a handy tool and can give some insights that you won't find in Google's PageSpeed.
In your browser (make sure it's the latest Chrome or Firefox), open a new tab and press F12. You'll find a "Network" tab in the console that appears. Once it's ready, enter your website's or page's URL and go. It will load your website just as it's supposed to be but now in the "Network" tab of the console, you'll be able to see the amount of time that it's taking to load individual elements. Some assets might be buggy and take a very long time (>5 seconds) to load, which is bad. This is the perfect place to start finding your culprits. There are a lot of third party technical solutions that can improve your page load speed, for general purposes it's recommended to test your main pages in these platforms so that you know what's wrong with your site specifically.
So, my site crawls. How can I improve it's load speed?
Aside from checking with the above links, there are a few easy tricks that will give your page/site a boost at no cost and with very little work. Bookmark this post or save it to keep it handy.
#1: Your images
All your images need to be properly optimized. This means you have to make sure they're JPG and not PNG. SVG is even better. If you're making your own images and graphics, make sure they're 72 DPI and have reasonable dimensions. Put simply, 5000x5000 pixels images are no good. Keep the maximum width or height at 1920 if necessary and if you can, make them even smaller. I usually don't even go that big unless optimizing for retina displays. Most good cms themes will give you an option to upload different images for screens with a higher resolution.
It's also a good practice if you only use images in sizes that they'll be displayed at, not bigger. For example, a portfolio website might be a good use case for having big images as you want maximum clarity, but if your website is showing images at 800x800 pixels, there's no point in uploading a 1200x1200 image and then getting it auto-downsized by the browser via CSS or your theme. Just upload an 800x800 image in the first place.
#2: Leverage CDN
CDNs are your friend. Not all websites use them, particuarly if you're coding by hand and are a novice designer.
Go to a service like Cloudflare (it has a free plan) and verify your website's ownership. These platforms have detailed how-to guides so you won't face any problems.
Once verified, it will take some time for CDN services to cache your entire website. After that, the user will opens your website and be served cached content from Cloudflare mainly, which is lightning fast.
In addition this'll stop most DDOS attempts.
#3: Browser caching
Caching is a good practice and even more so with websites that don't change their code, script, images a lot. Adding new stuff is not a problem, but if you change your website's CSS or existing images a lot, then caching might not be for you. You can achieve this manually, with wordpress plugins, or using something on the backend like varnish (the best option in my opinion if you know your way around a command line.)
What caching does is make the browser download certain assets like images and stylesheets so that when it's opened again, no new request is made by the browser for those assets, as long the user is still in the same session. The browser accesses the downloaded files and opens the site locally, removing the need to download the files every time from the server, and making the entire process faster.
To do this, you'll need to access and edit your website's .htaccess file. If you're on a CMS like WordPress, search where the file is, like so: "WordPress where is my .htaccess file".
You'll need FTP access. For editing, you don't need anything more than a text editor like Notepad. Though I prefer an editor designed for coding such as Atom.
Access this file and add the following lines to it anywhere (just not in the middle of what's already written in this file):
This specifies how long an asset should be kept cached (for example, text/html is your website's static HTML pages and the browser will keep them for 1 month. Within 1 month, whenever the browser opens this site, it won't download the HTML files from the server, but access them locally. A different expiration date for different assets is very important. It also depends on how frequently you make changes to these assets. For example, if you never change your images on the site, it's safe to set their expiration as 1 year. If you edit the site's colors, fonts, etc. through CSS frequently, set the expiration for CSS at 1 week. And so on.
#4: Minify
Your JavaScript and CSS code can be "minified", especially if you have a hand-coded site. You should take your .js and .css files to a minification website (there are loads of free ones) and upload them. The resulting download will have "crunched" the code so that it although becomes unreadable for any human (as all indentation, spaces, lines are removed) the file will still be rendered properly by the browser and it's size will be much smaller.
#5: CMS-specific hacks
There are many plugins on CMS portals like WordPress that help you load your pages faster. Image compression (like Smush.it), code minification, CDN (like Jetpack), etc. -- you have plugins for every way of speeding up your site. WP Rocket works well and has a free option (or did when I last checked)
#6: If none of this works, your host probably sucks.
These are all practical ways of improving your page load speed. However, for my latest project, I faced a problem I never did before: my website was extremely slow even after I compressed images, minified code, did browser caching, and set up Cloudflare. The site was still crawling.
So, if you find yourself in that boat, let me tell you the single biggest uncontrollable factor that slows your website down: your hosting provider.
Some providers or packages are just bad. I've created countless websites in the past, both hard-coded and CMS-based. Recently, I was working with a site coded by hand on a clients host and I just could mot get speeds to improve, so I got in touch with the hosting support. And guess what they said. "You're on a shared hosting plan, buy a higher one." Ask folks on Stack Exchange or Reddit (in the relevant subforum, of course) why your website is slow. Some developer with a fast connection will surely attempt to open your website and measure what's making it take so long to load fully.
You might get some tips not listed here as far as what to improve, but if none of them work, and you've already done all you can on your end, you need a new hosting provider.
Look away from shared hosting and consider renting a VPS or even dedicated server depending on your needs.
I made this writeup for the noobs out there, so if there's nothing here you didn't already know, try and keep the flames to a minimum.
Good luck and hit me up in the comments if you have any questions.
-M
Let my mistakes be your salvation : )
Page load speed or your website's overall speed is a very important metric. I am sure you've heard about improving SEO by increasing your page load speed. Just like how Google's algorithm rewards a secure site, it also rewards a faster site over one that's slow to load. I've struggled with slow websites in the past and searched all over the internet for ways to make my site load even faster and here I'm going to outline all the important things.
The problem:
You've built your site, tried every trick you know, and your pages still load slowly. It's a very commonplace problem, honestly. Sometimes, it's bad hosting while for others, it's the assets (like images or front-loading javascript code) that slow the site down. There's a term called the first contentful paint. You want it to be as low as possible. It's a term for when the first content is "painted" for the user agent (the end-user's browser in this case).
How do you know whether your website is okay, fast, or slow?
Google's PageSpeed Insights can help you get a good idea about your speeds and how to improve them.
Page Speed Test from SmallSEOTools is also a handy tool and can give some insights that you won't find in Google's PageSpeed.
In your browser (make sure it's the latest Chrome or Firefox), open a new tab and press F12. You'll find a "Network" tab in the console that appears. Once it's ready, enter your website's or page's URL and go. It will load your website just as it's supposed to be but now in the "Network" tab of the console, you'll be able to see the amount of time that it's taking to load individual elements. Some assets might be buggy and take a very long time (>5 seconds) to load, which is bad. This is the perfect place to start finding your culprits. There are a lot of third party technical solutions that can improve your page load speed, for general purposes it's recommended to test your main pages in these platforms so that you know what's wrong with your site specifically.
So, my site crawls. How can I improve it's load speed?
Aside from checking with the above links, there are a few easy tricks that will give your page/site a boost at no cost and with very little work. Bookmark this post or save it to keep it handy.
#1: Your images
All your images need to be properly optimized. This means you have to make sure they're JPG and not PNG. SVG is even better. If you're making your own images and graphics, make sure they're 72 DPI and have reasonable dimensions. Put simply, 5000x5000 pixels images are no good. Keep the maximum width or height at 1920 if necessary and if you can, make them even smaller. I usually don't even go that big unless optimizing for retina displays. Most good cms themes will give you an option to upload different images for screens with a higher resolution.
It's also a good practice if you only use images in sizes that they'll be displayed at, not bigger. For example, a portfolio website might be a good use case for having big images as you want maximum clarity, but if your website is showing images at 800x800 pixels, there's no point in uploading a 1200x1200 image and then getting it auto-downsized by the browser via CSS or your theme. Just upload an 800x800 image in the first place.
#2: Leverage CDN
CDNs are your friend. Not all websites use them, particuarly if you're coding by hand and are a novice designer.
Go to a service like Cloudflare (it has a free plan) and verify your website's ownership. These platforms have detailed how-to guides so you won't face any problems.
Once verified, it will take some time for CDN services to cache your entire website. After that, the user will opens your website and be served cached content from Cloudflare mainly, which is lightning fast.
In addition this'll stop most DDOS attempts.
#3: Browser caching
Caching is a good practice and even more so with websites that don't change their code, script, images a lot. Adding new stuff is not a problem, but if you change your website's CSS or existing images a lot, then caching might not be for you. You can achieve this manually, with wordpress plugins, or using something on the backend like varnish (the best option in my opinion if you know your way around a command line.)
What caching does is make the browser download certain assets like images and stylesheets so that when it's opened again, no new request is made by the browser for those assets, as long the user is still in the same session. The browser accesses the downloaded files and opens the site locally, removing the need to download the files every time from the server, and making the entire process faster.
To do this, you'll need to access and edit your website's .htaccess file. If you're on a CMS like WordPress, search where the file is, like so: "WordPress where is my .htaccess file".
You'll need FTP access. For editing, you don't need anything more than a text editor like Notepad. Though I prefer an editor designed for coding such as Atom.
Access this file and add the following lines to it anywhere (just not in the middle of what's already written in this file):
Code:
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 month"
</IfModule>This specifies how long an asset should be kept cached (for example, text/html is your website's static HTML pages and the browser will keep them for 1 month. Within 1 month, whenever the browser opens this site, it won't download the HTML files from the server, but access them locally. A different expiration date for different assets is very important. It also depends on how frequently you make changes to these assets. For example, if you never change your images on the site, it's safe to set their expiration as 1 year. If you edit the site's colors, fonts, etc. through CSS frequently, set the expiration for CSS at 1 week. And so on.
#4: Minify
Your JavaScript and CSS code can be "minified", especially if you have a hand-coded site. You should take your .js and .css files to a minification website (there are loads of free ones) and upload them. The resulting download will have "crunched" the code so that it although becomes unreadable for any human (as all indentation, spaces, lines are removed) the file will still be rendered properly by the browser and it's size will be much smaller.
#5: CMS-specific hacks
There are many plugins on CMS portals like WordPress that help you load your pages faster. Image compression (like Smush.it), code minification, CDN (like Jetpack), etc. -- you have plugins for every way of speeding up your site. WP Rocket works well and has a free option (or did when I last checked)
#6: If none of this works, your host probably sucks.
These are all practical ways of improving your page load speed. However, for my latest project, I faced a problem I never did before: my website was extremely slow even after I compressed images, minified code, did browser caching, and set up Cloudflare. The site was still crawling.
So, if you find yourself in that boat, let me tell you the single biggest uncontrollable factor that slows your website down: your hosting provider.
Some providers or packages are just bad. I've created countless websites in the past, both hard-coded and CMS-based. Recently, I was working with a site coded by hand on a clients host and I just could mot get speeds to improve, so I got in touch with the hosting support. And guess what they said. "You're on a shared hosting plan, buy a higher one." Ask folks on Stack Exchange or Reddit (in the relevant subforum, of course) why your website is slow. Some developer with a fast connection will surely attempt to open your website and measure what's making it take so long to load fully.
You might get some tips not listed here as far as what to improve, but if none of them work, and you've already done all you can on your end, you need a new hosting provider.
Look away from shared hosting and consider renting a VPS or even dedicated server depending on your needs.
I made this writeup for the noobs out there, so if there's nothing here you didn't already know, try and keep the flames to a minimum.
Good luck and hit me up in the comments if you have any questions.
-M
Last edited:
