Grab a coffee and read our purpleblog

Tea works too. Or hot choco­late. Or even some­thing stronger! Our arti­cles are based on the most com­mon ques­tions we get from our clients, that’s why they are so inter­est­ing to read, and actu­al­ly utilise. You won’t notice how time flies!

6 min read Website speed and performance optimisation

How to optimise website’s speed and performance

Key Takeaways

  • The quality of a website’s hosting provider can have a big effect on its performance, as can the quality of the frameworks and themes chosen when it was built.
  • You could make use of lazy loading and fix broken links across your site.
  • Reducing the sizes of your images and the number of HTTP requests will have a positive effect on your site’s loading speed and performance.

Opti­mize a web­site’s speed and per­for­mance to enhance the user expe­ri­ence, ampli­fy cus­tomer’s reten­tion and increase ROI! In this arti­cle, you will find 20 valu­able tips on how to opti­mize your web­site to load faster and improve your business.

Free website speed test tools

The first step in web­site speed and per­for­mance opti­miza­tion is test­ing, detect­ing and ana­lyz­ing over­all speed issues. To do that suc­cess­ful­ly, we sug­gest using some or all of the rec­om­mend­ed speed test tools:

  • GTmetrix – Grades your page’s speed per­for­mance and gives you rec­om­men­da­tions with detailed expla­na­tions on how to improve your Page­Speed and YSlow scores.
  • Ping­dom Web­site Speed Test – Besides giv­ing you per­for­mance grade and esti­mat­ed page load time, this tool can sort out files for all HTTP requests based on their size, and quick­ly detect bottlenecks.
  • Web­PageTest – This tool allows you to test your web­site’s per­for­mance from more than 20 loca­tions in Chrome, Fire­fox and Inter­net Explor­er. It gives you an esti­mat­ed load speed, the TTFB (Time to First Byte) and lots of oth­er use­ful information.
  • Google’s Page­Speed Insights – This tool does­n’t give you a load time esti­mate but gen­er­ates sug­ges­tions based on a web page analy­sis, to make that page faster.

20 tips on how to optimize website speed and performance

1. Choose quality hosting

The pre­con­di­tion of hav­ing a fast web­site is a qual­i­ty web host and reli­able DNS provider. Choose a host­ing com­pa­ny that has servers geo­graph­i­cal­ly locat­ed, where your tar­get audi­ence is. Avoid cheap host­ing solu­tions, and if your bud­get allows, choose a man­aged or ded­i­cat­ed serv­er, over shared hosting.

2. Use quality frameworks or lightweight themes

Opti­mized web­site speed and per­for­mance should be the most impor­tant point in mod­ern web­site design. Unfor­tu­nate­ly, most web­site own­ers do not real­ize that every extra load­ing sec­ond neg­a­tive­ly impacts their busi­ness. Ver­sa­tile, fea­ture-rich themes gen­er­ate more sales, and for this rea­son, many Word­Press devel­op­ers are inclined to put per­for­mance as a low­er priority.

If you’ve built your web­site using the wrong frame­work or theme, it would be very hard to opti­mize it, once your site is up and run­ning. If you want to have a fast web­site, make sure to choose a qual­i­ty, lean framework/theme, or you might regret it later.

3. Reduce the file size of your images

Unop­ti­mized image files are the num­ber one fac­tor that slows down a web­site. If you have to choose to change only one thing to improve your web­site’s speed, you should go with image optimization!

Images bear 64% of an aver­age web­site’s page weight ~ HTTP ArchiveCLICK TO TWEETThe best image opti­miza­tion tac­tic is to reduce the file size before upload­ing by fol­low­ing these rules:

  • choose the prop­er for­mat – use JPGs for pho­tos, PNGs for logos, illus­tra­tions and when you need trans­paren­cy, use GIFs only for animations
  • scale down the image to exact dimensions
  • com­press the image

You can com­press images loss­less with online tools like Tinyjpg or Compressor.io.

Loss­less com­pres­sion reduces the file size by remov­ing unnec­es­sary image meta­da­ta. With the loss­less com­pres­sion method, there is no qual­i­ty loss.

If you have hun­dreds of images already uploaded on your web­site and don’t have time to reduce file sizes man­u­al­ly, you can use bulk opti­miza­tion plu­g­ins such as EWWW Image Opti­miz­er or Opti­mus – Word­Press Image Opti­miz­er.

4. Reduce the number of HTTP requests

Every addi­tion­al HTTP request slows down your web­site. To reduce the num­ber of HTTP requests you can do one or more of the following:

  • com­bine your CSS and JSS files into as few as possible
  • reduce the num­ber of plu­g­ins and widgets
  • opti­mize plu­g­in usage – replace plu­g­ins which add many HTTP requests
  • reduce the num­ber of tags in your code – use Google Tag Man­ag­er to add track­ing, ana­lyt­ics and remar­ket­ing tags to your website
  • avoid using 3rd par­ty frameworks
  • host fonts locally
  • use CSS sprites

5. Enable Gzip compression

Gzip is a form of com­pres­sion at serv­er lev­el, which can save you a lot of band­width. You can enable Gzip com­pres­sion with a plu­g­in or man­u­al­ly in your .htac­cess file.

6. Minify CSS, HTML and JavaScript files

Reduce all unnec­es­sary char­ac­ters from your CSS, HTML and JavaScript files. Google sug­gests the UglifyJS2 tool for mini­fi­ca­tion of JavaScript files, and css­nano tool for mini­fi­ca­tion of CSS files.

7. Optimize CSS

CSS opti­miza­tion is more than mini­fy­ing CSS files. Here are some good prac­tices on how to opti­mize CSS code:

  • use few­er dec­la­ra­tions and operators
  • load CSS code inside the <head> tag
  • use exter­nal CSS files
  • avoid @import
  • avoid inline CSS, use inline small CSS
  • use as few CSS files as possible

1 in every 4 vis­i­tors aban­dons the web­site if the load speed takes more than 4 sec­onds!CLICK TO TWEET

8. Optimize the DOM’s critical rendering path

Pre­vent CSS and Javascript code from block­ing the DOM with these practices:

  • use as lit­tle code as pos­si­ble; com­press, mini­fy and con­cate­nate files into few­er files, prefer­ably only into one file
  • put the CSS ref­er­ences in the head tag and move the scripts before clos­ing the </body> tag
  • avoid ren­der block­ing of JavaScript by using the async or defer directive

9. Use a Content Delivery Network

Use a CDN such as Max­CDN or Key­CDN to dis­trib­ute your con­tent glob­al­ly, and deliv­er cached sta­t­ic con­tent to geo­graph­ic loca­tions near your users. With CDN, your web­site will be faster and user expe­ri­ence improved.

10. Avoid 301 redirects

Redi­rects dou­ble the required time for the ini­tial HTML doc­u­ment load­ing and for this rea­son you should avoid them when­ev­er possible.

11. Leverage browser caching

You can lever­age brows­er caching with a caching plu­g­in or spec­i­fy caching para­me­ters for dif­fer­ent files in your .htac­cess file. Google rec­om­mends to set expires head­ers with a min­i­mum max-age of 7 days.

12. Utilize server-side caching

If your web­site is high in traf­fic, con­sid­er uti­liz­ing serv­er caching. You can cache com­mon­ly used data from the database

13. Enable HTTP/2

HTTP/2 does not change the HTTP fun­da­men­tals; there are still requests and respons­es, but the usage of net­work resources is more effi­cient. To enable HTTP/2, you need to migrate from HTTP to HTTPS and have a serv­er that sup­ports HTTP/2.

14. Host fonts locally

In the last few years, web fonts have become increas­ing­ly pop­u­lar. The major­i­ty of web­sites are using cus­tom fonts, which are great from a design point of view. Unfor­tu­nate­ly, web fonts are ren­der block­ing and add extra HTTP requests to exter­nal resources.

In 2016, more than 63% of all web­sites are using cus­tom web fonts ~ HTTP ArchiveCLICK TO TWEETIf you are a fan of cus­tom fonts, the rec­om­men­da­tion is to host the fonts local­ly and, if you are using a CDN, move them to your CDN.

15. Use lazy loading

With lazy load­ing, con­tent loads only when it becomes vis­i­ble on the user’s screen. For exam­ple, if the user scrolls only through the first half of your web page, the sec­ond half will not load and will save a part of serv­er mem­o­ry and bandwidth.

16. Fix 404 Errors

Reg­u­lar­ly check for bro­ken links in your Google Search Con­sole account or from time to time run a quick scan with the Online Bro­ken Link Check­er. Fix all 404 errors to save serv­er memory.

17. Optimize your database

Your data­base can accu­mu­late a lot of unnec­es­sary infor­ma­tion and slow down your web­site. To pre­vent it from hap­pen­ing, remove:

  • com­ments in the queue and unap­proved comments
  • post revi­sions
  • trashed posts and pages

18. Avoid non-functional multimedia content

Recon­sid­er the amount of graph­ic con­tent you are using on your web­site. Avoid graph­ic based back­grounds and large sized images, which are not the decid­ing fac­tor in dri­ving conversions.

19. Disable pingbacks and trackbacks

Track­backs and ping­backs are most­ly spam that ends up in your com­ment mod­er­a­tion sec­tion. Too many unap­proved com­ments can slow down your web­site, so it’s best to dis­able them. If you are not using com­ments on your web­site it’s best to remove com­ment fields permanently.

20. Use CSS sprites

CSS sprites is an opti­miza­tion tech­nique of com­bin­ing sev­er­al image files into one, which reduces the num­ber of HTTP requests. Few­er requests = bet­ter speed and performance.

CSS sprites are very use­ful for social media but­tons, flags or oth­er icons that are usu­al­ly dis­played together.

Maintain your website regularly

Web­site speed and per­for­mance opti­miza­tion is an ongo­ing process. Once you’ve man­aged to suc­cess­ful­ly opti­mize speed and per­for­mance you have to con­tin­ue mon­i­tor­ing, test­ing and – most impor­tant­ly – reg­u­lar­ly main­tain your web­site. If you fail to do so, every­thing you add to, or change on your web­site, such as code changes, new wid­gets, plu­g­ins, pub­lished con­tent, revi­sions, com­ments, etc. can influ­ence future load speed and performance.

Free Consultation
Please let us know your project requirements, and we’ll get in touch as soon as we can.

    We are pleased to welcome you on the purpleplanet!
    To order the service package you’ve chosen, please fill in the form and we’ll get in touch with you soon.

      We are pleased to welcome you on the purpleplanet!
      To order the service package you’ve chosen, please fill in the form and we’ll get in touch with you soon.