A lot of companies know how to build gorgeous websites, but very few know how to optimize them to decrease page load times. In an attempt to create a “modern” site with all the bells and whistles, they load the site with CSS and Javascript files and loads of images, resulting in a slow website. Not your website you say. Go to Pingdom right now and measure your website speed. I dare you. A study published by Akamai and Gomez found that nearly half of web users expect a site to load in 2 seconds or less. If it takes more than 3 seconds, they abandon it and go elsewhere. Now how long did it take your site to load? Read on to learn how to be a Digital Ninja and decrease your page load times.
5 Ways To Decrease Page Load Times and Speed Up Your Website
Now you are ready to optimize your site, the first step is simple.
1. Limit the number of files that are necessary to display your website.
Building a site with all the bells and whistles is great, but a lot of the time you end up with unnecessary files. When a customer is visiting you for the first time, all those files that create all those extra effects, etc need to be sent to the person’s browser before they see your beautiful creation. Think all the CSS files, Javascript library references, images. All those need to be sent to the persons browser before the site can load. Eliminating unnecessary files will help to decrease page load times by minimizing the number of HTTP requests.
2. An easy one but one people forget. Optimize and correctly display your images
We are all guilty of this. Either from lack of knowledge of how to save images or because we don’t want to lose image quality but it can decrease the page load time of your site significantly. Make sure that your images are as small as possible but still of the quality you would like. When saving your images in Photoshop, just use the “Save for web” option. Only use png’s if you absolutely have to (transparent backgrounds) otherwise try and keep all images as pngs. YOUR IMAGE SHOULD NEVER BE LARGER THAN 1MB. You can use a tool like Image Optimizer to reduce image sizes. If you are developing on WordPress you can use EWWW Image Optimizer or Wp Smush It as well to keep your images a respectable size.
3. Minify your HTML, CSS and Javascript
When you are coding your site, best practice requires you have good structure, comment your code, and follow best practices. This is all well and good in the development stage, but once you are done with coding and uploading your files to your server, you should remove all the white space from your code before serving it to visitors. Crawlers and bots don’t need white space to be able to read your code. The logic behind this is that the smaller the KB size of your webpage and its scripts, the faster your page will load. This will also put less demand on your web server(s). You can use tools like WP-Minify orW3 Total Cache to achieve this.
4. GZip and compress components
Basically GZip makes your sever compress all your files before it sends them to the users browser making the transmitted data smaller and thus speeding up delivery and decreasing page load times. It can compress your file sizes by up to 90%. To test to see if your server is already compressing your files go to HTTP COMPRESSION TEST and type in your URL. It will tell you whether your browser is requesting compressed content and if your site is compressed. If it is not, you can easily turn it on by dropping a few lines of code in your .htaccess file.
Enable Gzip on Apache server with mod_deflate:
#Begin gzip and deflate
<IfModulemod_deflate.c>
AddOutputFilterByType DEFLATE text/html text/css application/x-javascript text/plain text/xml image/x-icon
</IfModule>Enable Gzip on an NGINX server
server {
gzip on;
gzip_typestext/html text/cssapplication/x-javascripttext/plaintext/xmlimage/x-icon;
}5. Add expires headings
Utilizing browser caching is another good way of decreasing your page load time. This means we don’t ask the browser to pull copies of static files every time we load the page. We can do this using the “ExpiresByType” directive to tell the browsers which files to cache and how long to cache them for. Again the code should for into your .htaccess file on an Apache server.
##EXPIRES CACHING##
<ifmodule mod_expires.c="">
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# My favicon
ExpiresByType image/x-icon "access plus 1 year"
# Images
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
# CSS
ExpiresByType text/css "access 1 month"
# Javascript
ExpiresByType application/javascript "access 1 month"
</ifmodule>This will cache your Javascript files, images, css and favicon.
After implementing these 5 tips, your site load speed should improve considerably. Try it out and let us know how it worked out for you.
No Medium Spared 